標籤：

自製jQuery

06-04
自製jQuery

自己做一個jQuery的思路

封裝兩個函數 → 添加命名空間 → 擴展Node原型/無侵入設置

<!--html代碼--><body> <h1>text</h1> <ul> <li id="item1">選項1</li> <li id="item2">選項2</li> <li id="item3">選項3</li> </ul></body>

1、封裝兩個函數

  • 獲取所有兄弟元素

//javaScript代碼function getSiblings(node) { var allChlidren = node.parentNode.chlidren var array = { length：0 } for(let i=0;i<allChildren.length;i++){ if(allChildren[i] !== node){ array[array.length] =allChildren[i] array.length += 1 } } return array}//調用方法getSiblings(item2)

  • 給目標元素添加class

//javaScript代碼function addClass(node,classes){ for (let key in classes){ var value = classes[key] var methodName = value? add : remove node.classList[methodName](key) }}// 調用addClass()addClass(item1,{ a:ture , b:false} )

//語法基礎

classList[methodName === classList.methodName

2、添加命名空間

//javaScrip代碼window.textdom = {} // yuitextdom.getSiblings=function (node) { var allChlidren = node.parentNode.chlidren var array = { length：0 } for(let i=0;i<allChildren.length;i++){ if(allChildren[i] !== node){ array[array.length] =allChildren[i] array.length += 1 } } return array}textdom.addClass = function (node,classes){ for (let key in classes){ var value = classes[key] var methodName = value? add : remove node.classList[methodName](key) }}//調用方法textdom.getSiblings( item3 )textdom.addClass ( item3,{a:false , b:true } )

了解不紮實的語法基礎： for in 語法

3、 擴展Node原型/無侵入設置

上面的函數調用方法都是textdom.addClass()這樣的，假如設想，直接以目標元素為對象進行方法調用，如item2.getClass(red),方法有兩種。

  • 擴展Node原型

Node.prototype.getSiblings =function ( ) { var allChlidren = this.parentNode.chlidren var array = { length：0 } for(let i=0;i<allChildren.length;i++){ if(allChildren[i] !== this){ array[array.length] =allChildren[i] array.length += 1 } } return array}Node.prototype.addClass = function(classes){ classes.forEach( ( value ) => this.classList.add( value ) )}//調用函數：item3.getSiblings.call(items) //等價於item3.getSiblings()item3.addClass.call( item1,[ text , red , blue ] )//等價於item3.addClass( [text , red , blue ] )

① this知識點 : this是call()的第一個參數

② 箭頭函數

③函數調用： f.call ( asThis , input1 , input2 )

其中asThis會被當作this，[ input1 , input2 ]會被當作arguments

  • 無侵入設置

第一版 基本實現直接目標元素調用的目的

//javaScriptwindow.Node2 = function( node ){ return{ getSiblings : function( ){ var allChlidren = this.parentNode.chlidren var array = { length：0 } for(let i=0;i<allChildren.length;i++){ if(allChildren[i] !== this){ array[array.length] =allChildren[i] array.length += 1 } } return array }, addClass : function (classes ) { classes.forEach( (value) => this.classList.add(value) ) } }}var item3 = Node2(item3)//實現調用item3.getSiblings()item3.addClass([ red ])

console.dir(node2) //得到的是一個原型為Object.prototype，裡面含有addClass()等方法的對象

第二版 可以使用選擇器確定目標元素

window.Node2 = function( nodeOrSelector ){ let node if(typeof nodeOrSelector === string ){ node= document.querySelector(nodeOrSelector) }else{ node= nodeOrSelector } return{ getSiblings : function(){ var allChlidren =node.parentNode.chlidren var array = { length：0 } for(let i=0;i<allChildren.length;i++){ if(allChildren[i] !==node){ array[array.length] =al lChildren[i] array.length += 1 } } return array }, addClass : function (classes ) { classes.forEach( (value) =>node.classList.add(value) ) } }}var item3= Node2(item3)

使用了閉包

第三版 可以實現對多個目標元素設置

window.Node2 = function( nodeOrSelector ){ let nodes = { } if( typeof nodeOrSelector === string ){ let temp = document.querySelectorALL ( nodeOrSelector) for(let i=0 ; i<temp.length ; i++ ){ nodes[i] = temp[i] } node.length = i //得到一個偽數組 }else if (nodeOrSelector instanceof Node){ nodes = { 0:nodeSelector , length:1 }//為了保持一致性，的到一個偽數組 } nodes.addClass = function ( classes ) { classes.forEach( (value) => { for( let i=0 ; i< nodes.length ; i++ ){ nodes[i].classList.add(value) } }) } nodes.getText = function ( ){ var texts= [ ] for ( let i=0 ; i<nodes.length ; i++ ){ texts.push(nodes[i].textContent) } nodes.setText = function (text){ for ( let i=0 ; i<nodes.length ; i++ ){ nodes[ i ] .textContext = text } } return nodes}

了解jQuery的一些特點

  • jQuery是一個構造函數，這次自製的jQuery沒有使用到prototype。實際上jQuery構造的實例函數原型是jQuery.prototype。
  • jQuery實例函數的構成：

    jQuery的實例是一個數組對象，每個key對應的是一個node節點對象。

  • jQuery除了DOM操作外，還有動畫、AJAX 等模塊。
  • 一道常考的面試題

<div id=x></div>

var div = document.getElementById(x);

var $div = $(#x);

請說出 div 和 $div 的聯繫和區別。

聯繫：

$div = $( div ) 可以將div變成$div

div = $div [0] 或 div = $div.get(0)可以將$div變成div

區別:

div 是一個DOM(element)對象，它的原型是node.prototype

$div是由jQuery函數構建的數組對象，它的原型是jQuery.prototype,他的屬性和方法有0 1 2.....length selector 等等

推薦閱讀：

※多元素浮動時的排列問題？
※CSS animation 與 CSS transition 有何區別？
※[多行文本] 樣式怎麼沒了？
※【譯】CSS變數的正確使用方法
※怎麼覺得JS和CSS重疊的東西太多了？

TAG:CSS |