框架选型

前面的话

　　有一个流传较广的笑话，一我的在stackoverflow中提了一个问题，如何使用javascript实现一个数字与另一个数字相加。最高票回答是你应该使用jQuery插件，jQuery插件能够作任何事情。 历史老是在重演，之前是jQuery，如今多是react或vue。不一样的框架有不一样的应用场景，杀鸡不要用牛刀。本文将详细介绍框架选型

 

框架与库

　　库(lib)具备如下三个特色：

　　一、是针对特定问题的解答，具备专业性；

　　二、不控制应用的流程

　　三、被动的被调用

　　框架(framework)具备如下三个特色：

　　一、具备控制反转(inverse of control)的功能

　　二、决定应用程序的生命周期

　　三、通常来讲，集成了大量的库

　　由下图所示，框架会在特定的时间要求程序执行某段代码。框架决定了何时调用库，决定了何时要求代码去执行特定功能

　　而实际上，一个库有时也能够称之为框架，而库里面集成的方法称之为库

　　框架和库的区别不禁实际大小决定，而由思考角度来决定。框架和库实际上能够统称为解决方案

 

解决方案

　　前端开发中的解决方案主要用于解决如下7个方面的问题：

　　一、DOM

　　二、Communication(通讯)

　　三、Utililty(工具库)

　　四、Templating(模板集成)

　　五、Component(组件)

　　六、Routing(路由)

　　七、Architecture(架构)

【why】

　　为何要使用外部的解决方案呢？

　　一、提升开发效率

　　二、可靠性高（浏览器兼容，测试覆盖）

　　三、配备优良的配套，如文档、DEMO及工具等

　　四、代码设计的更合理、更优雅

　　五、专业性高

　　若是问题过于简单，或者备选框架的质量和可靠性没法保证，再或者没法知足业务需求，则不该该选择外部的框架。若是团队中已经有相关的积累，就更不须要使用了

【how】

　　通常地，解决方案要实际开发中有如下3种使用方式：

　　一、开放式：基于外部模块系统，并自由组合

　　二、半开放式：基于一个定制的模块系统，内部外部解决方案共存

　　三、封闭式：深度定制的模块系统，不多须要引入外部模块

 

DOM

　　接下来，将针对解决方案中提到的7个问题进行分别介绍，首先是DOM

　　关于DOM，主要包括Selector(选择器)、Manipulation(DOM操做)、Event(事件)、Animation(动画)这四个部分

　　DOM相关的解决方案主要用于提供如下操做　

　　一、提供便利的 DOM 查询、操做、移动等操做

　　二、提供事件绑定及事件代理支持

　　三、提供浏览器特性检测及 UserAgent 侦测

　　四、提供节点属性、样式、类名的操做

　　五、保证目标平台的跨浏览器支持

【经常使用方案】

　　经常使用的DOM解决方案有 jQuery、zepto.JS、MOOTOO.JS等

　　jQuery是曾经风靡一时的最流行的前端解决方案，jQuery特有的链式调用的方式简化了javascript的复杂操做，并且令人们再也不须要关心兼容性，并提供了大量的实用方法

　　zepto是jQuery的精简版，针对移动端去除了大量jQuery的兼容代码，提供了简单的手势，部分API的实现方式不一样

　　mootools源码清晰易懂，严格遵循Command-Query(命令-查询)的接口规范，没有诸如jQuery的两义性接口。还有一个不得不提的特色是，使用选择器获取的是DOM原生对象，而不是被包装过的对象。而它支持的诸多方法则是经过直接扩展DOM原生对象实现的，这也是它的争议所在

　　相比较而言，最稳妥的DOM解决方案是jQuery

【专业领域】

　　上面的解决方案用于解决DOM通常的通用问题。随着技术的发展，DOM的专业领域出现一些小而精致的解决方案

　　一、手势

　　Hammer.JS包括了常见手势封装（Tab、Hold、Transform、Swifp）并支持自定义扩展

　　二、局部滚动

　　iscroll.JS是移动端position:fix + overflow:scroll的救星

　　三、高级动画

　　Velocity.JS能够复杂动画序列实现，不只局限于 DOM

　　四、视频播放

　　Video.JS相似原生 video 标签的使用方式，对低级浏览器使用 flash 播放器

通讯

　　关于通讯，主要包括XMLHttpRequest、Form、JSONP、Socket等 

　　通讯相关的解决方案主要用于提供如下操做

　　一、处理与服务器的请求与相应

　　二、预处理请求数据与响应数据 Error/Success 的判断封装

　　三、多类型请求，统一接口（XMLHttpRequest1/二、JSONP、iFrame）

　　四、处理浏览器兼容性

【经常使用方案】

　　除了jQuery等，其余经常使用的通讯解决方案有Reqwest、qwest等

　　Reqwest支持JSONP，稳定性高，IE6+支持，CORS 跨域，Promise/A 支持

　　qwest代码少、支持XMLHttpRequest二、CORS 跨域、支持高级数据类型（ArrayBuffer、Blob、FormData）

【专业领域】

　　对于实时性要求较高的需求可使用socket.io，它实时性高，支持二进制数据流，智能自动回退支持，且支持多种后端语言

 

工具包

　　工具包(Utililty)的主要职责包括如下：

　　一、提供 JavaScript 原生不提供的功能

　　二、包装原生方法，使其便于使用

　　三、异步队列及流程控制

【经常使用方案】

　　经常使用的工具包解决方案有es5-shim、es6-shim、underscore、Lodash等　　

　　上面提到的shim，也是常常听到的一个词，翻译过来是垫片的意思。对于es五、es6等标准包括的一些新方法，因为浏览器兼容性不高，因此没法直接使用它们。这时，就须要在保证明现与规范一致的基础上，来扩展原型方法，这种作法就叫作shim。好处在于，实际上就是在使用javascript的语法，但不用去考虑低版本浏览器的兼容性问题

　　es5-shim 提供 ES3 环境下的 ES5 支持

　　es6-shim 提供 ES5 环境下的 ES6支持

　　underscore 提供兼容 IE6+ 的扩展功能函数

　　Lodash是underscore 的高性能版本，方法多为 runtime 编译出来的

 

模板

　　模板主要包括三类：基于字符串的模板(String-based)、基于DOM的模板(DOM-based)、活动模板(Living Template)

　　一、基于字符串的模板(String-based)，解决方案包括(dustjs、hogan.js、dot.js)

　　原理以下：输入一段模板字符串，经过编译以后 ，生成一段Function，经过Function的render或类render函数渲染输入的数据data，输出模板字符串，字符串经过innerHTML或相似的方式渲染成最后的DOM结构。这类模板的问题在于经过字符串生成DOM以后就再也不变化，若是在改变输入的数据data，须要从新render，从新生成一个全新的DOM结构，性能较差。但该模板能够在服务器端运行

　　二、基于DOM的模板(DOM-based)，解决方案包括(angularjs、vuejs、knockout)

　　原理以下：将输入的字符串模板经过innerHTML转换为一个无状态DOM树，而后遍历该节点树，去抓取关键属性或语句，来进行相关的绑定，进而变成了有状态的DOM树，最终致使DOM树会与数据模型model进行绑定。这类模板的特色是修改数据时，会使有状态的DOM树实时更新，运行时性能更好，也会保留 DOM 中的已有事件

　　三、活动模板(Living Template)，解决方案包括(RegularJS、RactiveJS、htmlbar)

　　原理以下：活动模板融合了字符串模板和DOM模板的技术，模板字符串string经过自定义的解析器DSL-based Parse解析成AST(抽象语法树)，经过遍历AST，使用createElement()、setAttribute()等原生DOM方法，生成DOM树，最终致使DOM树会与数据模型model进行绑定。因为其内部彻底不使用innerHTML，因此安全性较高

 

组件

　　组件(Component)的主要职责包括如下：

　　一、提供基础的 CSS 支持

　　二、提供常见的组件，如slider、Modal等

　　三、提供声明式的调用方式（相似 Bootstrap）

【经常使用方案】

　　经常使用的组件解决方案有Bootstrap、Foundation等，二者具备移动端first的流式栅格系统，由sass组织，可定制UI

　　Bootstrap封装了经常使用的组件，是目前最火的组件解决方案

　　Foundation在国内知名度不高

 

路由

　　路由在单页系统中很是重要，主要职责以下

　　一、监听 URL 变化，并通知注册的模块

　　二、经过 JavaScript 进行主动跳转

　　三、历史管理

　　四、对目标浏览器的兼容性支持

　　不管什么框架，在完成配置以后，内部都有以下图所示的相似的路由表。

【经常使用方案】

　　经常使用的路由解决方案有page.JS、Director.JS、Stateman、crossroad.JS等

　　page.JS相似 Express.Router 的路由规则的前端路由库

　　Director.JS能够先后端使用同一套规则定义路由

　　Stateman处理深层复杂路由的独立路优库

　　crossroad.JS老牌路由库，API 功能较为繁琐

 

架构

　　全部的架构(architecture)都是一个目的，就是解耦。解耦有不少方式，能够经过事件、分层等

　　市面上，有不少架构模式，包括MVC、MVVM、MV*等

　　架构的职责主要包括如下：

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

　　二、视图与模型分离

　　三、容易进行单元测试

　　四、容易实现应用扩展

　　以MVVM为例，以下图所示。它包括Model(数据层或模型层)、View(视图层)、ViewModel(控制层)

　　Model(数据层或模型层)表示数据实体，它们用于记录应用程序的数据

　　View(视图层)用于展现界面，界面是数据定制的反映，它包含样式结构定义以及VM享有的声明式数据以及数据绑定

　　ViewModel(控制层)是View与Model的粘合，它经过绑定事件与View交互并能够调用Service处理数据持久化，也能够经过数据绑定将Model的变更反映到View中

　　它们的关系是：各部分之间的通讯，都是双向的；View 与 Model 不发生联系，都经过 ViewModel 传递；View 很是薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而ViewModel很是厚，全部逻辑都部署在那里

【SPA】

　　要特色注意的是，MV* !== SPA(单页系统)

　　SPA应用程序的逻辑比较复杂，须要一种模式来进行解耦，但并不必定是MV*模式

 

最后

　　最后推荐一个框架选型网站https://www.javascripting.com，该网站根据不一样的需求的选择，给出当下流行的框架选型

　　本文是蔡剑飞、郑海波老师的《产品前端架构》课程中《框架选型》章节的学习记录