javascript框架学习计划

前言：终于要作这个计划了，前端框架千千万，毫不能一头扎进去盲目开始，本片文章总结一下目前前各类端框架，以及它们的用途主要解决什么问题，而后最后作出学习计划。但愿入了前端坑的同窗们能够有所帮助。

1.库与框架

什么是库，什么是框架？
库：是针对特定问题的一个解答，具备专业针对性；不控制应用程序流程的流程；被动的被调用
框架：控制反转；决定应用程序生命周期；通常会集成大量的库

是否是框架都集成了大量的库呢？其实这么理解是不对的，框架与库最大的区别就是控制反转，框架就像程序的骨架，拥有默认的有意义的行为，知道在特定状况下该作什么样的事情，在适当的时候框架会调用你的代码，从而整个程序实现你想实现的功能。可是库与框架很难严格区分，因此统一称为解决方案。

2.前端开发中常见问题

既然库和框架都是解决方案，那么它们都是要解决前端开发中的特定问题，目前前端开发中主要有如下7个方面的问题，各类解决方案也是针对这些问题被开发出来的。

1. DOM操做 （DOM）

2. 通讯 （Communication）

3. 工具库 （Utility）

4. 模版技术 （Templating）

5. 组件 （Component）

6. 路由 （Routing）

7. 架构 （Architecture）

why？

1. 开发效率

2. 可靠性：浏览器兼容性／测试覆盖

3. 更好的配套：文档／DEMO／工具

4. 设计的更好

5. 专业性

HOw

1. 开放：基于一个外部模块系统，自由组合

2. 半开放：基于一个定制过的模块系统，内部－外部的解决方案共存

3. 大教堂：深度定制的模块系统，不多引入外部模块

3.DOM操做的解决方案

DOM主要有如下几点：Selector／Manipulation／Event／Animation
选择器／DOM操做／事件（简化事件绑定，提供事件代理之类）／动画

职责：

1. 提供便利的DOM查询／操做／移动 等操做

2. 提供事件绑定／事件代理等支持

3. 浏览器特性检测，UserAgent侦测

4. 提供节点属性、样式、类名等操做

5. 全部以上操做实现目标平台的跨浏览器支持

相关的框架：

1. JQuery

2. zepto.js

3. MOOTOOLS

JQuery：定义了两义型的接口，可读性不够
MOOTOOLS：严格遵循Commond－Query，没有两翼型接口，直接扩展了DOM原生对象：Element.propotype.inject = function(){}

三者对比：

1. MooTools：大小：96K，兼容性：IE6+；优势：概念清晰，没有包装对象；接口设计优秀；源码清晰易懂；不局限于DOM和Ajax。缺点：扩展了原生对象（致命）；社区衰弱

2. JQuery：大小：94K，兼容性：IE6+；优势：社区强大，普及率高；包装对象，不污染原生；基本上专一于DOM； 缺点：包装对象，容易混淆；接口两义性；社区水平层次不齐，容易踩坑。

3. Zepto.js:大小：25K，兼容性：IE10+；优势：小，启动快；接口与JQuery兼容；提供了简单的手势；缺点：与JQuery不能作到100%对应，支持的浏览器少，功能较弱。

建议：

1. MooTools：最好的源码阅读学习的资源，小型项目能够用

2. JQuery：最稳妥的方案

3. Zepto.js：移动端的备选品

DOM专业领域解决方案：

1. 手势：Hammer.js:大小：12k；常见手势封装，包括tap，hold，transform，swipe等等，并支持自定义扩展。

2. 局部滚动：iscroll.js：大小：13k；移动端position：fix＋overflow：scroll的救星

3. 高级动画：Velocity.js:大小：12k；复杂动画序列实现，不只限于dom

4. 视频播放：vedio.js:大小：101k，相似原生vedio标签的使用方式，对低级浏览器回退到flash播放。

4.通讯问题解决方案

职责：

1. 处理与服务器的请求与响应

2. 预处理请求数据／响应数据Error／Success的判断封装

3. 多种类型请求，统一接口（xmlHttpRequest1/2，JSONP，Iframe）

4. 处理浏览器兼容性

相关框架：
JQuery和前面的框架基本都有通讯的支持，可是推荐两个备选选择：

1. Reqwest：大小：3.4k；优势：JSONP支持；稳定／兼容IE6+；CROS跨域； Promise／A支持

2. qwest：大小：2.5k；优势：更小的代码量；支持XmlHttpRequest2；CORS跨域；支持搞基数据类型，如：ArrayBuffer，Blob和FormData

3. socket.io:实时性；支持二进制数据流；智能自动的回退支持（非二进制数据流）；多种后端语言支持

5.工具包框架

职责：

1. 弥补js语言原生不提供的功能。

2. 方法门面包装，使其更易于使用（某些方法比较繁琐，包装后方便使用）

3. 异步队列／流程控制等等

相关框架；

1. es5-shim（部分支持）：大小53k；提供语言垫片；Github：es－shims／es5-shim

2. es6-shim：大小38k；Github：paulmillr／es6-shim

3. underscore：大小：16.5k；兼容IE6+

4. Lodash：大小：50k；兼容IE6+；是underscore的高性能版本，方法大部分是runtime编译出来

6.模版技术

基于字符串的模版

经过字符串生成DOM以后就再也不变化，DOM无关，（解析到DOM时间很快），安全性差：用到innerHTML
解决方案：dustjs；hogan（mustache实现之一）；dot.js(体小速快)

基于DOM的模版

能够动态修改更新，语法要写在节点上；初始化时间慢
解决方案：Angularjs；Vuejs； Knockout

活动模版技术

能够动态更新，DOM无关，实现局部更新，安全性高（不使用innerHTML）
解决方案：Regularjs；Ractivejs；htmlbar

7.组件

职责：

1. 提供基础组件CSS支持

2. 提供经常使用组件：Slider，Modal

3. 提供声明式的调用方式（在HTML中绑定属性初始化组件）

解决方案（基于JQuery）：

1. Bootstrap

2. Foundation
   相同点：Mobile First的流式栅格，可定制UI，都是基于JQuery，MIT开源协议。

解决方案（非JQuery版本）

1. Knockout－Bootstrap

2. UI Bootstrap

3. React Bootstrap

8.路由

职责：

1. 监听URL变化，并通知注册的模块

2. 经过javascript进行主动跳转

3. 历史管理

4. 对目标浏览器兼容性的支持

解决方案：

1. page.js:大小：6.2k；兼容IE8+；

2. Director.js:大小：10k，兼容IE6+；能够先后端使用一套规则来定义路由

3. stateman：10k；兼容IE6+；用于处理深层复杂路由的独立路由库。

4. crossroad.js： 大小：7.5k；老牌Routing库，API定义繁琐，两年未更新。

9.架构（解耦）

MVC／MVVM／MV＊

职责：

1. 提供一种范式帮助（强制）开发者进行模块解耦

2. 视图与模型分离

3. 更容易进行单元测试

4. 更容易实现应用程序的扩展

例子：
MVVM为例

1. Model：数据实体，用于记录应用程序的数据

2. View：展现友好的界面，它是数据的定制反映，它包含样式结构定义以及vm享有的声明式数据、事件绑定

3. ViewModel：view和model的粘合剂，它经过绑定、事件与view交互，并能够调用Sevice处理数据持久化，固然也能经过数据绑定将Model的变更更新到View中

10.经常使用网站介绍

http://www.javascripting.com/
http://www.javascriptoo.com/
http://microjs.com