javascript框架设计之框架分类及主要功能
从内部架构和理念划分，目前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框架设计读书笔记之数组的扩展与修复
1.indexOf和lastIndexOf方法: 因为IE7在数组对象上使用indexOf会报错,所以需要重写一个兼容性的. 复制代码 代码如下: Array.prototype.lastIndexOf(item,index){ var n = this.length,i = (index==null||index>n-1)?n-1:index; if(i < 0) i = n+i; for(;i>=0;i--) if(this[i] === item) //全等判断,indexOf
-
javascript框架设计读书笔记之字符串的扩展和修复
1.repeat方法:将一个字符串重复自身n次.比如:repeat("chaojidan",2) -> chaojidanchaojidan 方法1: 复制代码 代码如下: function repeat(str,n){ return Array.prototype.join.call({length:n+1},str); //在类数组{length:n+1}上下文下执行join方法,并传入str.也就是用str来分隔类数组的选项,类数组是空,所以就有n个str分隔n+1个
-
javascript框架设计之浏览器的嗅探和特征侦测
浏览器的嗅探现在已经不推荐了,但在某些场合还是需要的.比如一些统计脚本.在标准浏览器里,提供了document.implementation.hasfeature,可惜有bug,不准确,目前,w3c又推出了CSS.supports方法,显示出大家对这块的关注. 1.判定浏览器. 主流的浏览器有ie firefox opera chorme safari 早期这些框架都是通过navigator.userAgent进行判定,目前国外的浏览器几乎都是可以判定的. 关于浏览器的判断脚本,jQuery已经
-
javascript框架设计读书笔记之种子模块
1.命名空间: js里面的命名空间就是使用对象的属性来扩展的.比如,用户定义一个A对象,A对象下面有B属性和C属性,同时B属性和C属性又是对象.因此A={B:{},C:{}},这时用户就可以在B对象和C对象中定义一样的方法,属性了.因此B和C就属于不同的命名空间.我们调用B,C对象里面的方法,就可以通过A.B.like(),A.C.like()调用了.当然A属于window对象中的属性. 但是有一种情况,比如:boke.jsp页面引入了jquery.js以及prototype.js(他们都会在w
-
javascript框架设计之类工厂
类与继承在javascript的出现,说明javascript已经达到大规模开发的门槛了,在之前是ECMAScript4,就试图引入类,模块等东西,但由于过分引入太多的特性,搞得javascript乌烟瘴气,导致被否决.不过只是把类延时到ES6.到目前为止,javascript还没有正真意义上的类.不过我们可以模拟类,曾近一段时间,类工厂是框架的标配,本章会介绍各种类实现,方便大家在自己的框架中或选择时自己喜欢的那一类风格. 1.javascript对类的支持 在其它语言中 ,类的实例都要通过构
-
javascript框架设计读书笔记之模块加载系统
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: 复制代码 代码如下: function loadJs(url , callback){ var node = document.createElement("script"); node[window.addEventListener ? "onload":"onre
-
javascript框架设计之种子模块
种子模块也叫核心模块,是框架中最先执行的部分.即便像jQuery那样的单文件函数库,它的内部也分很多模块,必然有一些模块执行时在最前面立即执行,有一些模块只有用到才执行.有的模块可有可无,存在感比较弱,只有在特定的浏览器下才运行. 种子模块就是其中的先锋,它里边的方法不一定要求个个功能齐全,设计优良,但一定要极具扩展性,常用,稳定. 扩展性是指通过他们能给将其它模块包含进来:常用是指绝大多数的模块都能用到它们,防止做重复工作.稳定是指在版本迭代时不轻易被新方法替代. 参照许多框架和库的实现,我们
-
javascript框架设计之框架分类及主要功能
从内部架构和理念划分,目前JavaScript框架可以划分为5类. 第一种是以命名空间为导向的类库或框架,如果创建一个数组用new Array(),生成一个对象用new Object(),完全的java风格,因此,我们以某一对象为跟,不断为它添加对象和二级对象属性来组织代码,如金字塔般垒起来,早期代表YUI,EXT(so,不是有活力的公司都还用它们) 第二种是以类工厂为导向的框架.著名的有Prototype,还有mootools.Base2.Ten,它们基本上除了最基本的命名空间,其它模块都是一
-
12种JavaScript常用的MVC框架比较分析
本文详细讲述了12种JavaScript常用的MVC框架.分享给大家供大家参考,具体如下: Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember.js胜出. 此次比较针对的特性标准有四种,分别是: ① UI绑定(UI Bindings) ② 复合视图(Composed Views) ③ Web表现层(Web Presentation Layer) ④
-
Python个人博客程序开发实例框架设计
目录 1.数据库(models.py) 1.1 管理员 Admin 1.2 分类 Category 1.3 文章 Post 1.4 评论 Comment 1.5 社交链接 Link 2.生成虚拟数据(fakes.py) 3.模板 3.1 模板上下文 3.2 渲染导航链接 3.3 Flash消息分类 4.表单(forms.py) 4.1 登录表单 4.2 文章表单 4.3 分类表单 4.4 评论表单 5.视图函数(blueprints:admin.auth.blog) 6.电子邮件支持(email
-
Java接口自动化测试框架设计之Get请求方法和测试详解
我来介绍通过代码逐步实现接口自动化测试框架的设计过程.先不要着急,框架设计我们只是介绍基本的组件,而且框架设计没有想象那么难,一步一步跟着做就会了.这篇我们来演示,如果通过Java代码来实现一个用纯代码实现Http中的Get请求过程. 1.Get请求API举例 浏览器打开网址https://reqres.in,然后下拉一屏,我们就可以看到这个网站的API举例,我们来看看显示用户的get接口. 通过这个图,我们能够获取这些信息 1)网站host地址:https://reqres.in/ 2)用户展
-
浅谈Vue CLI 3结合Lerna进行UI框架设计
当前大部分UI框架设计的Webpack配置都相对复杂,例如 Element. Ant Design Vue和Muse-UI等Vue组件库.例如Element,为了实现业务层面的两种引入形式( 完整引入 和 按需引入 ),以及抛出一些可供业务层面通用的 utils . i18n 等,Webpack配置变得非常复杂.为了简化UI框架的设计难度,这里介绍一种简单的UI框架设计,在此之前先简单介绍一下 Element 的构建流程,以便对比新的UI框架设计. 一般组件库的设计者将引入形式设计成 完整引入
-
CocosCreator通用框架设计之资源管理
如果你想使用Cocos Creator制作一些规模稍大的游戏,那么资源管理是必须解决的问题,随着游戏的进行,你可能会发现游戏的内存占用只升不降,哪怕你当前只用到了极少的资源,并且有使用cc.loader.release来释放之前加载的资源,但之前使用过的大部分资源都会留在内存中!为什么会这样呢? cocos creator 资源管理存在的问题 资源管理主要解决3个问题,资源加载,资源查找(使用),资源释放.这里要讨论的主要是资源释放的问题,这个问题看上去非常简单,在Cocos2d-x中确实也很简
-
CocosCreator通用框架设计之网络
前言 在 Cocos Creator 中发起一个 http 请求是比较简单的,但很多游戏希望能够和服务器之间保持长连接,以便服务端能够主动向客户端推送消息,而非总是由客户端发起请求,对于实时性要求较高的游戏更是如此.这里我们会设计一个通用的网络框架,可以方便地应用于我们的项目中. 使用websocket 在实现这个网络框架之前,我们先了解一下 websocket.websocket 是一种基于 tcp 的全双工网络协议,可以让网页创建持久性的连接,进行双向的通讯.在 Cocos Creator
-
Java框架设计灵魂之反射的示例详解
目录 获取Class对象的方式 Class对象功能 获取成员变量们 获取构造方法们 获取成员方法们 获取全类名 Field:成员变量 Constructor:构造方法 Method:方法对象 案例 框架:半成品软件.可以在框架的基础上进行软件开发,简化编码. 反射就是把Java类中的各个成员映射成一个个的Java对象. 即在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能调用它的任意一个方法和属性. 这种动态获取信息及动态调用对象方法的功能叫Java的反射机