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

附上待学习连接:

[几个JS代码手写专题](https://www.imooc.com/article/23902)


你可能感兴趣的:(jquery,javascript,zepto)