學習zepto.js(對象方法)[2]

今天來講下zepto那一套dom操做方法,

prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter;

按着從內到外,從主到從,從前到後的順序來講這八個方法.

這些方法的參數能夠是一個dom節點,也但是是一個html片斷,或者Zepto對象;

prepend():

將參數插入對象內部的頭部;

append():

將參數插入對象內部的尾部;

 prependTo():

將對象插入到參數內部的頭部(能夠理解爲將prepend的參數變爲調用方法的對象,將對象變爲方法的參數);

appendTo():

將對象插入到參數內部的尾部;

以上四個全都是元素內部的插入,接下來的四個所有是元素外部插入的.

before():

將參數插入到對象的前邊;

after():

將參數插入到對象的後邊;

insertBefore():

將對象插入到參數的前邊;

insertAfter():

將對象插入到參數的後邊;

之因此將這八個方法放在一塊說,是由於這八個方法是經過循環動態生成的.首先要先會用,才能夠去試着瞭解內部結構.瞭解完了之後,你會發現,你會很熟練的使用它;

上邊那個數組是儲存的幾個操做的名稱,下邊的forEach循環是在zepto自執行函數中執行的,就是說,在構件zepto原型的是否就建立了這幾個方法;

forEach方法回調返回的參數,第一個是值,第二個是值的下標;

map方法回調返回的參數同上,在方法內部第一個參數名使用了_(下劃線),表示在該函數中並未使用到,但必需要佔位(某羣某大神就是這麼幹的),注意數組中存儲的,

只有四個值(四個將參數插入至對象中的方法名[就叫它主動方法吧,原創名字,能夠隨意使用,不受任何版權約束]),還有數組的順序也是很重要(根據數組順序決定插入的位置);

inside變量存儲了該方法是否爲內部插入的bool值,這也是爲何上邊說數組的順序很重要;

跳過map方法中的處理,很少作解釋,由於這個是轉換參數爲DOm節點的;

在方法返回時執行的each方法,

方法首先會判斷該方法是否爲對象內部的操做,若是是,將parent變量賦值爲當前對象,若是不是,就說明是對象外部操做,就將parent賦值爲對象的parentNode;

而後根據方法名字在操做集合中的下標來判斷去什麼dom節點,

把八個操做帶進去,由於這八個方法最後使用的都是insertBefore方法,

順便說一下原生的insertBefore方法使用方式.

首先調用該方法的爲要被插入的對象,接收兩個參數,第一個是要插入的對象,第二個是要插誰的前邊;

售票處.insertBefore(李四,張三);

 

思考一下爲何要這麼作.

after

首先after是第一個,after是外部的操做,並且是插入到當前調用的對象的後邊,

要想使用insertBefore來實現插入到某對象的後邊,咱們須要三個對象,一個是當前對象,還有要插入的對象,以及當前對象的容器,也就是他的parent;

在進入方法時,咱們經過inside變量獲取到了該方法是否爲內部插入,而後經過inside變量來給對象的容器賦值(自身或者parent);

在這裏,三個所需的變量咱們就都拿到了.

after執行的是插入到當前對象後,因此說

咱們經過下標取出after操做執行所需的dom元素,對象的nextSibling,就是對象的後一個元素.插入到對象.nextSibling前邊就至關於插入到對象的後邊,

(就是說,超過了第二名,你就是第二名,繞不過來的自行撞牆);

parent(容器).insertBefore(要插入的對象,當前對象的後一個節點);一個dom樹中同一個dom節點不會出現兩次,就是說,移動對象屬於剪切操做,而不是複製操做,

這也是爲何方法內不會進行判斷調用方法的對象是否爲多個,若是是多個,則須要將對象進行copy;

prepend

第二個是prepend,prepend是內部插入,將參數插入到對象內部最前邊,與append相反(append插入到內部的尾部);

因爲是內部操做,因此parent咱們會取自身.而後再判斷下標獲得是prepend.而後咱們取出用來肯定位置的dom元素,就是對象的第一個子節點,插入到該節點前,就是取代了該節點成爲firstChild(幹掉熊貓,我就是國寶);

調用方式就是:

parent(這裏是對象自身).insertBefore(要插入的對象,當前對象的第一個子節點);

before

before,插入到對象前(外部操做),這個就沒什麼好解釋的了.insertBefore原本就是幹這個使得.

append

append,插入到對象內尾部,其實,區分這幾個方法的核心就在這裏,若是執行insertBefore方法,第二個參數爲null,則會直接將第一個元素插入到容器的最後,至關於原生的appendChild方法.

 

關於下邊那四個方法,就不作多解釋了.

只是簡單的將對象以及參數掉了個(個兒);

若是讓我來實現這八個方法,我也許會寫一個switch,更好點了也許會動態判斷內部外部插入,裏邊會使用appendChild等等一系列方法,但絕對不會想到這種寫法,因此說,讀源碼真心的學習最快的途徑.

今天先寫到這裏,八個dom插入方法,本身也消化一下.裏邊也許說的還有點不太詳細,若是有什麼不明白的,歡迎留言,你們一塊兒探討.

//明日面試,求祝福