离线下载
PDF版 ePub版

开源中国2015 · 更新于 2018-11-28 11:00:42

浅谈 JavaScript 框架分类

如果是从内部架构与理念划分,目前 JavaScript 框架可以划分为 5 类。

第 1 种

出现的是以命名空间为导向的类库或框架,如创建一个数组用 new Array(),生成一个对象用 new Object(),完全的 Java 风格,因此我们就可以以某一对象为根,不断为它添加对象属性或二级对象属性来组织代码,金字塔般地垒叠起来。代表作如早期的 YUI 与 EXT。

第 2 种

出现的是以类工厂为导向的框架,如著名的 Prototype,还有 mootools、Base2、Ten。它们基本上除了最基本的命名空间,其他模块都是一个由类工厂衍生出来的类对象。尤其是 mootools 1.3,把所有类型都封装成 Type 类型。

第 3 种

就是以 jQuery 为代表的以选择器为导向的框架,整个框架或库主体是一个特殊类数组对象,方便集化操作――因为选择器通常是一下子选择到 N 个元素节点,于是便一并处理了。jQuery 包含了几样了不起的东西:“无 new 实例化” 技术,$(expr)就是返回一个实例,不需要显式地 new 出来;get first set all 访问规则:数据缓存系统。这样就可以复制节点的事件了。此外,IIFE(Immediately-Invoked Function Expression)也被发掘出来。

第 4 种

就是以加载器串联起来的框架,它们都有复数个 JavaScript 文件,每个 JavaScript 文件都以固定规则编写。其中最著名的莫过于 AMD。模块化是 JavaScript 走向工业化的标志。《Unix 编程艺术》列举的众多 “金科玉律” 的第一条就是模块,里面有言――“要编写复杂软件又不至于一败涂地的唯一方法,就是用定义清晰的接口把若干简单模块组合起来,如此一来,多数问题只会出现在局部,那么还有希望对局部进行改进或优化,而又不至于牵动全身”。许多企业内部框架都基本采取这种架构,如 Dojo、YUI、kissy、qwrap 和 mass 等。

第 5 种

就是具有明确分层架构的 MV * 框架。首先是 JavaScript MVC(现在叫 CanJS)、backbonejs、spinejs,然后更符合前端实际的 MVVM 框架,如 knockout、ember、angular、avalon、winjs。在 MVVM 框架中,原有 DOM 操作被声明式绑定取代了,由框架自行处理,用户只需专注于业务代码。

下面是有关框架特征的结论。

对基本数据类型的操作是基础,如 jQuery 就提供了 trim、camelCase、each、map 等方法,对 Prototype.js 等侵入式框架则是在原型上添加 camelize 等方法。

类型的判定必不可少,常见形式是 isXXX 系列。

选择器、domReady、Ajax 是现代框架的标配。

DOM 操作是重中之重,节点的遍历、样式的操作、属性操作也属于它的范畴,是否细分就看框架的规模了。

brower sniff 已过时,feature detect 正被应用。不过特性侦测还是有局限性,如果针对于某个浏览器版本的渲染 Bug、安全策略或某些 Bug 的修正,还是要用到浏览器嗅探。但它应该独立成一个模块或插件,移除框架的核心。

现在主流的事件系统都支持事件代理。

数据的缓存与处理,目前浏览器也提供 data-* 属性进行这方面的工作,但不太好用,需要框架的进一步封装。

动画引擎,除非你的框架像 Prototype.js 那样拥有像 script.aculo.us 这样顶级的动画框架做后盾,最好也加上。

插件的易开发和扩展性。

提供诸如 Deferred 这样处理异步的解决方案。

即使不专门提供一个类工厂,也应该存在一个名为 extend 或 mixin 的方法对对象进行扩展。jQuery 虽然没有类工厂,但在 jQuery UI 中也不得不增加一个,可见其重要性。

自从 jQuery 出来一个名为 noConflict 的方法,新兴的框架都带此方法,以求狭缝中生存。

许多框架非常重视 Cookie 操作。