JavaScript框架设计：五大分类及核心功能解析

JavaScript框架的五大分类

从内部架构和设计理念的角度来看，当前的JavaScript框架主要可以划分为五大类别。

第一类是以命名空间为导向的类库或框架。这类框架遵循类似Java的开发风格，例如通过new Array()创建数组，通过new Object()生成对象。其代码组织方式是以某个特定对象为根节点，不断向其添加子对象和二级属性，形成类似金字塔的结构。早期的代表框架包括YUI和EXT（尽管并非所有拥有活力的公司都依赖它们）。

第二类是以类工厂为导向的框架。著名的代表包括Prototype、mootools、Base2和Ten等。这类框架除了提供基本的命名空间外，其他模块大多是由类工厂衍生出的类对象。特别是mootools 1.3版本，将所有类型都封装成了Type类型。

第三类是以选择器为导向的框架，以jQuery为典型代表。整个框架或库的主体是一个特殊的类数组对象，便于进行集合操作（因为选择器一次性选中了多个元素节点），从而可以统一处理。jQuery具备几个显著特点：

首先是“无new实例化”技术，即$( expr )直接返回一个实例，无需显式使用new关键字；其次是get first set all访问规则；第三是数据缓存系统，这使得为节点赋值事件成为可能；此外，IIFE（立即调用函数表达式）也被广泛发掘和应用。

第四类是通过加载器串联起来的框架，这类框架包含多个JavaScript文件，每个文件都遵循固定的编写规则。其中，最著名的莫过于AMD规范。模块化被视为JavaScript走向工业化的标志，“编写复杂软件且不至于导致系统混乱的唯一方法，就是定义清晰的接口，将若干模块组合起来。这样一来，多数问题仅出现在局部，从而还有希望对局部进行改进和优化，而不至于牵动全身。”许多企业内部框架基本采用这种架构，例如Dojo、YUI、Kissy、qwrap、mass（以及requirejs、Seajs等）。

第五类是具有明确分层架构的MV*框架。首先是JavaScript MVC框架，如现在称为Canjs的框架、backbone.js和spinejs；随后是更符合前端实际的MVVM框架，如knockout、ember、angular、avalon和winjs。在MVVM框架中，原有的DOM操作被声明式绑定所取代，由框架自由处理，用户只需专注于业务代码。

JavaScript框架的核心功能模块

接下来探讨JavaScript框架的主要功能模块。

jQuery与Prototype.js的功能解析

以jQuery框架类库为例，其模块划分主要依据GitHub上的源代码，基本上是一个模块对应一个JavaScript文件。jQuery最初专注于DOM操作的思路是正确的，随后在兼容性和性能上不断进行改进。经过多年的发展，凭借庞大的插件生态和完善的问题提交渠道，jQuery自身得以不断完善。

Prototype.js曾是早期的王者，其结构划分为四个部分。

具体包括：语言扩展、DOM扩展、Ajax部分以及废弃部分（新版本中通过其他方法实现原有功能）。

Prototype.js的语言扩展覆盖面非常广泛，包括基本数据类型和从语言借鉴过来的“类”。其中，Enumerable只是一个普通的方法包，而ObjectRange、PeriodicalExecuter和Templat则是利用Class类工厂生产出来的（来自社区贡献）。

其他代表性框架简介

mootools由于API设计非常优雅，且其官方网站上拥有许多优质插件，因此没有在原型扩展的反对浪潮中没落。

Rightjs是另一个在原型扩展上的框架；MochiKit是一个Python风格的框架，风格十分独到，能进入框架前十；Ten是日本著名博客社区Hatena的JavaScript框架，由amachang开发，受Prototype.js影响，是最早以空间命名的框架典范；mass Framework是一个以大模块开发为目标、采用jQuery式风格的框架。

经过细节比较，我们可以很容易得出以下关于框架特征的结论。

对基本数据的操作是基础，如jQuery提供的trim camelCase each map等方法，Prototype.js等入侵式框架则在原型上添加camelize等方法
类型的判定比不可少，常见的形式是jsXXX系列
选择器，domReady Ajax是现代框架的标配
DOM操作是重中之重，节点的遍历，样式操作，属性操作也属于它的范畴
现在主流的事件系统都支持事件代理
数据的缓存与处理，目前浏览器也支持data-属性进行操作，但不好用，需要框架封装
动画引擎
插件的易开发和扩展性
提供诸如Deferred这样处理异步的解决方案
即使不专门提供一个类工厂，也应该存在一个名为extend或mixin的方法对对象进行扩展。jQuery虽然没有类工厂，但在jQuery UI中也不得不增加一个，可见其重要性。
自从jQuery出来一个名为noConflict的方法，新兴的框架都带此方法，以求狭缝中生存。
许多框架非常重视Cookie操作。

以上所述即为本文的全部内容，希望大家能够喜欢。