jQuery，zepto源碼的簡單實現記錄

本文記錄jQuery，Zepto對js的一些封裝庫的知識，我但願從本文開始去深刻學習js這門語言，以及在面向對象，原型上封裝的使用。讓本身在js方面有可以有必定進步。共勉

jQuery庫

簡單的jQuery庫的實現

須要先了解閉包，當即執行函數以及JavaScript原型的概念

(function(window) {
    var jQuery = function(selector) {
        // 一個對象工廠，之後生成新對象就不用new了，直接執行這個方法便可
        // 第一步就用new 關鍵字來實例化一個構造函數
        return new jQuery.fn.init(selector);
    }
    // 定義構造函數
    var init = jQuery.fn.init = function(selector) {
        var slice = Array.prototype.slice;
        var dom = slice.call(document.querySelectorAll('*'));
        var i, len = dom.length;
        for(i = 0; i < len; i++) {
            this[i] = dom[i];
        }
        this.length = len;
        this.selector = selector || '';
    }
    
    jQuery.fn = jQuery.prototype = {
        // 改變構造器的指向
        constructor: jQuery,
        css: function(key, val) {
        
        },
        html: function(val) {
            
        }
    }
    
    // 鏈接初始化實例的原型
    // init.prototype = jQuery.fn;
    jQuery.fn.init.prototype = jQuery.fn;
})(window);

Zepto庫

簡單的zepto庫的實現

(function(window) {
    var zepto = {};

    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) {
        var slice = Array.prototype.slice;
        var dom = slice.call(document.querySelectorAll('*'));

        return zepto.Z(dom, selector);
    }

    var $ = function(selector) {
        return zepto.init(selector);
    }


    $.fn = {
        // 修改構造器的指向
        constructor: zepto.Z,
        css: function(key, value) {
          alert('css');
        },
        html: function(value) {
          alert('html')
        }
    }

    Z.prototype = $.fn;

    window.$ = $;
})(window);

附上待學習鏈接：

[幾個JS代碼手寫專題](https://www.imooc.com/article/23902)