如何搭建乙個可以鏈式呼叫,批量操作的前端框架

2022-07-08 18:00:23 字數 2835 閱讀 3937

用jquery寫**的時候總是很方便,少寫很多**。那麼為什麼會這樣呢?我覺得主要有三個原因:

① jquery封裝了獲取dom的方法,只需要乙個$就可以方便地獲取你想要得dmo節點

② 鏈式呼叫,比如你可以這樣寫**:

$("#a").show().height(20);

而不需要這樣寫

$("#a").show();

$("#a").height(20);

③ 物件的批量操作。假如你需要對下面的列表進行同樣的操作

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

<

li class

="list"

>列表

li>

那麼你需要這樣寫:

var list = document.getelementsbyclassname("list");

for (var i = 0, len = list.length; i < len; i++)

很麻煩是吧,要使用for迴圈。但是如果你用jquery寫,只需要這樣:

$(".list").html("修改");

那麼這樣方便的**編寫方式,它的背後是如何運作的。

首先是實現$方法,按照直線思維,你一定以為$方法是這樣的:

function

$(selector)

else

if(selector帶.號)

else

}

其實不是,如果是這樣,那就太簡單了,充其量只是對 document.getelement 的封裝。你既不能實現鏈式呼叫也不能實現批量操作

先上完整**,再做分析:

1

function

_$(els) 89

}10 _$.prototype =

15return

this;16

},17 html: function

(text) );

22return

this;23

}2425};

26 window.$ = function

(selector) ;

2930

31 $("list").html("修改").hide();

為了方便理解,這裡的_$方法只實現使用class來獲取dom結點。如果要實現完整的,類似jquery的獲取dom結點的方法,還需要寫一些正則和字串操作。

這裡_$通過 document.getelementsbyclassname 來獲取到dom節點後通過push將這些dom結點放到了陣列 elements中。

而且最關鍵的是,我在_$的prototype上定義了兩個方法。

第乙個方法 each ,這個方法的作用就是實現批量操作。

它會迴圈獲取我們在_$的時候放置的陣列 elements中的每乙個元素,並使用 call將引數fn的上下文設定為this,再將每個elements中的dom結點傳遞給fn。這就產生了批量操作的效果。

看到第二個方法 html,這個方法是改變dom的內容。可以看到在html中使用了each方法來批量操作。最後還 return this; 這句使得原形上的方法可以鏈式呼叫。

所以,現在我們可以不依賴jquery而可以這樣寫**:

$("list").html("修改")

在這個基礎上你還可以實現很多方法,例如可以在實現乙個hide()方法來隱藏結點:

1

function

_$(els) 89

}10 _$.prototype =

15return

this;16

},17 html: function

(text) );

22return

this;23

},24 hide: function

() );

29return

this;30

}3132};

33 window.$ = function

(selector) ;

3637

38 $("list").html("修改").hide();

可以看出來,這篇文章沒有將很多**細節,意在讓你理解乙個可以批量操作,鏈式呼叫的框架的大概架構是如何的。

補充:jquery使用方便還有乙個很重要的原因,它相容各個瀏覽器。

如何搭建乙個團隊 一

現在的社會不再是英雄獨行的社會,我們想做成一件事,往往需要乙個團隊的配合才能完成,只是根據專案的大小,這個團隊有大有小而已。無論團隊大小,本質上都是一樣。建設乙個團隊需要做的事情一件不能少,但是人數多的團隊與人數少的團隊在具體的處理上有一些差別。根據自己的經驗,我習慣將6人 12人作為兩個分界線。沒...

乙個驅動如何去呼叫乙個驅動?

這個是入門級問題,以前我剛搞wince的時候也很糾結,不知道怎麼去弄。後來看了wince6.0 6410 s5pv210的 攝像頭驅動就發現原來驅動和驅動之間呼叫和應用程式呼叫驅動是一樣的 一點都沒區別。createfile 開啟另外乙個驅動 deviceiocontrol 去操作另外乙個驅動 go...

如何搭建乙個nexus私服

一 準備工作 1.什麼是私服?為什麼要搭建私服?搭建了私服有什麼好處?很多問題冒出來了。答 二 進入正題 1.執行第一步和第二步 2.測試nexus是否安裝成功 nexus服務啟動之後,在瀏覽器中輸入 http localhost 8081 nexus 進行訪問,如下圖所示 會顯示出nexus的頁面...