articlesjavascript-prototype.png
[ 第一次写简书，有兴趣可以看看我的博客 http://www.txliang.com/ ]

---

最近买了本新书 - 《Javascript框架设计第二版》，本人一直对这本书寄予厚望，希望能从这本书中学到一些和框架设计相关的知识点，有朝一日也能造出自己使用的框架。本书总共分十六章，从第一章种子模块开始研读。

书中很多细节并没有记录下来，只是摘记部分。

种子模块

种子也叫核心模块，是框架最先执行的部分。由于是最先执行的模块，所以要求其具有高扩展性、高可用和稳定性。

种子模块应该包含以下功能：

1. 对象扩展
2. 数组化
3. 类型判定
4. 无冲突处理
5. DomReady

对象扩展

在框架中需要一种机制将新功能添加到我们定义的全局作用域下的唯一变量上，这种对象的扩展机制一般做成extend或者mixin方法。

在模拟Object.keys方法的时候注意到一个小小的点：

Object.keys = Object.keys || function (obj) {
    let a = []
    for (a[a.length] in obj);
    return a
}
// 不支持原生Object.keys的情况下仍然会得到：
Object.keys({a:1,b:2})  // ['a','b']

for...in每执行一次迭代，都会把属性名赋值给in前面的值(a[a.length])，所以看似没有操作，实际上却实现了功能。

对象扩展很常用，所已ES6直接支持，Object.assgin。

数组化

浏览器下存在很多类数组对象，如functionarguments、document.forms、document.getElementsByTagName等等，如果想要这些类数组对象使用数组的方法，就必须将它们数组化，而数组化的机制一般就是使用Array.prototype.slice.call(ArrayLikeObj)进行转换以及对这种方式的优化。

对于IE9以下的节点集合不是Object的子类，所以不能直接使用，需要polyfill进行支持。

类型的判定

Javascript中数组类型中包括基本数据类型和引用数据类型。基本数据类型包括ES6新增的Symbol，一共七种，一般通过typeof检测。而引用数据类型系统是基于基本数据类型为基础的，通过instanceof检测，当然这在很多情况下都是不靠谱的。

function isNaN(obj) {
    return obj !== obj
}

function isNull(obj) {
    return obj === null
}

function isUndefined(obj) {
    return obj === void 0
}

Object.prototype.toString直接输出对象内部[[Class]]，基本可以跳过95%的陷阱。

在IE6、7、8下：

window === document     // true
document === window     // false

window === window.window

DomReady

DomReady是一种DOMContentLoaded事件的别称。一般在javascript代码中会用window.onload来防止在dom树未构建完成开始对节点操作导致出错。但是对于框架来说，越早介入DOM的干涩越好。所以各大框架基本都引入了DomReady机制，并使其兼容所有浏览器。

DOM文档加载的步骤为

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
6. 页面加载完毕。//load

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        d.onreadystatechange = null
        // DomReady加载完毕，执行操作
    }
}

无冲突处理

多库共存就要解决命名空间冲突的问题。书中引用了jQuery的noConflict函数，不记录了。