偶的《javascript框架设计》终于出版

历时两年多，我的书终于付梓出版了。应各方面的要求，写软文一篇，隆重介绍一下此书对各位程序员的钱途有什么帮助及阅读顺序等疑问。作为国内第一本讲述前端框架构的书，它里面充斥着许多大家前所未闻的知识，这些知识有50%只见于github的issue，讲述各种隐秘的浏览器兼容性问题及各种神奇的修复方案，或者是某些危险但美丽的黑魔法，另外50%我深夜梦游般在外国某些大牛（不局限于英语，有日语，俄语，韩语等，不同的语言的人，受制了他们的语法结构，他们的思考回路是与我们不同的，给出的答案有时真的是拍案叫绝）的博客或网站瞥见的神奇东东。在我通过编写dom Framework, mass Framework这两大框架（dom Framework是老式的金字塔式的基于类的大框架， mass Framework是拥有AMD加载器的开放式框架，再后来的avalon，是鬼怪式的分层构架的MVVM框架，黑魔法满满的），建立完整的知识树后，开始*如征服六国后的秦王，热衷于收集各种奇珍异宝于我的博客——你们看的部分，只是我未公开的十分之一而已，本书将额外开恩公布另外的十分之二。

其实这世界很奇妙的，当你水平上去后，就算你不想继续，这世界也推动着你前进。就像jQuery1.3通过Sizzle大获成功后，成为世界的明星，就算John Resig想撒手，但这么多pull request，它也只能从更好变成更加好！三年前，当我写了三百多篇的博文，出版社已经找上门来了。在那半年内，总共有三四家来找我，让我看到前端的希望。于是我的重心由ruby慢慢转向javascript。待到我加入盛大创新院后，我已经确保我能hold住《javascript框架设计》这个大题目，于是签约写书。不过，在最初我提交给出版社的目录里，我有着更为恢宏的目标，包含拖放组件，路由系统，及各式UI组件，但最后由于篇幅的问题，只好说声抱歉了。

野望总是被现实所掣肘，亚历山大想证明世界，可他的HP也是这么短，经不起长途跋涉。实体书与博客是不同的，它必须要形成一个体系，文体也有要求，不能太口语化，什么喜乐哀痛必须收起来，板着脸正正经经地对大家宣讲。错别字也要收殓一下，虽然我找了许多高手审稿了。可惜个个都开写轮眼，自动过滤掉错别字，最终还是让出版社的张涛大大帮忙处理了大部分错别字与病句，太专业的东西他也无能为力，但愿不影响阅读。幸好各位大神贡献了不少冷癖有用的知识点，让本书充实了不少，因此才一改再改，三番四次，导致两年多才交稿。在盛大创建院时，不断有人（同事或群友）问我的书什么时候出来，人家半年就搞出一本了。我今天终于不为这问题烦恼了。

在继续这篇软文时，我脑海真的是闪现许多词汇，什么大教堂与集市，造*与DRY，公司利益与个人成长……一个个来吧

大教堂与集市说的是如何构建一个软件工程，是大教堂式的专制主义还是开放式的以众包方式让大家贡献源码。前者，缓和一点地说，是英雄主义，jQuery之于John Resig， Node.JS之于Ryan Dahl，他们单人匹马开创了一个新天地。后者，最杰出的代表是Linux。但在这个互相浸透学习的世界，绝对的东西是不存在的。jQuery与Node.JS现在也是在众多的项献者的努力一下前进，原作者向新目的地进发了。在国内，你懂的，每个人都自命不凡，一开始只能是你一个踽踽独行。只有你真正成为明灯式的人物后，才有人追随。

造*与DRY这问题也新浪微博上也吵过许多次了。有个软件设计原则叫DRY，防止组员们随意克隆代码，或在不知情的情况下重复发明相似的功能模块。公司出于利益的考虑，也不愿给时间组员自己去造*，上网找一个jQuery插件了事。因此，小中公司的页面非常恐怖，允斥着大量第三方插件，而相对而言，大阿狸能用的基本自己做，这正是游击队与正规军的区别。从国内看，最重视JS的公司也恰恰是大阿狸，他们拥有国内最庞大优秀的前端团队（700多人），小公司还是一个前端对20个后端的节奏。招这么多高手干嘛呢？造*！当然，这不是一个*所代表的，这涉及一整套的工具链，目的是实现前端自动化集成布署。写框架与UI组件保是其中一个很少环节，这也是一般人能理解的东西，更多高大上的东西，大公司也不会公开出来。但你起码拥有创造UI组件这样的能力，才能让你碰更底层的工具。

公司利益与个人成长，这个更不用说。只有目光短浅的公司，才会用杂牌的组件写码。大公司早已为你准备一整好东西了。而你的任务就是成长到具有写UI组件的地步，进入架构师，为公司的未来挑战做好更多准备（工具）。HTML5对于一般人而言，好像是非常遥远的事，但大公司早已有一帮人用它做出许多好东西，为公司产品的用户体验添砖加瓦。为了积聚这实力，你必须自己暗暗发力，偷偷自己写一套东西。之前人家写过的弹出层，富文本编辑器，语法高亮插件……你一套也不能少，这样你才能接触到之前碰不到的原生API与知识点。如弹出层有关垂直居中的CSS知识点，select穿透问题，富文本编辑器用到的iframe知识点，Range与Selection对象的知识点，语法高亮则是你正则的大检验！如果写业务代码，你写十年，水平还是那样。因此有句话说——“用一年的经验混十年”

最近在微博看到一件可怕的事：

【我所了解的一个精神失常的程序员】http://t.cn/8sinEOr 不久前我们公司有个程序员精神失常。他走进经理办公室开始大喊大叫，说着一些奇怪的事情。如果我不是像了解自己一下了解他，就会以为他磕了药。但是事实上他简直就是精神失常了！

他是我在编程行业见过的最勤奋员工。他经常在下班后加班，周末的时候，当管理人员需要人手去处理紧急工作时，他总是随叫随到。在这个阶段公司并不赚钱，老板需要尽可能快的完成项目，所以任何被客户急催的软件开发都会自动分配给他。他很乐意地全心投入把工作做完正是老板喜欢的地方。

"我能力强，我效率高，我应该是公司的关键人物"，其实那是错的，不可替代性才是最重要的。如果靠“卖力”增加不可替代性，作用是微乎其微的，还是得靠“高门槛”。我认识的工程师里，越是技术好的工程师越会意识到这个问题，然后去做一些"深度"的发展，这也算是工程师的自我保护吧。说什么做IT没前途，30岁要转行，这只是无能者的藉口。

古人说——“人无远虑，必有近忧”。你平时有这么多空闲时间，为何不努力提升一下自己的水平呢。不去认真阅读一下大师们的框架，不自己写一个框架。记得当初我在博客宣传我的框架，被某个嫉妒的人骂个狗血喷头，两年过去，他消声匿迹，而我，从一个公司的核心前端变为另一个公司的核心前端，现在是去哪儿网的前端架构师。因此要相信自己！不要怕这怕那，有努力就有回报！

再回来说我的书，前端的知识点是非常庞杂的。但知识只有串起来，形成知识树才是你自己的。现在市面上的书，基本上抄来抄去，还是依照老旧的方法教人，一开始总是历史回顾，然后是各种数据类型介绍，然后是语法（条件分支，循环分支）什么的，最后再来几个“真实案例”。这对于90%半路出家的前端来说，未免太闷了。而且前端不单单是javascript， javascript只是水泥，或者说储如化学分子这东西，而我们工作是为了构建一整座大厦！只有肉眼看到的物理级别的东西才是主角。它们就是本书的重点， DOM与BOM。 javascript通过特性侦测或传参等，进入不同的分支，来解决前端臭名昭著的兼容性问题。本书介绍了大量这样的黑魔法，如何知道当前浏览器是支持这个事件呢？为何在这里要劫持this呢？怎么样让选择器引擎跑得更快。于是这一个个疑问，便化解成本书所介绍的知识点，什么AMD加载器，选择器引擎，批量生成一堆元素节点……

所有前端框架面对的问题都是一样，不同的是解决手段的高下程度。于是Prototype死了，jQuery火了。 angular爆发了， jQuery沉寂了！本书的章节就是按照编写一个多文件框架的顺序来写。最开始肯定是种子模块，定义框架的名字与版本号，与一些最核心的方法，还有加载器。然后通过加载器，添加一些常用的工具模块，对javascript语言进行扩张与修复。之后是数据缓存什么的，再之后是主菜，各种DOM问题，节点啊，样式啊，事件啊，动画啊……最后是MVVM，当前最强大的前端解决方案。通过引入双向绑定与分层架构，完全脱离DOM进行前端开发。

你或者有过激情，你或者有过梦想，但当你的KPI考核点是PM那些荒唐的改来改去的功能点，多炽热的火焰也会被浇灭。因此你必须要搞出一点东西出来，努力爬上去。是废命于加班，天天写业务，还是专注于底层框架的研发，为某个难题而苦恼，完全在于你一念之差。“是金子总会发光的”，或“是石头到哪都不会发光的”，也完全在于你一念之差。本书将为你提供了一个可能性及一大堆技能点，打开了一个美丽的新世界，提供了一个X年不遇的机会，准备了一个迅速上升的渠道。

可能有些人会嫌它贵，也有些人怕自己看不明白这么“高大上”的东西。我说一个故事吧。

一个特别喜爱昆虫的人做了这样一个实验：他将跳蚤放进敞口的瓶子里，它立刻便跳了出来。当把瓶子盖上时，跳蚤还是会竭力跳出瓶子，它不停地撞击着瓶盖的内侧。一个多小时后，他还在那样跳着。差不多三个小时后，它依然在跳，只是它不再撞着瓶盖了，此时它跳的高度离瓶盖大约1厘米左右，而且每一次都是如此。这时，瓶盖被拿掉了，但是跳蚤并没有跳出瓶口，它依然保持着有瓶盖时的高度，再也跳不出瓶口。

同理，如果你，总嫌这个贵那个贵，你又不努力改变现状，过了一段时间，你就会习惯了，就会安于贫困了。就像瓶子的跳蚤那样安于天命，永远困死在瓶子里。

怕自己理解不了这东西，这虽然是一个理智的考量，但只要是人就会遇到瓶颈，但问题是如何突破瓶颈。瓶盖又不是总是盖上的，有机遇你得抓住！

我也曾毕业找不到工作，潦倒到当了一年保安。但我相信“是金子总会发光的”，我终会一鸣惊人，我现在只是一只受伤的野狼，我不会被命运所屈服驯化。因此跟我咆哮吧——

无名的生命之花 已惨遭摧残践踏

一度坠地的飞鸟 正焦急以待风起

一味埋头祈祷 却不会有任何改变

若想有所改变 就请起而奋战吧

踏过尸体前行的我们

嘲笑这进击意志的猪猡啊

家畜般的安宁 那虚伪的繁荣

请赐予誓死之饿狼以*！

……

               ——进击的巨人OP《红莲の弓矢》

下面是书的目录：

序章

第1节 框架与库

第2节 javascript年代划分

第3节 javascript框架分类

第4节 javascript框架的主要功能

第1章 种子模块

第1节 命名空间

第2节 对象扩展

第3节 数组化

第4节 类型的判定

第5节 domReady

第6节 无冲突处理

第2章 模块加载系统

第1节 AMD规范

第2节 加载器所在路径的探知

第3节 require方法

第4节 define方法

第3章 语言模块

第1节 字符串的扩展与修复

第2节 数组的扩展与修复

第3节 数值的扩展与修复

第4节 函数的扩展与修复

第5节 日期的扩展与修复

第4章 浏览器嗅探与特征侦测

第1节 判定浏览器

第2节 事件的支持侦测

第3节 样式的支持侦测

第4节 jQuery一些常用特征的含义

第5章 类工厂

第1节 javascript对类的支撑

第2节  各种类工厂的实现

第2.1节 P.js

第2.2节 JS.Class

第2.3节 simple-inheritance

第2.4节 def.js

第3节 es5属性描述符对OO库的冲击

第6章 选择器引擎

第1节 浏览器内置的寻找元素的方法

第2节 getElementsBySelector

第3节 选择器引擎涉及的知识点

第4节 选择器引擎涉及的通用函数

第4.1节 isXML

第4.2节 contains

第4.3节 节点排序与去重

第4.4节 切割器

第4.5节 属性选择器对于空白字符的匹配策略

第4.6节 子元素过滤伪类的分解与匹配

第5节  Sizzle引擎

第7章 节点模块

第1节 节点的创建

第2节 节点的插入

第3节 节点的复制

第4节 节点的移除

第5节 innerHTML, innerText与outerHTML的处理

第6节 一些奇葩的元素节点

第6.1节 iframe

第6.2节 object

第6.3节 video

第8章 数据缓存系统

第1节 jQuery的第1代缓存系统

第2节 jQuery的第2代缓存系统

第3节 mass Framework的第1代数据缓存系统

第4节 mass Framework的第2代数据缓存系统

第5节 mass Framework的第3代数据缓存系统

第9章 样式模块

第1节 主体结构

第2节 样式名的修正

第3节   个别样式的特殊处理

第3.1节 透明度

第3.2节 user-select

第3.3节 backgroundPosition

第3.4节 z-index

第3.5节 盒子模型

第3.6节 元素的尺寸

第3.7节 元素的显示隐藏

第3.8节 元素的坐标

第4节   元素的滚动条的坐标

第10章 属性模块

第1节 如何区分固有属性与自定义属性

第2节 如何判定浏览器是否区分固有属性与自定义属性

第3节 IE的属性系统的三次演变

第4节 className的操作

第5节 Prototype.js的属性系统

第6节 jQuery的属性系统

第7节 mass Framework的属性系统

第11章 事件系统

第1节  onXXX绑定方式的缺陷

第2节  attachEvent的缺陷

第3节  addEventListener的缺陷

第4节  Dean Edward 的addEvent.js源码分析

第5节  jquery1.8.2的事件模块概览

第6节  jQuery.event.add的源码解读

第7节  jQuery.event.remove的源码解读

第8节  jQuery.event.dispatch的源码解读

第9节  jQuery.event.trigger的源码解读

第10节 jQuery对事件对象的修复

第11节 滚轮事件的修复

第12节 mouseenter与mouseleave事件的修复

第13节 focusin与focusout事件的修复

第14节 旧式IE下submit的事件代理的实现

第15节 oninput事件的兼容性处理

第12章 异步处理

第1节 setTimeout与setInterval

第2节 Mochikit Deferred

第3节 JSDeferred

第4节 jQuery Deferred

第5节 javascript异步处理的前景

第13章 数据交互模块

第1节 AJAX概览

第2节 优雅地取得XMLHttpRequest 对象

第3节 XMLHttpRequest 对象的事件绑定与状态维护

第4节 发送请求与数据

第5节 接收数据

第6节 上传文件

第7节 一个完整的AJAX实现

第14章 动画引擎

第1节 动画的原理

第2节 缓动公式

第3节 API的设计

第4节 mass Framework基于JS的动画引擎

第5节 requestAnimationFrame

第6节 CSS3 transition

第7节 CSS3 animation

第8节 mass Framework基于CSS 的动画引擎

第15章  插件化

第1节 jQuery的插件的一般写法

第2节 jQuery ui对内部类的操作

第3节 jQuery easyui的智能加载与个别化制定

第4节 更直接地操作UI实例

第16 章 MVVM

第1节　当前主流MVVM框架介绍

第2节  属性变化的监听

第3节  ViewModel

第4节  绑定

第5节  监控数组与子模板

结语