浅谈JavaScript 框架分类


Posted in Javascript onNovember 10, 2014

如果是从内部架构与理念划分,目前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操作。

Javascript 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
WebPack基础知识详解
Jan 16 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 #Javascript
jquery插件推荐 jquery.cookie
Nov 09 #Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 #Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 #Javascript
js闭包的用途详解
Nov 09 #Javascript
js闭包实例汇总
Nov 09 #Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 #Javascript
You might like
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Python中分数的相关使用教程
2015/03/30 Python
浅析Python中的join()方法的使用
2015/05/19 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python调用自定义函数的实例操作
2019/06/26 Python
python正则-re的用法详解
2019/07/28 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python3 集合set入门基础
2020/02/10 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python excel多行合并的方法
2020/12/09 Python
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
出国导师推荐信
2014/01/16 职场文书
客户接待方案
2014/02/26 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
小班上学期个人总结
2015/02/12 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
以下牛机,你有几个
2022/04/05 无线电