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 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
layui使用label标签的方法
Sep 14 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 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中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
详解vue-cli3多页应用改造
2019/06/04 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python同步遍历多个列表的示例
2019/02/19 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Django中create和save方法的不同
2019/08/13 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
《长征》教学反思
2014/04/27 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
Python List remove()实例用法详解
2021/08/02 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android