jQuery教程 jQuery 与 Zepto 有何差异
沉沙 2018-06-07 来源 : 阅读 264 评论 0

摘要:jQuery 的意义是在于抹平 DOM、BOM、CSSOM 的多浏览器差异,并统一提供接口。它不能当作 Framework(框架)被使用,而是扮演 Utility(工具)的角色。虽然 Zepto 和 jQuery 的中的很多 API 的用法是相似的,但仍有一些 API 在用法上差异很大。

jQuery 的意义是在于抹平 DOM、BOM、CSSOM 的多浏览器差异,并统一提供接口。它不能当作 Framework(框架)被使用,而是扮演 Utility(工具)的角色。

虽然 Zepto 和 jQuery 的中的很多 API 的用法是相似的,但仍有一些 API 在用法上差异很大。下面就实际使用中遇到的场景做一下列举。

创建 DOM 节点并赋予属性

使用 $ 操作符可以轻松创建节点并赋予属性,具体代码是 $(htmlString, attributes) ,支持链式写法。


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 !');
    }
});


本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计