jQuery 和 zepto中原型的实际应用

最新推荐文章于 2021-04-29 08:42:10 发布

Creabine

最新推荐文章于 2021-04-29 08:42:10 发布

阅读量200

点赞数

分类专栏：学习笔记 JavaScript/jQuery

本文链接：https://blog.csdn.net/Creabine/article/details/88850575

版权

学习笔记同时被 2 个专栏收录

87 篇文章 0 订阅

订阅专栏

JavaScript/jQuery

77 篇文章 0 订阅

订阅专栏

jquery 和 zepto 的简单使用
zepto 如何使用原型
jquery 如何使用原型

在jquery中，我们获取不同的dom元素，但他们都有相同的jquery方法(如css(),html(), hide()等)，这些方法就是在原型上的。

zepto 和 jquery 中原型的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <p>zepto/jquery test 1</p>
    <p>zepto/jquery test 2</p>
    <p>zepto/jquery test 3</p>
    <div id="div1">
        <p>zepto/jquery test in div</p>
    </div>
</body>
<script type="text/javascript" src="./my-zepto.js"></script>
<script type="text/javascript" src="./my-jquery.js"></script>

<script type="text/javascript">
    var $p = $('p');
    $p.css('color', 'red');
    alert($p.html());
    
    var $div1 = $("#div1");
    $div1.css('color', 'blue');
    alert($div1.html());
</script>
</html>

// my-zepto.js 文件，zepto原理 
(function(window) {
    var zepto = {};
    
    // Z 构造函数
    function Z(dom, selector) {
        var i, len = dom ? dom.length : 0;
        for(i = 0; i < len; i++) {
            this[i] = dom[i];
        }
        this.length = len;
        this.selector = selector || '';
    }
    
    zepto.Z = function(dom, selector) {
        return new Z(dom, selector);
    }
    
    zepto.init = function(selector) {
        // querySelectorAll 得到的是一个类数组
        // 通过 slice 方法把它变成一个数组dom方便使用
        var slice = Array.prototype.slice;
        var dom = slice.call(document.querySelectorAll(selector)); 
        return zepto.Z(dom, selector);
    }

    var $ = function (selector) {
        return zepto.init(selector);
    }
    
    window.$ = $;
    
    $.fn = {
        css: function (key, value) {
            // ...
        },
        html: function(value) {
            // ...
        }
    }
    // zepto.Z 就是Z得实例
    // Z.prototype 也就是Z的原型设置为$.fn，那么Z的所有实例就都可以使用$.fn中的方法了。
    Z.prototype = $.fn
})(window)

// my-jquery.js 文件，jquery原理 
(function(window) {
    // 这个 jQuery === $
    var jQuery = function(selector) {
        return new jQuery.fn.init(selector);
    }
    
    jQuery.fn = {
        css: function (key, value) {
            // ...
        },
        html: function(value) {
            // ...
        }
    };
    
    var init = jQuery.fn.init = function(selector) {
        // querySelectorAll 得到的是一个类数组
        // 通过 slice 方法把它变成一个数组dom方便使用
        var slice = Array.prototype.slice;
        var dom = slice.call(document.querySelectorAll(selector));
        
        var i, len = dom ? dom.length : 0;
        for(i = 0; i < len; i++) {
            this[i] = dom[i];
        }
        this.length = len;
        this.selector = selector || '';
    }
    
    init.prototype = jQuery.fn;
    
    window.$ = jQuery;
    
})(window)

原型的实际应用

描述jQuery如何使用原型
描述zepto如何使用原型
再结合自己的项目经验，说自己开发的例子

如何体现原型的扩展性

插件机制

上边看了jQuery和zepto的原型使用，注意其中的一个细节：

// my-zepto.js
Z.prototype = $.fn
// my-jquery.js
init.prototype = jQuery.fn;

// 插件机制其实就是扩展其原型对象，这样所有的实例就都有了插件的特性了
$.fn.getNodeName = function() {
    // 这里的this[0]，是因为在之前的构造函数中，遍历了获取的dom元素，并将 this[i] = dom[i]
    // 所以this[0]就是符合选择器的第一个元素 
    return this[0].nodeName;
}

在给构造函数(Z/init)的原型赋值的时候，本可以直接赋值对象，但却专门给这个对象命名了($.fn/jQuery.fn)。这样的好处是什么？

这样一来，只有$会暴露在window全局变量，防止变量污染
将插件扩展统一到$.fn.xxx这个接口，方便使用。

总结

原型的实际应用(jquery,zepto，自己工作中的)
原型扩展性(插件机制，$.fn，其实就是在原型对象上增加方法)

Creabine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 和 zepto中原型的实际应用

jquery 和 zepto 的简单使用zepto 如何使用原型jquery 如何使用原型在jquery中，我们获取不同的dom元素，但他们都有相同的jquery方法(如css(),html(), hide()等)，这些方法就是在原型上的。zepto 和 jquery 中原型的使用<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫