Jquery的基本架构

引入

　　  之前学习原生JS而后切换到用JQ的时候总以为很不习惯，甚至有点排斥用JQ。后来本身写项目一直到公司实习用JQ的这段时间，才深深感觉到JQ的强大~JQ不只作到兼容不少浏览器，还能很方便地使用JS动画和各类交互，因此最突出的有点就方便！方便！方便！（重要的事情说三遍）。我找到了一个关于源码解析的很好的连接开始个人学习。

JQuery的基本架构

• 总体架构

　　  在学习JQuery以前，确定有不少人都知道JQ的核心理念，那就是"The Write Less,Do More".

        以JQuery-2.1.1为例（到如今最新版本已经出到JQuery-2.1.4）,JQ   版本结构  为:

;(function(global, factory) { 
    factory(global); 
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) { 
    var jQuery = function( selector, context ) { 
        return new jQuery.fn.init( selector, context ); 
    }; 
    jQuery.fn = jQuery.prototype = {}; 
    // 核心方法 
    // 回调系统 
    // 异步队列 
    // 数据缓存 
    // 队列操做 
    // 选择器引 
    // 属性操做 
    // 节点遍历 
    // 文档处理 
    // 样式操做 
    // 属性操做 
    // 事件体系 
    // AJAX交互 
    // 动画引擎 
    return jQuery; 
})); 

JQ库一共有多个模块，模块并非独立的，而是互相依赖的，模块依赖网 为：

 

• 自执行匿名函数

(function(window, factory) {
    factory(window)
}(this, function() {
    return function() {
       //jQuery的调用
    }
}))

  JQ源码里有不少这样的函数，这种函数的写法一看上去就让人看晕了，来，咱们换种写法

(function(window, undefined) {
    var jQuery = function() {}
    // ...
    window.jQuery = window.$ = jQuery;
})(window);

这样是否是就清楚多了？换个样子是否是就认识了？这就是咱们熟悉的自执行匿名函数啊~在自执行匿名函数剖析这篇文章里我提到过不少自执行匿名函数的写法，但达到的效果是同样的，让咱们再来复习一下使用自执行匿名函数的好处和这里参数window和undefined的做用

好处

　　使用匿名函数能够防止全局变量的污染，小括号能够实现当即初始化，这样就能够造成单例模式的效果只执行一次。（这样还学到了单例模式的一个实例喔，设计模式无处不在~）

参数做用

　　1.window

　　做用：为了防止须要window时屡次在做用域链上去查找window，这样将window传入函数内能够很快就找到window

　　2.undefined

　　做用：在一些浏览器中undefined能够被改写，由于它不是关键字

　　var undefined = '我不是undefined'
　　;(function(window) {
　　  alert(undefined);// IE8或IE7 ---> '我不是undefined'
　　})(window)

 

• 类数组对象结构

　　提到JavaScript中的类数组对象，就让我想起了像arguments、document.getElementsByTagName等。

什么是类数组呢？

　　1.类数组具备length属性

　　2.类数组不具备数组的方法（如.push，.join等）

　　因此，类数组不是数组，若是要使用数组的方法，要把类数组转化为数组

     function abc(a,b,c){
         var arr = Array.prototype.slice.call(arguments);
         return arr;
     }

     var arr = abc(1,2,3);
     arr.push(0);
     arr.splice(1,2);
     alert(arr); //1,0

 

　　

　　回到JQ里的类数组对象，JQ里的类数组对象既能够像对象同样处理，也能够像数组同样使用数组的方法。

JQ里的类数组对象

Query的入口都是统一的$, 经过传递参数的不一样，实现了9种方法的重载：

1. jQuery([selector,[context]])
2. jQuery(element)
3. jQuery(elementArray)
4. jQuery(object)
5. jQuery(jQuery object)
6. jQuery(html,[ownerDocument])
7. jQuery(html,[attributes])
8. jQuery()
9. jQuery(callback)

  JQ对象经过对象键值对的关系保存着属性，原型保存着方法

  ------------------------------------------------------------------

* JQ对象若是想要转换成DOM对象，能够加下标或者用.get()
eg. $('#div')[0]
    $('#div').get(0)

 

 

　　　对JQ的基本架构了解了才会让咱们更好地去读JQ代码~但愿我能逐步提升本身的JS水平写出有水准的js代码~接下来我还会继续学习JQ源码~

 

参考资料：  

　　　　http://www.html-js.com/article/1619  类数组对象