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

前言

昨天學習了核心$()，有幾個遺留問題，我們今天來看看吧

$.each

遍歷數組/對象，將每條數據作為callback的上下文，並傳入數據以及數據的索引進行處理，
如果其中一條數據的處理結果明確返回false，則停止遍歷，並返回elements

$.each = function (elements, callback) {
    var i, key
    if (likeArray(elements)) {
        for (i = 0; i < elements.length; i++) {
            if (callback.call(elements[i], i, elements[i]) === false)
                return elements;
        }
    } else {
        for (key in elements) {
            if (callback.call(elements[key], key, elements[key]) === false)
                return elements;
        }
    }
    return elements
}

這個方法本身實現比較簡單，我們就不追究了，我們看看里面用到了一個likeArray

function likeArray(obj) {
    return typeof obj.length == 'number'
}

這個方法我們就說完了，下面會用到的所以這里就先提出來

zepto.fragment

首先，他的調用時這個樣子的：

dom = zepto.fragment(selector.trim(), RegExp.$1, context)

傳入html字符串，第二個參數為尋找到的name，第三個是上下文，我們先來看看這個正則

var fragmentRE = /^\s*<(\w+|!)[^>]*>/;

我們來隨便寫一段代碼測試下

//HTML代碼片斷的正則
var fragmentRE = /^\s*<(\w+|!)[^>]*>/;
var str = '<div><span>fdfdsdf</span></div>';
console.log(RegExp.$1);
console.log(fragmentRE.test(str));
console.log(RegExp.$1);
console.log(fragmentRE.exec(str));

這段代碼的結果如下，RegExp.$1應該是取得最近一次匹配的標簽
所以這里傳入的參數就是字符串和最外層標簽名了，我們繼續往下走

然后他這里來了一個html修復，向只寫了<div>沒結尾的會補全

var tagExpanderRE = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig;
var str = '<p class="ddd"/>';
console.log(tagExpanderRE.exec(str));
console.log(str.replace(tagExpanderRE, "<$1></$2>"));

因為下面要用到name，而如果沒有傳入name參數，name就會被指定相關值，設值方式與上面一致

if (name === undefined) name = fragmentRE.test(html) && RegExp.$1

現在設值容器標簽名，因為table情況有所不同所以這里單獨對table做了處理，其它的容器都是div

var table = document.createElement('table');
var tableRow = document.createElement('tr');
var containers = {
    'tr': document.createElement('tbody'),
    'tbody': table,
    'thead': table,
    'tfoot': table,
    'td': tableRow,
    'th': tableRow,
    '*': document.createElement('div')
};
var container.innerHTML = '' + html //將html代碼片斷放入容器

然后依次取出容器中的dom結構，這里用到了each方法，我們上面已經說明了
這個方法反正就是將dom中的所有children刪除了，然后返回

var table = document.createElement('table');
var tableRow = document.createElement('tr');
var containers = {
    'tr': document.createElement('tbody'),
    'tbody': table,
    'thead': table,
    'tfoot': table,
    'td': tableRow,
    'th': tableRow,
    '*': document.createElement('div')
};

function likeArray(obj) {
    return typeof obj.length == 'number'
}
var $ = {};
var slice = [].slice;
//slice() 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。
//var str = "Hello happy world!"
//document.write(str.slice(6, 11)); //happy

$.each = function (elements, callback) {
    var i, key
    if (likeArray(elements)) {
        for (i = 0; i < elements.length; i++) {
            if (callback.call(elements[i], i, elements[i]) === false)
                return elements;
        }
    } else {
        for (key in elements) {
            if (callback.call(elements[key], key, elements[key]) === false)
                return elements;
        }
    }
    return elements
}
var name = '*', html = '<div><span></spam></div>';
var container = containers[name];
container.innerHTML = html;

var dom = $.each(slice.call(container.childNodes), function () {
    container.removeChild(this);
})
console.log(container);
console.log(dom);

這里只清空container，我們的dom還是在的，並真資格的編程了dom數組了

這里dom其實基本搞完了，完了可以對屬性進行設置，其中就用到了zepto屬性設置的方法了，我們這里暫時不管他

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數組，所以我們就可以使用zepto.Z將之封裝了

這個完了，我們來看看我們的zepto.qsa

zepto.qsa

這個方法用作選擇器，這個直接調用的html5 javascript選擇元素的方法

zepto.qsa = function (element, selector) {
    var found
    //當element為document,且selector為ID選擇器時
    return (isDocument(element) && idSelectorRE.test(selector)) ?
    //直接返回document.getElementById,RegExp.$1為ID的值,當沒有找節點時返回[]
    ((found = element.getElementById(RegExp.$1)) ? [found] : []) :
    //當element不為元素節點或者document時，返回[]
    (element.nodeType !== 1 && element.nodeType !== 9) ? [] :
    //否則將獲取到的結果轉成數組並返回
    slice.call(
    //如果selector是標簽名,直接調用getElementsByClassName
    classSelectorRE.test(selector) ? element.getElementsByClassName(RegExp.$1) :
    //如果selector是標簽名,直接調用getElementsByTagName
    tagSelectorRE.test(selector) ? element.getElementsByTagName(selector) :
    //否則調用querySelectorAll
    element.querySelectorAll(selector))
}

這個方法我最后發現比較簡單，就是選擇器，我們這里就不管他了

結語

我們今天暫時到這，下次再繼續