浅谈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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
jquery 插件学习(二)
Aug 06 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Django 多环境配置详解
2019/05/14 Python
python简单区块链模拟详解
2019/07/03 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
离职保密承诺书
2014/05/28 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers