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


Posted in Javascript onJune 23, 2015

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

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

Javascript 相关文章推荐
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
vue中监听返回键问题
Aug 28 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
js的flv视频播放器插件使用方法
Jun 23 #Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 #Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 #Javascript
浅谈setTimeout 与 setInterval
Jun 23 #Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 #Javascript
javascript中传统事件与现代事件
Jun 23 #Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
You might like
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
原生js实现分页效果
2020/09/23 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Python列表如何更新值
2020/05/27 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
项目专员岗位职责
2013/12/04 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2016年春节慰问信息
2015/03/25 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python