jQuery 源码解析(一)

Talk about jQuery

---

jQuery优势

更方便处理HTML events 动画效果 AJAX
成熟的插件。 使得用户HTML页面保持代码和html内容分离。 不用再在html里面插入一堆js调用命令，只需定义id。
兼容CSS3 兼容各种浏览器，这是jQuery为我们做的事情。

兼容性：

IE 6+ FF 1.5+ Safari 2.0+ Opera 9.0+ CSS3
但是从jQuery 2.0 及后续版本开始不再支持 IE 6/78浏览器！但从源码来看，IE8还是支持的。

自己实现

jQuery替我们做了很多事情，但是如果要自己实现一个定制的动画呢？
考虑的问题： 浏览器兼容 、 属性的获取、 逻辑流程、 性能 这是前端开发的基础核心

---

jQuery源码结构

---

初步解释

13个模块， 通过AMD模块划分。 最初只有CSS选择器，事件处理 和AJAX交互

jQuery.fn=jQuery.prototype={};
//core 核心方法
//回调系统 callback.js
异步队列
数据缓存
队列操作
选择器引擎 sizzle
属性操作 attrbute
节点遍历 traversing.js
文档处理 DOM
样式操作
属性操作
事件体系
AJAX
动画引擎
jQuery抽出了所有可复用的特性，分离出单一模块，通过组合方法~

五大块：
选择器， DOM操作， 事件，AJAX 动画
抽出共同的特性使之模块化，S.O.L.I.D 五大原则： 单一职责SRP
遵循单一职责的好处是我们很容易来维护这个对象。 我们需要解耦

---

jQuery 接口设计原理

业务逻辑是复杂多变的，JQ的高层API数量很多，这对开发者操作很友好，不需要在一个接口重载太多动作。 但是深入内部发现，其实Ajax的高层方法都是统一调用了一个静态的jQuery.ajax方法！

例如以下这个方法的核心就是jQuery的核心迭代器方法:

jQuery.each( [ "get", "post" ], function( i, method ) {
    jQuery[ method ] = function( url, data, callback, type ) {
        // Shift arguments if data argument was omitted
        if ( jQuery.isFunction( data ) ) {
            type = type || callback;
            callback = data;
            data = undefined;
        }
        // The url can be an options object (which then must have .url)
        return jQuery.ajax( jQuery.extend( {
            url: url,
            type: method,
            dataType: type,
            data: data,
            success: callback
        }, jQuery.isPlainObject( url ) && url ) );
    };
} );

---

立即执行表达式

jQuery本身其实也是包含在一个IIFE（立即执行表达式）里面，其实也是我们常说的闭包，对外是不可见，只暴露了jQuery这个名称。
任何库和框架设计， 第一个要点 就是解决： 命名空间和变量污染问题！
jQuery采用立即执行表达式包裹自身！
例如： 把一个函数作为参数传递到另一个函数并且执行！

//写法1
(function(){
    ..
})(this,function(){..})
//写法2:
var factory=function(){
    return function(){ 
        ...//执行方法
    }
}
//写法3
(function(window, undefined) {
    var jQuery = function() {}
    // ...
    window.jQuery = window.$ = jQuery;
})(window);

自动初始化这个函数，让其只构建一次：
A. window和undefined 传入，是为了减少变量查找所经过的scope作用域！
当window通过传递给闭包内部后，闭包内部使用它就可以当做一个局部变量来使用，比原先更快！
B undefined类似的道理， 这里这个undefined只是一个普通变量名，而不是基本数据类型undefined
JavaScript中的undefined并不是作为关键字，因此可以允许用户对其赋值！
如果函数调用不传递，参数默认就是undefined！

;(function(window,undefined) {
    //undefined
})(window)

;这个分号是保护，防止使用这个库的时候，前面的代码少写了分号导致了错误。

---

创建这个外层包裹的原因
匿名函数： 没有函数名的函数，不存在外部引用！
jQuery使用() 将匿名函数括起来，这个小括号返回的是一个匿名函数的function对象。
匿名函数表达式：
(function(){
//模块代码！
})();

---

js的语法分析器规则是： 当“()”作为一个运算符时，里面填的都能解释为表达式
function之前的左圆括号是必须的，如果不写，js解释器就会将关键字function解释为函数声明语句。 写了才会解释为函数定义表达式！

匿名函数有效保证在页面上写入js，而不会造成全局变量的污染，通过小括号，让其加载的时候立即初始化，这样就形成了一个单例模式的效果！只会执行一次！
当然还有一些判断逻辑，是什么模块加载规范 AMD or Common JS