js►JQuery

JQuery部分源码解读

jQuery框架封装

沙箱模式

沙箱其实就是一个独立的环境，这个环境中任何的改变，都不会对外部环境产生影响。

函数自调用一样，在自调用函数内部的变量是不会影响到外部的，因此函数自调用模式也叫沙箱模式。

1
2
3
(function(window){
    
})(window);

jq的基本架构

1
2
3
4
5
6
7
8
(function(window){
    var jQuery = function(){
        
    }
    
    // 把jQuery函数暴露到全局中
    window.jQuery = window.$ = jQuery;
})(window);

jq的选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(window){
    var jQuery = function(selector){
        // 根据选择器来获取元素
        var ele = document.querySelectorAll(selector);
        
        // 把获取到的元素遍历添加到jq实例对象上
        for(var i = 0; i < ele.length; i++){
            this[i] = ele[i];
        }
        // 手动维护length属性为获取元素的个数
        this.length = ele.length;
    }
    
    window.jQuery = window.$ = jQuery;
})(window);

原型添加方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function(window){
    var jQuery = function(selector){
        // ...
    }
    
    // 原型替换，给jq原型中添加成员
    jQuery.prototype = {
        constructor: jQuery,
        css: function(){
            // css 操作样式功能...
        },
        html: function(){
            // html 操作文本内容功能...
        },
        //...
    };
    
    window.jQuery = window.$ = jQuery;
})(window);

省去new的操作

使用工厂函数来省去new可以得到实例对象，方便得到实例对象，不用自己手动new

改变构造函数init的原型

得到的实例对象访问不到jq原型中的成员，改变init构造函数的原型，使其init的实例对象可以访问的到jq原型中的成员。