JavaScript框架学习笔记（一）

JavaScript框架学习笔记（一）

我为什么要学习框架

• 更深入的理解工具，以后用起来更顺手而且也能做一定的工具取舍，学习理解新工具也就更快，

• 对提升js水平也很有帮助，框架有很多解决“坑”的经典思路，学习这些对提升开发能力很有帮助。

• 基本的学习思路是跟着《JavaScript框架设计》这本书，甚至可以说是这本书的读书笔记。也参考很多网上解读jquery的博客和学习资料。当然，最重要的资料还是框架的源代码。

• 基本学习的框架就是jQuery，也会看看其他库的实现

• 我不是大神，很多知识估计也没有理解正确，欢迎指出，仅供参考。

1 种子模块

1.1 解决命名空间问题

早期的一些prototype.js库并没有命名空间，它的意义是渗透到JavaScript，DOM中去，希望对原生对象的原型进行扩展。后来由于开发者反对，新兴的框架都在命名空间上构建。
一般的写法都是使用IIFE解决,一般如下两种写法：

(function foo(){...})()
(function(){}(..))

两种写法功能上是一致的.
IIFE可以把他们当函数调用比传递参数。

(function IIFE(global){
    //code
})(window)

一般都是将window传递进去，但现在很多js的非游览器应用领域没有window，所以jquery一些处理办法是又接受一个factory参数：

For CommonJS and CommonJS-like environments where a proper window
is present, execute the factory and get jQuery.
For environments that do not have a window with a document(such as Node.js), expose a factory as module.exports.
This accentuates the need for the creation of a real window.e.g. var jQuery = require("jquery")(window);

很多前端框架都想要$这个命名空间，jQuery一开始很弱小，但又想要跟多人使用，因此实现了一种多库并存的机制。后成为很多小库的标配，实现很简单：

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
};

其实就是先把可能存在同名变量保存起来，再放回去。当用户执行

jQuery.noConflict();

就将$的控制权交出去，以后执行$()的时候就是其他库了，如果将deep变量传入true，则将jQuery的控制权也交出去了。

 1.2 对象扩展

很多库在扩展方法里还需判断是否覆盖和合并问题，但基本实现对库的扩展比较简单，就是添加一个对象罢了。

function extend(destination,source){
    for(var destination in source){
        destination[property] = source[property];
    }
    return destination;
}

1.3 数组化

这个解决的问题是讲很多像document.getElementByTagName()方法返回的HTMLCollection或者NodeList这样的类数组转化为数组。
为什么做这样转化，因为数组有很多便利的操作。
各个库的实现原理核心也就是调用Array.prototype.slice.call(arguments);这个方法。

1.4 类型的判定

js的经典问题：isXXX系列。主要是js的typeof这些自带的检测方法不靠谱.这类方法在框架实现来说很重要，但说实话自己没怎么仔细看，因为要考虑各个游览器的兼容，感觉都是带有很技巧方面的知识，暂且翻过。