jQuery 和 zepto中原型的实际应用

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

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

zepto 和 jquery 中原型的使用


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
head>
<body>
    <p>zepto/jquery test 1p>
    <p>zepto/jquery test 2p>
    <p>zepto/jquery test 3p>
    <div id="div1">
        <p>zepto/jquery test in divp>
    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,其实就是在原型对象上增加方法)

你可能感兴趣的:(学习笔记)