浅谈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 相关文章推荐
[IE&FireFox兼容]JS对select操作
Jan 07 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
jquery移动节点实例
Jan 14 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 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
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
JavaScript 应用类库代码
2008/06/02 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python 布尔操作实现代码
2013/03/23 Python
python中from module import * 的一个坑
2014/07/20 Python
Python之PyUnit单元测试实例
2014/10/11 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Python实现代码统计工具
2019/09/19 Python
DBA的职责都有哪些
2012/05/16 面试题
九月份红领巾广播稿
2014/01/22 职场文书
外国人聘用意向书
2014/04/01 职场文书
小学生作文评语
2014/04/18 职场文书
国际金融专业自荐信
2014/07/05 职场文书
人大调研汇报材料
2014/08/14 职场文书
ktv好的活动方案
2014/08/15 职场文书
社区护士演讲稿
2014/08/27 职场文书
2014年电工工作总结
2014/11/20 职场文书
法院答辩状格式
2015/05/22 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL