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这些自带的检测方法不靠谱.这类方法在框架实现来讲很重要，但说实话本身没怎么仔细看，由于要考虑各个游览器的兼容，感受都是带有很技巧方面的知识，暂且翻过。