《开源前端框架纵横谈.docx

开源前端框架纵横谈作者：zdrjlamp近年来随着Web应用交互复杂度的提升，前端开发也迎来了一个高速发展的时期。除了一些老牌框架纷纷推出改动较大的升级之外，还涌现出一批新生代的开源库和框架，推动着Web应用开发理念向越来越强调前端架构的方向发展。当下的前端技术可以说是处在一个新旧交替的过程之中，同时存在着许多不同的观念和实践。本文试图对目前数量繁多的前端框架进行一些较笼统的分析和比较，抛砖引玉，希望能为大家在选择前端的技术架构时提供一些有益的参考。需要明确的是，本文探讨的前端架构是以JAVAScript为主。有一些主要关注 CSS层面的前端框架，如Bootstrap，不在本文的讨论范围之内。今天的 JavaScript框架和库繁多复杂，很大程度上源于Web前端开发本身的特殊性。从当初的可有可无到今天各种功能完备的HTML5标准，JavaScript在Web应用中的职责和定位经历了巨大的变化。加上长期以来各种浏览器对ECMA标准支持参差不齐的复杂环境，这导致大家对于 JavaScript能做什么、该做什么、应该怎么做一直无法形成共识。一个Web应用可以把所有业务逻辑全部放在服务器端，几乎不依赖 JavaScript；也可以完全用JavaScript构建客户端，服务器只负责数据接口；更有可能选择介于两者之间的折中方案。整体架构选择的多样性使得不同的应用对于前端架构有着截然不同的需求。这意味着很难有一个前端库或框架可以满足所有人，也使得开发者在找不到完美方案的情况下选择重复造轮子。同时，由于JavaScript是一门相当灵活的语言，不同背景的开发者借鉴了许多不同的软件设计思想来构建他们理想中的JavaScript框架，这也导致不同的框架/库在解决同一个问题时经常有不同的方案，例如单页应用的设计模式问题。框架vs.库众所周知，在前端开发中对于库（Library）和框架（Framework）的区分向来是有些模糊的。像jQuery、YUI这些项目的官方描述都是“库”，却经常在各种地方被人们称作“框架”。近两年出现的一些MVC项目号称框架，实际上却更像库。此外，在同样号称框架的各个项目之间所覆盖的功能也都有所不同。传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权。框架提供架构，控制运行流程，让开发者在合适的地方书写针对具体问题的代码；而库则附属于架构，不控制运行流程，只提供可调用的函数。但由于上述Web前端开发的特殊性，这样的定义显得有些过于严格：真正称得上框架的项目很少，却又经常需要和作为库的项目进行比较。因此，在比较JavaScript开源项目时，是框架还是库并不特别重要，首先应该分析该项目覆盖了前端开发中的哪些问题（下文为了论述方便，一律用框架指代各类JavaScript开源项目）。前端开发可能面对的需求前端开发中最常见的问题大致可以分为：封装原生API和常用任务、基础架构、富应用架构、视觉交互，以及工具链。下面我们逐个分析。封装原生API和常用任务JavaScript的原生API存在以下问题。对象、方法名烦琐。缺少一些常用任务的语法糖。旧浏览器兼容性不佳。因此早期的一些框架最主要的目标就是把烦琐的原生API和常用的任务封装成更简洁直观的API，同时，在封装过程中也处理了兼容性问题。jQuery就是解决这一部分问题的典型方案。HTML5和ECMAScript 5标准的出台使得这些问题有所好转。随着新标准的普及，将来对于这一部分功能的需求会逐渐减弱。通常来说，封装的对象包含以下类别。DOM的选择和操作：经典的例子如jQuery的链式API。DOM事件处理：一个重点是简化事件的delegation，即利用事件冒泡机制在父元素上用一个侦听函数侦听触发在多个子元素上的事件。Ajax：简化烦琐的XMLHttpRequest API，并且加强其语义性。语言增强：主要提供一些对数组和对象进行操作的便利函数。jQuery包含一些，但更典型的有Underscore和Lodash。基础架构这一部分通常是各类框架中比较底层的功能，决定了采用此框架的代码是如何被组织到一起的。目标是提高代码的可维护性、可协作性和可测试性。模块管理：对大型的JavaScript项目来说，模块化开发是必需的。有些框架只提供基本的模块注册机制以防止全局变量污染和冲突，而另一些则提供包括模块依赖解析、文件加载、压缩打包的功能。目前JavaScript模块管理有两个互相竞争的标准，一个是AMD（Asynchronous Module Definition），采用的框架有Dojo，单独的模块管理库有RequireJS；另一个是CommonJS的模块标准，采用者有模块管理库SeaJS，以及基于SeaJS的开放型框架Arale。面向对象：JavaScript有原型继承，并且可