<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                ## 回顧 上一節,我們了解了zepto代碼的最籠統的一個結構,而且模擬了一下代碼。其實當時還漏了一點,就是代碼里面有一個`zepto`變量不知道哪里定義的。 ```javascript var Zepto = (function(){ var $, zepto = {} // ...省略N行代碼... zepto.init = function(selector, context) { // 函數內容 } $ = function(selector, context){ return zepto.init(selector, context) } // ...省略N行代碼... return $ })() window.Zepto = Zepto window.$ === undefined && (window.$ = Zepto) ``` 即,我們在創建一個zepto對象例如執行`$('p')`時,會進入`zepto.init`這個函數,并將參數也響應傳遞。接下來就進入`zepto.init`看看這個函數。 <br> ## `zepto.init` 函數 `zepto.init`函數大約有幾十行代碼,把中間的那些`if...else...`操作去掉,剩下的就是: ```js zepto.init = function(selector, context) { var dom // ...此處省略N行... // create a new Zepto collection from the nodes found return zepto.Z(dom, selector) } ``` 中間省略的代碼,都是根據不同條件下對`dom`變量進行賦值。`dom`從名字也可以猜測出來,它將會賦值一個或多個DOM節點。最終,它將通過`selector`一起傳遞給`zepto.Z`函數并返回值。 至于`zepto.Z`是個什么鬼暫且先不管,先看看中間省略的代碼是什么。 - **無參數,即`$()`** ```js // If nothing given, return an empty Zepto collection if (!selector) return zepto.Z() ``` 上面代碼,如果沒有參數,將返回一個空的zepto集合,還是交給`zepto.Z`來處理,先不管。 - **`selector`參數是字符串,例如`$('p')` `$('<div>')` `$('#content')`** ```js else if (typeof selector == 'string') { selector = selector.trim() // If it's a html fragment, create nodes from it // Note: In both Chrome 21 and Firefox 15, DOM error 12 // is thrown if the fragment doesn't begin with < if (selector[0] == '<' && fragmentRE.test(selector)) dom = zepto.fragment(selector, RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // If it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) } ``` 上面代碼,如果`selector`是字符串,接下來會有三種情況。 情況1,參數為`<div>`這種形式,即是一個html標簽的,那么`dom`變量會被賦值為用這個標簽創建的DOM對象,就像`dom = document.createElement('div')`差不多。其中涉及到了`fragmentRE`和`zepto.fragment`兩個我們尚未了解的東東,此處不要深究,知道這段代碼的意思即可。 注意,通過測試發現,這里給`dom`賦值的其實不是一個dom節點對象,而是被封裝稱了數組。 ```js // If it's a html fragment, create nodes from it // Note: In both Chrome 21 and Firefox 15, DOM error 12 // is thrown if the fragment doesn't begin with < if (selector[0] == '<' && fragmentRE.test(selector)) dom = zepto.fragment(selector, RegExp.$1, context), selector = null ``` 情況2,如果第二個參數有值,則先根據第二個參數生成zepto對象,然后再調用`.find`來獲取,例如`$('.item', '#content')`這種用法。`find`方法是zepto對象的一個函數,API中用法的介紹。 ```js // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) ``` 情況3,以上兩種情況都不是,則調用`zepto.qsa`來獲取數據,后來聊這個方法的具體實現。`qsa`即`querySelectAll`的縮寫,看名字能大體明白了吧? ```js // If it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) ``` - **`selector`參數是函數,例如`$(function(){...})`** ```js // If a function is given, call it when the DOM is ready else if (isFunction(selector)) return $(document).ready(selector) ``` 這種用法也比較常見,意思是待dom加載完畢再執行函數。這個`ready`函數的具體實現后面會講到,這里先知道意思即可。 - **`selector`本身就是個zepto對象** 這種用法比較少,但是也不能避免,例如 ```js var a = $('p'); $(a); // 這里傳入的 a 本身就是個 zepto 對象了。 ``` 源碼中使用`zepto.isZ`來判斷,如果是的話,直接就返回自身。`zepto.isZ`的實現很簡單,看源碼即可。 ```js // If a Zepto collection is given, just return it else if (zepto.isZ(selector)) return selector ``` - **其他情況** 當以上情況都不符合的時候,即`selector`參數既不是空、也不是字符串、也不是函數的時候。 ```js else { // normalize array if an array of nodes is given if (isArray(selector)) dom = compact(selector) // Wrap DOM nodes. else if (isObject(selector)) dom = [selector], selector = null // If it's a html fragment, create nodes from it else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // And last but no least, if it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) } ``` 情況1,`selector`參數是數組,則通過一個`compact`處理一下賦值給`dom`。 ```js // normalize array if an array of nodes is given if (isArray(selector)) dom = compact(selector) ``` 情況2,`selector`參數是DOM節點,則將它作為數組賦值給`dom`。 ```js // Wrap DOM nodes. else if (isObject(selector)) dom = [selector], selector = null ``` 剩余情況,其實在`selector`是字符串的時候就已經考慮到了,因此感覺這里多余了。不過也可能是我考慮不周到,有疏漏的地方,如果誰發現了還望不吝賜教。 ```js // If it's a html fragment, create nodes from it else if (fragmentRE.test(selector)) dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null // If there's a context, create a collection on that context first, and select // nodes from there else if (context !== undefined) return $(context).find(selector) // And last but no least, if it's a CSS selector, use it to select nodes. else dom = zepto.qsa(document, selector) ``` **這里請注意,雖然有些處理函數這一節沒有詳細看代碼實現,但是最終,賦值給`dom`的形式是一個數組。就像這段代碼** ```js // Wrap DOM nodes. else if (isObject(selector)) dom = [selector], selector = null ``` 可以針對不同情況的`selector`,跟蹤代碼看一下。 <br> ## 總結 `zepto.init`函數算是zepto源碼中比較復雜的一個函數,一開篇就遇到了個硬骨頭。不過我們這里暫且先把那些分叉放在一邊,先把大路疏通,然后在慢慢的去一個一個攻破那些分叉。 接下來我們再把`init`函數的結構梳理一下。 ```js zepto.init = function(selector, context) { var dom // 分情況對dom賦值: // 1. selector 為空 // 2. selector 是字符串,其中又分好幾種情況 // 3. selector 是函數 // 4. 其他情況,例如 selector 是數組、對象等 // create a new Zepto collection from the nodes found return zepto.Z(dom, selector) } ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看