浅谈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版DateAdd和DateDiff函数代码
Mar 01 Javascript
javascript测试题练习代码
Oct 10 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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+mysql数据库实现无限分类的方法
2014/12/12 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
学习vue.js计算属性
2016/12/03 Javascript
js实现随机点名小功能
2017/08/17 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
js如何实现元素曝光上报
2019/08/07 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
分析python请求数据
2018/08/19 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
开会迟到检讨书
2014/02/03 职场文书
九年级政治教学反思
2014/02/06 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2015年清明节活动总结
2015/02/09 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
个人催款函范文
2015/06/24 职场文书
期中考试后的感想
2015/08/07 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python