javascript框架,javascript框架设计第二版 pdf

什么是js框架？

Javascript框架是指以Javascript语言为基础搭建的编程框架。

JavaScript框架如今正融入到属于自己的Web和移动应用程序中，构建后端API和丰富的前台客户端是一大趋势，而这些又多由JavaScript框架编写而成。

在开发前台界面时应用API，便会更加熟悉API，也会对工作内容了如指掌，当应用该项技术编写客户端，编写顶级iPhone或者Android应用程序就会变得非常容易。

在JavaScript框架出现之前，开发人员只能在页面上进行jQuery操作。这种方式很容易引起开发人员对编码操作的困惑，而且也不易管理。

Backbone是最初的领跑者，提供了一个基本的结构和组织以及开发者友好的框架，如Angular和Ember。

扩展资料：

javascript的特点：

1、一种解释性执行的脚本语言。

同其他脚本语言一样，javascript也是一种解释性语言，其提供了一个非常方便的开发过程。

2、一种基于对象的脚本语言。

其也被看作是一种面向对象的语言，这意味着javascript能运用其已经创建的对象。因此，许多功能可以来自于脚本环境中对象的开发方法 与脚本的相互作用。

3、一种简单弱类型脚本语言。

javascript是一种基于java基本语句和控制流之上的简单而紧凑的设计，从而对于使用者学习java或其他c语系的编程语言是一种非常好的过渡。

4、一种相对安全脚本语言。

javascript作为一种安全性语言，不被允许访问本地的硬盘，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失或对系统开发的非法访问。

参考资料来源：百度百科-JavaScript框架

相关问答

Q1: javascript框架有哪些

目前来看，JS框架以及一些开发包和库类有如下几个，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

Dojo （JS library and UI component ）：

Dojo是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛 应用在很多项目中，他的UI组件的特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织 方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。

优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持

缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。

Prototype （JS OO library）：

是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样 的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous 实现一些JS组件功能和效果。

优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。

缺点：如果说缺点，可能就是功能是他的弱项

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般

优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果

缺点：刚刚兴起，需要时间的磨练

yui-ext (JS UI component)：

基于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件 能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。

优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。

缺点：太过复杂，整个界面的构造过于复杂。

Jquery ：

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标，

优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext 重用了很多jQuery的函数

缺点：据说太嫩，历史不悠久。

Mochikit ：

MochiKit自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML 文档定制的，如果与 MochiKit 和 Ajax 结合在一起，使用 XHTML 包装的微格式尤其方便。Mochikit可以直接对字符串或者数字格式化输出，比较实用和方便。它还有自己的 js 代码解释器

优点：MochiKit.DOM这部分很实用，简介也是很突出的

缺点：轻量级的缺点

mootools ：

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。

优点：可以定制自己所需要的功能，可以说是prototypejs的增强版。

缺点：不大不小，具体应用具体分析

moo.fx ：

moo.fx是一个超级轻量级的javascript特效库（7k）,能够与prototype.js或mootools框架一起使用。它非常快、易于使用、跨浏览器、符合标准，提供控制和修改任何HTML元素的CSS属性，包括颜色。它内置检查器能够防止用户通过多次或疯狂点击来破坏效果。moo.fx整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。

优点：小块头有大能耐

缺点：这么小了，已经不错了

Q2: javascript框架是什么意思？有什么作用？怎么理解？最好举个例子

浅谈js框架设计 在这个JavaScript框架随处乱跑的时代，你是否考虑过写一个自己的框架？下面的内容也许会有点帮助。

一个框架应该包含哪些内容？

1.语言扩展

大部分现有的框架都提供了这部分内容，语言扩展应当是以ECMAScript为基础进行的，不应当依赖任何宿主环境，也就是说，作为一个框架的设计者，你应当保证你的语言扩展可以工作在任何宿主环境中，而不是仅仅适合浏览器环境。你必须保证把它放到WScript,SpiderMonkeyShell,Rhino Shell,Adobe ExtendScript Toolkit甚至FlashActionScript等环境中都能正确的工作，举个现实一点的例子setTimeout不可以出现在其中，你也不能用XMLHTTP加载脚本运行，尽管它们看起来很贴近语言。保持这一部分的独立性可以让你方便的移植你的框架到其他宿主环境下。　

2.数据结构和算法

JS本身提供的内置对象非常有限，很多时候，框架应该提供一些数据结构和算法来帮助使用者更好的完成逻辑表达。但我认为随便翻本数据结构或者算法书用JS挑几个实现了加到框架中是不负责任的，多数数据结构应当以库的形式存在而非框架。框架中的数据结构应该足够常用而且实现不是非常复杂的，可以考虑的如集合、哈希表、链表、有序数组以及有序数组上的二分搜索。对JS来说，对象是一个天然的字符串哈希表，而集合很容易在哈希表上实现，因此只需要处理掉Object的内置方法，我们就可以实现一个高效的集合或哈希表。

3.DOM扩展

JS主要应用于Web开发，目前所有的框架也都用于浏览器环境，那么，浏览器端环境里重点中的重点DOM当然也是框架的扩展目标了，如果一个框架不提供DOM的扩展，那么其实基本没什么用处了。需要注意的是，DOM扩展也有w3c的标准可依，所以，不要尝试为各种浏览器做一些奇怪的扩展，比如FF下面的element们的prototype，框架的编写者应当无视它们。DOM扩展的主要任务之一是兼容性，不同浏览器上的DOM实现相差很多，框架必须消除这些实现带来的差异，提供统一的访问方式。当然，做为框架，应当提供一些更为方便的接口，将宿主提供的DOM对象用js对象封装是个不错的想法，但是同时这也很可能会造成内存泄露，所以做这事之前，了解内存泄露是必要的。实际上，自己想象的扩展远不如W3C的设计，比如如果你能更完整地实现XPath，你就能比JQuery做的更好。

4.AJAX扩展

大部分现有框架出现的原因都是因为AJAX，所以如果你想设计一个受欢迎的框架，AJAX是必须要做的。跟DOM扩展很相似，AJAX扩展的主要任务是兼容和内存泄露，对AJAX的核心组件XMLHttpRequest对象，必须在IE6中使用ActiveX创建，而ActiveX又有各种版本，而随之而来的内存泄露和兼容性变得非常麻烦，比如：事件函数名大小写、this指向、事件函数的null赋值。处理好这些兼容性的基础上，可以做进一步的工作，提供一些常用的实现。应该指出的是，除非你确定你提供的接口比原来的更好，否则不要改变原来的XMLHttpRequest对象的接口，比如写一个Request函数来代替open和send，如果你不清楚W3C的专家们为什么这么设计，请不要把他们想象成傻瓜。我想自己另外写一个兼容且内存安全的XMLHttpRequest加入到自己框架的命名空间里，使它从外部看上去跟W3C描述的XMLHttpRequest一模一样是不错的办法，对XMLHttpRequest我认为唯一可以考虑的修改是提供onsuccess事件。当然针对一些复杂功能的AJAX扩展也是可行的，比如HTMLHttpRequest类似的扩展可以让AJAX初学者喜欢你的框架。

5.效果

时间效果是最能刺激用户神经的，渐隐、缓动、滑动、颜色渐变这些都很不错，其实技术难度也不是很高。拖动效果则是浏览器中一个很重要的效果，用鼠标事件来模拟本来很容易，不过兼容和setCapture也是很麻烦的事情。这一部分内容量力而为就可以了。

7.脚本管理

因为大家非常喜欢C++风格的include或者JAVA风格的import，很多框架提供了基于AJAX的脚本管理，不过同步加载的效率问题是巨大的。之前我们曾经作过各种尝试，希望找到一个浏览器中不用XMLHTTP加载外部js的方法，但是最后得出的结论是：不可能。

关于这个，略微思考就可以知道，Java C++ C#都是编译型语言，include 和import都是编译期处理，在js中做到类似的事情是不太可能的。为了实现类似的功能，我想我们可以利用服务端程序或者编写一个文本工具来实现。

YUI将所有的js文件依赖关系提取出来的做法是可行的，不过这不能算是include的实现方式了，维护依赖关系不是一件很简单的事情。

8.控件

EXT的成功告诉我们：提供优质的控件才是框架的王道。你不能指望优质的扩展会吸引更多使用者。多数人只关心如何快速完成手边的工作。当然不是所有框架都要提供这部分内容。控件好坏取决于能力和美工，不过至少要保证框架里的控件不会内存泄露。

框架设计的若干原则：

1.不要做多余的事

对这框架设计来说，我认为一个非常必要的原则就是不要做多余的事情，举个极端的的例子：

function add(a,b)

{

return a+b;

}

这样的代码如果出现在框架中，就是个十足的笑话。不过大多数时候，事情不是那么明显，很多框架试图用某种形式在JS中"实现"OOP，但是实际上，JS本身是OO的（ECMA262中明确指出来的，不像某些人所说是基于对象云云）只是有一些语法跟Java等语言不同。那么显然这些OOP的"实现"其实是跟上面的例子一样的道理。另一个例子是Array.prototype.clone

Array.prototype.clone=function(){

return this.slice();

}

2.慎用prototype扩展

很多框架利用修改原生对象的prototype来做语言扩展，但我认为应当小心地看待这件事，毫无疑问这将造成一定的命名污染，你无法保证框架的使用者或者与你的框架共存的其他框架不会使用同样的名字来完成其他的事情。特别需要注意的是，Object和Array这两个对象的prototype扩展格外的危险，对Object来说，如果Object被修改，那么框架的使用者将无法创建一个未被修改的干净的对象，这是一个致命的问题，尤其如果你的使用者喜欢用forin来反射一个对象的属性。Array.prototype修改的危险来自js一个不知有意还是无意的小小设计，对原生的Array来说，任何情况下for和forin的遍历结果是相同的，而因为无法控制自定义的属性是不可枚举的，任何Array.prototype的修改都会破坏这种特性。一方面，我认为不应当推荐用forin遍历数组，这其中包含着错误的语义。另一方面，框架的设计者必须尊重这些使用者，因为对于ECMA所定义的语法而言，它是正确的做法。其中包含着这样一个简单的事实：假如你的框架中修改了Array.prototype，那么一些之前能正确工作的代码变得不可正确工作。

直接修改prototype看上去非常诱人，但是在考虑它之前应当先考虑两种可能的方案：

(1)函数

提供一个以对象为第一个参数的函数比如 Array.prototype.each =

function ForEach(arr,f)

{

if(arr instanceof Array)/*...*/;

}

(2)继承

以return的形式继承一个内置对象 比如考虑Array.prototype.each=

function ArrayCollection()

{

var r=Array.apply(this,arguments);

r.each=function(){/*......*/};

return r;

}

套用一句名言，不要修改原生对象的prototype，除非你认为必要。不过修改原生对象的prototype确实有一些特殊的用途（就是"必要的情况"），主要体现在2点：文字量支持和链式表达。举一个例子可以体现这两点：

var cf=function f(a,b,c,d)

{

/*........*/

}.$curry(3,4).$curry(5).$run();

如果希望实现类似上面的表达方式，可能就需要扩展Function.prototype，权衡一下的话，如果你认为命名污染的代价是值得的，那么也是可以提供给使用者的。

一个比较讨巧的办法是把选择权利交给使用者，提供一个扩展器：

function FunctionExtend()

{

this.$curry=function(){/*......*/};

this.$run=function(){/*......*/};

}

如果用户喜欢可以FunctionExtend.apply(Function.prototype); 如果不喜欢扩展 则可以

var r=function(){/*......*/};

FunctionExtend.apply(r);

3.保持和原生对象的一致

不知你有没有注意到，内置对象Function Array等都有这样的性质：

new Function()跟Function的结果完全一致（String Number Boolean这种封装型对象没有这样的性质）

如果框架中提供的类也具有这种性质，会是不错的选择。这仅仅是一个例子，如果你注意到了其他细节，并且让框架中的类和原生对象保持一致，对使用者来说是非常有益的。

4.尊重语言 尊重用户

编写框架应该尊重依赖的语言环境，在对原有的元素修改之前，首先应该考虑到原来的合理性，任何语言的原生环境提供的都是经过了精心设计的，在任何修改之前，至少应该考虑这几点：效率、命名规范、必要性、与其他功能是否重复。如果你没有付出至少跟语言的设计者相当的工作量，你的做法就是欠考虑的。

编写框架也应该尊重用户的所有习惯，将编写者的喜好强加给使用者并不是框架应该做的事情。框架应该保证大部分在没有框架环境下能运行的代码都能在框架下正常工作，这样用户不必为了使用你的框架而修改原有的代码。

5.规范命名和使用命名空间

减少命名污染可以让你的框架跟其他框架更好地共存。很多框架使用了命名空间来管理，这是良好的设计。命名应该是清晰且有实际意义的英文单词，如前面3所述，为了保持和原生对象的一致，命名规则最好贴近原生对象，比如类名第一字母大写，方法名用驼峰命名。捎带一提prototype中的$实在是非常糟糕的设计，无法想象$出现的目的仅仅是为了让使用者少写几个字母。这种事情应该交给你的用户在局部代码中使用