jQuery 之與 Zepto 的差別

jQuery 的意義是在於抹平 DOM、BOM、CSSOM 的多瀏覽器差別，並統一提供接口。它不能看成 Framework（框架）被使用，而是扮演 Utility（工具）的角色。

雖然 Zepto 和 jQuery 的中的不少 API 的用法是類似的，但仍有一些 API 在用法上差別很大。下面就實際使用中遇到的場景作一下列舉。

建立 DOM 節點並賦予屬性

使用 $ 操做符能夠輕鬆建立節點並賦予屬性，具體代碼是 $(htmlString, attributes) ，支持鏈式寫法。喜歡刨根問底的同窗能夠看看下面的文檔。

• jQuery文檔

• Zepto文檔

DOM 操做的區別

jQuery 操做 ul 元素時，添加 id 不會生效。

// For example
// Add ul element to the body by jQuery
(function($) {
     $(function() {
        var $list = $('<ul><li>jQuery 插入</li></ul>', {
            id: 'insert-by-jquery'
        });
        $list.appendTo($('body'));
    });
})(window.jQuery);

// Result
// <ul><li>jQuery 插入</li></ul>

Zepto 操做 ul 元素時，添加 id 會生效。

// For example
// Add ul element to the body by Zepto
Zepto(function($) {  
    var $list = $('<ul><li>Zepto 插入</li></ul>', {
        id: 'insert-by-zepto'
    });
    $list.appendTo($('body'));
});

// Result
// <ul id="insert-by-zepto"><li>Zepto 插入</li></ul>

事件觸發的區別

(function($) {
    $(function() {    
        $script = $('<script />', {
            src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
            id: 'ui-jquery'
        });

        $script.appendTo($('body'));

        $script.on('load', function() {
            console.log('jQ script loaded');
        });
    });
})(window.jQuery);

使用 jQuery 時 load 事件的處理函數不會執行。

Zepto(function($) {  
    $script = $('<script />', {
        src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
        id: 'ui-zepto'
    });

    $script.appendTo($('body'));

    $script.on('load', function() {
        console.log('zepto script loaded');
    });
});

使用 Zepto 時 load 事件的處理函數會執行。

事件委託的區別

var $doc = $(document);

// Class 'a' bind event 'a'
$doc.on('click', '.a', function () {
    alert('a事件');
    // Class 'a' change to class 'b'
    $(this).removeClass('a').addClass('b');
});

// Class 'b' bind event 'b'
$doc.on('click', '.b', function () {
    alert('b事件');
});

在 Zepto 中，當 a 被點擊後，依次彈出了內容爲」a事件「和」b事件「的彈出框。說明雖然事件委託在.a上但是卻也觸發了.b上的委託。可是在 jQuery 中只會觸發 .a 上面的委託。

原理分析

// Zepto source code
$.fn.on = function(event, selector, data, callback, one) {
    var autoRemove, delegator, $this = this
    if (event && !isString(event)) {
        // Core code
        $.each(event, function (type, fn) {
            $this.on(type, selector, data, fn, one)
        }) return $this
    }
    //...
}

在 Zepto 中代碼解析的時候，document上全部的click委託事件都依次放入到一個隊列中，點擊的時候先看當前元素是否是.a，符合則執行，而後查看是否是.b，符合則執行。

這樣的話，就致使若是.a的事件在前面，會先執行.a事件，而後class更改爲b，Zepto再查看當前元素是否是.b，以此類推。

在 jQuery 中代碼解析的時候，document上委託了2個click事件，點擊後經過選擇符進行匹配，執行相應元素的委託事件。

這樣就很好的避免了在 Zepto 中的發生的狀況。

API 方面的區別

width() 和 height() 的區別

• Zepto 由盒模型(box-sizing)決定；

• jQuery 會忽略盒模型，始終返回內容區域的寬/高(不包含padding、border)。

jQuery官方的說明：

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box . To avoid this penalty, use .css("width") rather than .width() .

解決方式就是使用 .css('width') 而不是 .width() 。下面咱們舉個叫作《邊框三角形寬高的獲取》的栗子來講明這個問題。

首先用下面的 HTML 和 CSS 畫了一個小三角形吧。

// html
<div class="caret"></div>

// css
.caret {
    width: 0;
    height: 0;
    border-width: 0 20px 20px;
    border-color: transparent transparent blue; 
    border-style: none dotted solid;
}

• jQuery 使用 .width() 和 .css('width') 都返回 ，高度也同樣；

• Zepto 使用 .width() 返回 ，使用 .css('width') 返回 0px 。
  因此，這種場景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。

offset() 的區別

// offset() {function}

// @desc Zepto
// @return top|left|width|height

// @desc jQuery
// @return width|height

獲取隱藏元素width和height的區別

Zepto 沒法獲取隱藏元素寬高，jQuery 能夠。

extend() 的區別

jQuery 在原型上拓展方法使用的方式是：

// For example
// Extend a function named 'sayHello' to the protorype of jQuery
(function($) {
    $.fn.extend({
        sayHello: function() {
            $(this).html('Hello !');
        }
    });
})(window.jQuery);

Zepto 中並無爲原型定義extend方法，因此若是要是要在 Zepto 的原型上拓展方法可使用的方式是：

// For example
// Extend a function named 'sayHello' to the protorype of Zepto
Zepto(function($) {
    sayHello: function() {
        $(this).html('Hello !');
    }
});

碎碎念

隨着 jQuery 2.x 的發佈以及將來 3.0 對瀏覽器支持的劃分，彷佛找不到再使用 Zepto 的理由了。若是你真在意文件大小，那你能夠自行打包 jQuery 中須要的模塊。這和 Zepto 是同樣的，Zepto 官方提供的版本只打包了很基礎的模塊。

參考資料

• Zepto 事件委託的小坑