JavaScript框架设计（第2版） - (EPUB全文下载)

文件大小：0.38 mb。
文件格式：epub 格式。
书籍内容：

JavaScript框架设计（第2版）
第1章 种子模块
第2章 语言模块
第3章 浏览器嗅探与特征侦测
第4章 类工厂
第5章 选择器引擎
第6章 节点模块
第7章 数据缓存模块
第8章 样式模块
第9章 属性模块
第10章 PC端的事件系统
第11章 移动端的事件系统
第12章 异步模型
第13章 数据交互模块
第14章 动画引擎
第15章MVVM
第16章 组件
彩蛋
欢迎来到异步社区！
第1章　种子模块
1.1　 模块化
最近几年，JavaScript得到飞速发展，一些框架越来越大，已经不像过去那样全部写进一个JS文件中。但拆到多个JS文件时，就要决定哪个是入口文件，哪个是次要文件，而这些次要文件也不可能按1、2、3、4的顺序组织起来，可能1依赖于2、3，3依赖于4、5，每个文件的顶部都像其他语言那样声明其依赖，最后在结束时说明如何暴露出那些变量或方法给外部使用。
就算你的框架只有几千行，在开发时将它们按功能拆分为10多个文件，维护起来也非常方便。加之Node.js的盛行，ES2016许多语法不断被浏览器支持，我们更应该拥抱模块化。
本书所介绍的所有模块，都以Node.js提倡的CommonJS方式组织起来。
时下流行3种定义模块的规范：AMD[1]、CommonJS[2]与ES6 module。它们都被webpack所支持。以AMD定义JS模块通过RequireJS能直接运行于浏览器；CommonJS则需要browserfy等Node.js打包后才能运行于浏览器；ES6 module在我写书时，还没有浏览器支持，需要webpack、rollup等Node.js工具打包才能运行于浏览器。
下面简略演示一下这3种模块的定义方式。
//AMD
define(['./aaa', './bbb'], function(a, b){
return {
c: a + b
}
})

// CommonJS
var a = require('./aaa')
var b = require('./bbb')
module.exports = {
c: a + b
}

//es6 module
import a form './aaa'
import b form './bbb'
var c = a + b
export {c}
有关这3种模块的用法，后面的章节会详述，这里暂时略过。
本人是比较倾向使用CommonJS的，因为其相关的打包工具非常成熟，并且以这种方式编写的框架，可以与大量Node.js编写的测试框架无缝配合使用。
再说回来，刚才提到的入口文件。整个程序就是引入其他子模块，然后导出代表命名空间的JavaScript对象就行了。
var avalon = require('./seed/index')

require('./filters/index')
require('./vdom/index')
require('./dom/index')
require('./directives/index')
require('./strategy/index')
require('./component/index')
require('./vmodel/index')

module.exports = avalon
我们编写一个框架时，可能拆成上百个JS文件。为了方便寻找，这时需要按照功能或层次放进不同的子文件夹。然后每个子文件都有它的入口文件（index.js），由它来组织其依赖。本章的种子模块，就放到seed这个文件夹下了。
1.2　功能介绍
种子模块也叫核心模块，是框架的最先执行的部分。即便像jQuery那样的单文件函数库，它的内部也分许多模块，必然有一些模块冲在前面立即执行；有一些模块只有用到才执行；也有一些模块（补丁模块）可有可无，存在感比较弱，只在特定浏览器下才运行。
既然是最先执行的模块，那么就要求其里面的方法是历经考验、千锤百炼的，并且能将这个模块变得极具扩展性、高可用、稳定性。
（1）扩展性，是指方便将其他模块的方法或属性加入进来，让种子迅速成长为“一棵大树”。
（2）高可用，是指这里的方法是极其常用的，其他模块不用重复定义它们。
（3）稳定性，是指不能轻易在以后版本中删除，要信守承诺。
参照许多框架与库的实现，笔者认为种子模块应该包含如下功能：对象扩展、数组化、类型判定、无冲突处理、domReady。本章讲解的内容以avalon种子模块为范本，可以在下面的地址中阅览。
https://github.com/RubyLouvre/avalon/tree/master/src/seed
1.3　对象扩展
我们需要一种机制，将新功能添加到我们的命名空间上。命名空间，是指我们这个框架在全局作用域暴露的唯一变量，它多是一个对象或一个函数。命名空间通常也就是框架名字。我们可以看一下别人是如何为框架起名字的。
https://www.zhihu.com/question/46804815
回到主题，对象扩展这种机制，我们一般做成一个方法，叫做extend或mixin。JavaScript对象在属性描述符[3]（Property Descriptor）没有诞生之前，是可以随意添加、更改、删除其成员的，因此扩展一个对象非常便捷。一个简单的扩展方法实现如下。
//Prototype.js
function extend(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
不过，旧版本IE在这里有个问题，它认为像Object的原型方法就是不应该被遍历出来，因此for in循环是无法遍历名为val ............

以上为书籍内容预览，如需阅读全文内容请下载EPUB源文件，祝您阅读愉快。