【zepto學習筆記01】核心方法$()

前言

我們移動端基本使用zepto了，而我也從一個小白變成稍微靠譜一點的前端了，最近居然經常要改到zepto源碼
但是，我對zepto不太熟悉，其實前端水准還是不夠，所以便私下偷偷學習下吧，別被發現了

核心方法$()

我們使用這個方法一般有幾個用途（我這里只說我自己用到過的），這里根據使用度排個序：

① 選擇器/$(selector)

將返回一個包裝過的dom集合對象（有很多選擇器）

② html字符串/$(domStr)

仍然返回一個包裝過的dom對象，他會將字符串初始化為我們的dom結構
PS：新增了一個方法可以直接賦予dom結構屬性，我們這里不關注

③ 函數/$(function(){})

我基本沒這么用過，他實在文檔加載結束后執行

暫時不管這些東西吧。我們這里來一個個看看他們的實現：

$('div')
//=> all DIV elements on the page
$('#foo')
//=> element with ID "foo"

// create element:
$("<p>Hello</p>")
//=> the new P element
// create element with attributes:
$("<p />",
{
text: "Hello",
id: "greeting",
css: { color: 'darkblue' }
})
//=> <p id=greeting style="color:darkblue">Hello</p>
// execute callback when the page is ready:
Zepto(function ($) {
alert('Ready to Zepto!')
})

入口$()

只如初見

首先我們來看看選擇器，在zepto代碼中有這么一行代碼：

$ = function (selector, context) {
    return zepto.init(selector, context)
}

這里其實前面就定義了$這個變量：

var undefined, key, $, classList, emptyArray = [],

這里初始化了$這個變量為一個函數，最后並將這個變量公開化（現在再匿名還是中，外面是訪問不到的），他具體是這樣干的

var Zepto = function () {
    var zepto = {}, $;
    zepto.init = function (selector, context) {
    };
    $ = function (selector, context) {
        return zepto.init(selector, context);
    };
    $.zepto = zepto;
    return $;
};
window.$ = Zepto;

於是我們在頁面中使用這樣的代碼：

var el = $('#id');
//實際上是
var el = zepto.init('#id');

具體里面的邏輯就是我們的重點，於是我們跟進去慢慢看吧

一查到底

我們詳細看看zepto.init這個方法

zepto.init = function (selector, context) {
    if (!selector) return zepto.Z()
    else if (isFunction(selector)) return $(document).ready(selector)
    else if (zepto.isZ(selector)) return selector
    else {
        var dom
        if (isArray(selector)) dom = compact(selector)
        else if (isObject(selector))
            dom = [isPlainObject(selector) ? $.extend({}, selector) : selector], selector = null
        else if (fragmentRE.test(selector))
            dom = zepto.fragment(selector.trim(), RegExp.$1, context), selector = null
        else if (context !== undefined) return $(context).find(selector)
        else dom = zepto.qsa(document, selector)
        return zepto.Z(dom, selector)
    }
}

第一步，如果選擇器selector不存在的話，就調用默認的方法，說白了就是返回一個集合長度為0的包裝對象

//通過給dom設置__proto__屬性指向$.fn來達到繼承$.fn上所有方法的目的
//ie自然是不支持的，zepto也基本不理睬ie
zepto.Z = function (dom, selector) {
    dom = dom || []
    dom.__proto__ = $.fn
    dom.selector = selector || ''
    return dom
}

第二步，處理傳入函數情況，如果傳入是函數的話就在文檔加載結束后執行
第三步，處理傳入zepto對象，如果已經是zepto包裝對象了就直接返回

zepto.isZ = function (object) {
    return object instanceof zepto.Z
}

第四步，開始了復雜的邏輯計算了，我們這里單獨提出來

selector處理

① 數組項

如果對象是一個數組，則去掉其中無意義的數組項

//清除給定的參數中的null或undefined，注意0==null,'' == null為false
function compact(array) {
    return filter.call(array, function (item) {
        return item != null
    })
}

filter

其中filter是javascript數組的一個新的方法，用以篩選滿足條件的數組項

var arr = [5, "element", 10, "the", true];
var result = arr.filter(
    function (value) {
        return (typeof value === 'string');
    }
);
document.write(result);//Output: element, the

最后返回數組項，我們這里認為其中每個數組項都是一個dom結構

② 傳入對象

因為typeof dom也是object，所以zepto這里做了一點擴展

function isObject(obj) {
    return type(obj) == "object"
}

這個代碼存在的意義，老夫也不知道了......if里面的代碼比較關鍵：
如果傳入的是對象（比如{}），就將selector拷貝到一個對象，如果是dom結構就直接放入數組
這里有兩個方法需要注意，一個是extend，一個是isPlainObject

extend

extend用於為對象擴展對象

function extend(target, source, deep) {
    for (key in source)
    //如果深度擴展
        if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
            //如果要擴展的數據是對象且target相對應的key不是對象
            if (isPlainObject(source[key]) && !isPlainObject(target[key])) target[key] = {}
            //如果要擴展的數據是數組且target相對應的key不是數組
            if (isArray(source[key]) && !isArray(target[key])) target[key] = []
            extend(target[key], source[key], deep)
        } else if (source[key] !== undefined) target[key] = source[key]
}

$.extend事實上也是調用的上面的方法，我們這里先不管他

$.extend = function (target) {
var deep, args = slice.call(arguments, 1)
if (typeof target == 'boolean') { //當第一個參數為boolean類型的值時，表示是否深度擴展
deep = target
target = args.shift() //target取第二個參數
}
//遍歷后面的參數，全部擴展到target上
args.forEach(function (arg) {
extend(target, arg, deep)
})
return target
}

isPlainObject

這個方法有所不同，通過字面量定義的對象和new Object的對象返回true，new Object時傳參數的返回false（測試對象是否純粹的對象）

function isPlainObject(obj) {
    return isObject(obj) && !isWindow(obj) && obj.__proto__ == Object.prototype
}
$.isPlainObject({})// => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date) // => false
$.isPlainObject(window) // => false

至於這個數組到底是不是dom，代碼這里先不關注，完了這里也結束了

③ 傳入html字符串

如果傳入的是html字符串，我們這里就要負責創建dom的工作了，整個這個東西其實比較復雜：

//HTML代碼片斷的正則
fragmentRE = /^\s*<(\w+|!)[^>]*>/,

PS：我正則不行，暫時就不嘗試去解釋這個了

字符串=>dom

zepto.fragment = function (html, name, properties) {
    //將類似<div class="test"/>替換成<div class="test"></div>,算是一種修復吧
    if (html.replace) html = html.replace(tagExpanderRE, "<$1></$2>")
    //給name取標簽名
    if (name === undefined) name = fragmentRE.test(html) && RegExp.$1
    //設置容器標簽名，如果不是tr,tbody,thead,tfoot,td,th，則容器標簽名為div
    if (!(name in containers)) name = '*'
    var nodes, dom, container = containers[name] //創建容器
    container.innerHTML = '' + html //將html代碼片斷放入容器
    //取容器的子節點，這樣就直接把字符串轉成DOM節點了
    dom = $.each(slice.call(container.childNodes), function () {
        container.removeChild(this) //逐個刪除
    })
    //如果properties是對象, 則將其當作屬性來給添加進來的節點進行設置
    if (isPlainObject(properties)) {
        nodes = $(dom) //將dom轉成zepto對象，為了方便下面調用zepto上的方法
        //遍歷對象，設置屬性
        $.each(properties, function (key, value) {
            //如果設置的是'val', 'css', 'html', 'text', 'data', 'width', 'height', 'offset'，則調用zepto上相對應的方法
            if (methodAttributes.indexOf(key) > -1) nodes[key](value)
            else nodes.attr(key, value)
        })
    }
    //返回將字符串轉成的DOM節點后的數組，比如'<li></li><li></li><li></li>'轉成[li,li,li]
    return dom
}

這個方法比較高深，各位慢慢消化，我稍后也再去消化下
以上完了后，就返回了創建后的dom結構了......

④ 上下文

如果帶有上下文，就得使用上下文查找，沒有就在document中查詢

zepto.qsa = function (element, selector) {
    var found
    return (isDocument(element) && idSelectorRE.test(selector)) ?
            ((found = element.getElementById(RegExp.$1)) ? [found] : []) :
            (element.nodeType !== 1 && element.nodeType !== 9) ? [] :
            slice.call(
                classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) :
                tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) :
                element.querySelectorAll(selector)
        )
}

這個函數與上面函數一樣重要，各位下去消化吧

⑤ 結束

最后的最后便返回我們的包裝集合了，這里依舊使用zepto.Z(dom, selector)進行封裝

深入zepto.fragment

待續......

深入zepto.qsa

待續......

結語

今天的學習暫時到這里，我們下次繼續。