自己動手做一個jQuery的API

04-28

1.jQuery的工作原理簡述

實現一個獲取節點的API，並且擁有添加類名的方法，添加文本的方法，獲取除自己的兄弟節點。我們需要了解jQuery的工作原理3：

jQuery本身並不是UI組件庫或其他的一般AJAX類庫，jQuery改變javascript編碼方式！

那麼它是如何實現它的聲明的呢？這裡，用以下的一段簡短的使用流程：

1、查找(創建)jQuery對象：$("selector");

2、調用jQuery對象的方法完成我們需要完成的工作：$("selector").doOurWork();

Query就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的。這兩個步驟是jQuery的編碼邏輯核心

2.封裝函數

2.1創建jQuery對象函數

function getNodes(node{ var nodes = {} if(typeof node === string) { //如果node是字元串則用DOM的API獲取節點 nodes = document.querySelectorAll(node) }else if (a instanceof Node) { //如果node是節點，直接賦給nodes偽數組 nodes = { 0: node, length: 1 } } return nodes}

2.2獲取兄弟節點函數

function getSiblings(node){ var allChildren = node.parentNode.children 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}

2.3給所有節點添加類名函數

function addClass(nodes，className) { for(var i = 0; i < nodes.length;i++){ nodes[i].classList.add(className); } }

2.4給所有節點添加文本函數

function setText(nodes，text) { for(var i = 0; i < nodes.length; i++) { nodes[i].textContent = text; }}

3.封裝成函數

3.1寫好每一個功能後需要封裝到一個函數

3.2整理函數統一給node屬性

3.3添加到window中，並用$代替

4.jQuery的API使用

4.1代碼

html代碼：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title></head><body> <ul> <li id="item1">選項1</li> <li id="item2">選項2</li> <li id="item3">選項3</li> <li id="item4">選項4</li> <li id="item5">選項5</li> </ul></body></html>

js代碼：

4.2效果圖

5.總結

實現jQuery的工作原理：創建一個jQuery構造函數，接收一個節點或者選擇器,並把它封裝成一個偽數組，然後在這個偽數組上增加幾個api，返回這個偽數組。

1、查找(創建)jQuery對象：$("selector");

2、調用jQuery對象的方法完成我們需要完成的工作：$("selector").doOurWork();

Query就是以這種可以說是最簡單的編碼邏輯來改變javascript編碼方式的。這兩個步驟是jQuery的編碼邏輯核心

綜上所述,jQuery給我們帶來了一個簡潔方便的編碼模型(1>創建jQuery對象;2>直接使用jQuery對象的屬性/方法/事件),一個強悍的dom元素查找器($),插件式編程介面(jQuery.fn),以及插件初始化的」配置」對象思想。