javascript框架设计之框架分类及主要功能

178 阅读 0 评论 118 点赞

我是靠谱客的博主温婉向日葵，最近开发中收集的这篇文章主要介绍javascript框架设计之框架分类及主要功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

从内部架构和理念划分，目前JavaScript框架可以划分为5类。

第一种是以命名空间为导向的类库或框架，如果创建一个数组用new Array(),生成一个对象用new Object(),完全的java风格，因此，我们以某一对象为跟，不断为它添加对象和二级对象属性来组织代码，如金字塔般垒起来，早期代表YUI，EXT（so,不是有活力的公司都还用它们）

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

第三种，就是以jQuery为代表的以选择器为导向的框架，整个框架或库主体是一个特殊的类数组对象，方便集化操作（因为选择器一下子选择到了N个元素节点），于是一并处理了。jQuery有几样了不起的东西：

“无new实例化”技术，$( expr )就是返回一个实例，不需要显式的new出来；
get first set all访问规则;
数据缓存系统。这样就可以赋值节点事件了。
IIFE也被发掘出来

第四种，就是加载器串联起来的框架，它都有复数个javascript文件，每个javascript文件都以固定规则编写。其中，最著名的莫过于AMD。模块化是javascript走向工业化的标志，“要编写复杂软件有不至于一派涂地的唯一方法，就是定义清晰的接口，把若干模块组合起来，如此一来，多数问题只会出现在局部，那么还有希望对局部进行改进和优化，而不至于牵动全身。”许多企业内部框架都基本采取这种架构，如Dojo,YUI，Kissy,qwrap,mass,(requirejs,Seajs)等.

第五种，就是具有明确的分层构架的MV*,首先是javascript MVC,(现在叫Canjs)、backbone.js和spinejs,然后更符合前端实际的MVVM框架，如，knockout,emberm,angular,avalon,winjs。在MVVM框架中，原有的DOM操作被声明式绑定取代了，由框架自由处理，用户只专注于业务代码。

javascript框架的主要功能

jQuery框架类库的模块划分主要依据在github的源代码，基本上都是一个模块一个javascript文件，jQuery一开始专注于DOM操作的思路一开始就是对的，以后不断在兼容性上，性能上进行改进，经过多年发展，jQuery庞大的插件与完善的BUG提交渠道，使得自身不断完善

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操作。

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