上篇已經講解了zepto.init()的幾種情況,這篇就繼續記錄這幾種情況下的具體分析.
1. 首先是第一種情況,selector為空 既然是反向分析,那我們先看看這句話的代碼;
if (!selector) return zepto.Z()
這里的返回值為zepto.Z();那我們繼續往上找zepto.Z()函數
zepto.Z = function(dom, selector) {return new Z(dom, selector)
}
這個函數仍然擁有一個返回值,Z函數的實例 ,同樣的道理,我們繼續去找Z() ;
function Z(dom, selector) {var i, len = dom ? dom.length : 0for (i = 0; i < len; i++) this[i] = dom[i]this.length = lenthis.selector = selector || ''
}
根據以上代碼可以分析出,當沒有參數時,會得到一個length:0,selector:''的對象.
2. 當selector為字符串的時候,又分為三種情況; 同樣的,我們先看看這句話的代碼
else if (typeof selector == 'string') {selector = selector.trim()
}
if (selector[0] == '<' && fragmentRE.test(selector))dom = zepto.fragment(selector, RegExp.$1, context), selector = null
這里有兩個知識點:
這里的fragmentRE是Zepto函數在之前定義的一段正則;
```java
//<div>erfwef</div> 取出<div>
fragmentRE = /^\s*<(\w+|!)[^>]*>/,
```
2 zepto.fragment(selector, RegExp.$1, context)
```java
//對應上面的代碼,這里第一個參數是selector,就是我們在寫代碼時的$('xxx')中的xxx,name為RegExp.$1,即正則匹配的第一個()里的東西,就是標簽元素,例如 div p h1等,properties為執行環境.
zepto.fragment = function(html, name, properties) {var dom, nodes, container// singleTagRE仍為之前定義的變量,singleTagRE = /^<(\w+)\s*\/?>(?:<\/\1>|)$/, 匹配值如下截圖//如html傳入值為<p></p>,匹配singleTagRE,則創建<p></p>,并調用$('<p></p>')if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1))//如果不匹配if (!dom) {//這是一段修復代碼,將<div/>之類的不正常的代碼修復成<div></div>;具體的下面再講解if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")//如果沒有標簽名,,給他一個標簽,fragmentRE = /^\s*<(\w+|!)[^>]*>/,if (name === undefined) name = fragmentRE.test(html) && RegExp.$1//containers = {tr': document.createElement('tbody'),tbody': table, 'thead': table, 'tfoot': table,td': tableRow, 'th': tableRow,'*': document.createElement('div')},//如果name值不在container范圍內,則標簽名為divif (!(name in containers)) name = '*'//創建容器container = containers[name]//把html片段放入到容器中container.innerHTML = '' + html//這里調用了$.each();一會再詳細講解,這里是涉及到哪個函數我就去解析哪個函數,雖然看起來比較亂,但是符合我自己的邏輯線路.//emptyArray = [], slice = emptyArray.slice,所以這里的slice.call即為Array.prototype.slice.call(),能將具有length屬性的對象轉成數組;dom = $.each(slice.call(container.childNodes), function(){//刪除container.removeChild(this)})}if (isPlainObject(properties)) {nodes = $(dom)$.each(properties, function(key, value) {if (methodAttributes.indexOf(key) > -1) nodes[key](value)else nodes.attr(key, value)})}return dom
}
以上代碼出現了singleTagRE
else if (context !== undefined) return $(context).find(selector)
這里涉及到一個方法find,是$.fn中的方法,之后做統一分析;
else dom = zepto.qsa(document, selector) zepto.qsa = function(element, selector){var found,//判斷是不是IDmaybeID = selector[0] == '#',//判斷是不是cssmaybeClass = !maybeID && selector[0] == '.',//看是不是class和id名,如果是,將'#'或者'.'去除,然后賦值給nameOnlt;//否則,直接將值賦值;nameOnly = maybeID || maybeClass ? selector.slice(1) : selector,//simpleSelectorRE = /^[\w-]*$/,//匹配字母數字下劃線和減號的組合;isSimple = simpleSelectorRE.test(nameOnly)//如果有內置getElementById方法,并且是id名;return (element.getElementById && isSimple && maybeID) ?//則返回element.getElementByID(nameOnly)( (found = element.getElementById(nameOnly)) ? [found] : [] ) ://反之的話,再做一次判斷//若element不為元素節點,document,DocumentFragment時;為空,(element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11) ? [] ://否則,將節點轉換成數組;slice.call(//這里是一個三元運算符里套著另一個三元運算符;isSimple && !maybeID && element.getElementsByClassName ?//當為class,則調用element.getElementsByClassName(nameOnly) maybeClass ? element.getElementsByClassName(nameOnly) ://否則調用tagName;element.getElementsByTagName(selector) ://這個否則是最外層的判斷;element.querySelectorAll(selector))}
3. 當傳入的值為函數時,則在dom加載后執行它; else if (isFunction(selector)) return $(document).ready(selector)
4. 如果selector為Z的實例對象.則返回他自己; else if (zepto.isZ(selector)) return selector
5. 最后,又分為5種情況; 如果selector為數組;
selector為對象 selector為html片段;則將其轉換成dom 有context的時候
else if (context !== undefined) return $(context).find(selector)沒有context
轉載于:https://www.cnblogs.com/siva-epoch/p/7161627.html
總結
以上是生活随笔 為你收集整理的读zepto核心源码学习JS笔记(3)--zepto.init() 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
