手把手帶你實現乙個mini版jquery

2021-09-27 09:14:19 字數 2602 閱讀 8505

我們要實現的功能如下

//amd模組檢測if(

typeof define ===

'function'

&& define.amd)

//執行結構

var $ = jquery =

(function

(window,undefined)

)(window)

// 對dom集合進行儲存,生成jquery物件

function

query

(dom, selector)

// 進行dom檢視,同時生成jquery物件

function

z(elements, selector)

// 具體的dom查詢

function

qsa(element, selector)

// 得到jquery物件

return

function

(nodeselector)

z

.prototype =)}

,// 查詢元素

find

(selector)

)//為了實現鏈式操作 返回當前物件

return

newz

(doms, selector);}

,//增加樣式

addclass:

function

(classes))}

);return

this;}

,//比較第幾個

eq(i)})

//為了實現鏈式操作 返回當前物件

return

newz

(doms,

this

.selector);}

,//刪除方法

remove())}}

// 定義全域性方法(既可以內部使用)

function

isfunction

(value)

function

iswindow

(obj)

function

isdocument

(obj)

function

$(nodeselector)

// 定義zepto的全域性方法(也可以外部使用)

$.isfunction = isfunction;

$.iswindow = iswindow;

$.isdocument = isdocument;

// 得到jquery物件

return $

//amd模組檢測if(

typeof define ===

'function'

&& define.amd)

var $ = jquery =

(function

(window,undefined)

// 進行dom檢視,同時生成jquery物件

function

z(elements, selector)

// 具體的dom查詢

function

qsa(element, selector)

z.prototype =)}

,find

(selector)

)return

newz

(doms, selector);}

, addclass:

function

(classes))}

);return

this;}

,eq(i)}

)return

newz

(doms,

this

.selector);}

,remove()

)}}// 定義全域性方法(既可以內部使用)

function

isfunction

(value)

function

iswindow

(obj)

function

isdocument

(obj)

function

$(nodeselector)

// 定義zepto的全域性方法(也可以外部使用)

$.isfunction = isfunction;

$.iswindow = iswindow;

$.isdocument = isdocument;

// 得到jquery物件

return $})

(window)

實現的功能,優點,可擴充套件的地方:

1.給元素增加class

2.鏈式操作

3.需要什麼可以在z的原型方法裡新增

4.jquery物件非常純淨,方法新增以及操作都在z上

5.全域性方法呼叫

手把手帶你實現乙個可用的單點登入系統

怎麼能夠快速實現乙個 sso 系統,這是很多在企業裡開發登入模組的朋友經常遇到的問題。中文網路上有太多的討論,但能夠引導大家真正去實現乙個 sso 系統的卻鳳毛麟角。本文立足於 sso 系統的實現,只講實現,不扯概念,幫助大家構建出乙個可用的 sso 系統。本場 chat 您將收穫 了解乙個 sso...

手把手帶你實現React的Modal元件

眾所周知,產品經理有三寶 彈窗 浮層和引導。身為乙個程式設計師,尤其是前端工程師不得不面向產品程式設計,由於原型圖上滿滿的彈窗,逼迫我們不得不封裝乙個彈窗元件來應付產品的需求 1 通過傳入乙個visible來控制彈框的顯示與隱藏,資料型別為boolean 2 通過傳入乙個title來設定彈框的標題,...

手把手帶你開發乙個前端命令列工具

命令列工具,即cli command line inte ce 是在圖形使用者介面得到普及之前使用最為廣泛的使用者介面,它通常不支援滑鼠,使用者通過鍵盤輸入指令,計算機接收到指令後,予以執行。在學習這篇教程之前,我們需要先了解nodejs,npm和一些常用的shell命令相關知識點。那怎樣才可以從0...