有趣javascript,有趣的故事

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整体采用模块化设计，所以可以在它的基础上开发你需要的任何特效。

优点：小块头有大能耐

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

相关问答

Q1: 求js高手解释如下这个有趣的代码：先说xmlns:v是什么情况？然后解释那个不规则的for循环。

var l=0;

while( l-201!=0 ){

if(l-135!=0){

if(l-23!=0) l+=1;

else l+=9;

}esle{

l+=41;

}

document.write( l + 'v:rect style="width:50px; height:50px; behavior:URL(#default#VML);" coordsize="21600, 21600" fillcolor="#' + (Math.random() * 4096).toString(16) + '" O:SpT=' + l + ' onclick="fill.on=0" /');

}

你所说的 "不规则的for循环" 其实非常标准，只是用了两重三元运算符而已。

我把他换成了完全等价的while循环，相信你能理解的、

Q2: 谈谈js点击之后发生了什么

    之所以突然想写这个文章，主要是之前看到一篇有意思的博文， 《探究点击事件在JavaScript事件循环中的表现》 ，有趣的地方在于JS点击事件加入回调的 并不是点击事件的回调方法 ，而是点击事件本身 (点击位置等描述点击的) 。

当我们连续点击 button.a 两次的时候，结果却是

明明是点击的 button.a ，为什么会触发 button.b 的事件？

    无论通过 onclick 还是 addEventListener 实现事件绑定，我怀疑绑定机制是一样的，因为在实际测试中，我发现 onclick 执行顺序和 addEventListener 是一样的，也就是什么时候绑定，那么就在第几个执行。

     addEventListener 和 onclick 不同，不是直接给 dom 绑定属性，并且我在 dom 节点上也没有看到任何相应的对象用于保存事件，可见 addEventListener 是不同的机制，参考 EventEmitter ，试着去实现一个 addEventListener

通过上面分析，总结一下

Q3: 如何创建一个JavaScript弹出DIV窗口层的效果

实现原理：

首先，我们将弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可

见，使用CSS即可实现）。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的

最上层（将使用JS操作实现）。此外，我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。

实现过程：

就如我上面提到的，我们首先需要创建一个特殊的DIV层，然后我们将弹出窗口的内容放在这个DIV层里面。在这里，我们将其ID命名为“popupcontent ”以区别于其他DIV层。

div id="popupcontent"这是一个DIV弹窗效果!/div

弹出窗口的CSS修饰代码：

接

下来，让我们给上面已创建好的这个DIV弹出层进行CSS美化。其中最重要的几个参数分别是：overflow（内容溢出）,

visibility（可见性）

和position（定位方式）。同时我也给这个窗口效果添加了很多其他代码，但这些只是用于美化，使这个窗口更绚丽。所以，我们最后定义的CSS代码形

如：

复制代码 代码如下:

#popupcontent{

position: absolute;

visibility: hidden;

overflow: hidden;

border:1px solid #CCC;

background-color:#F9F9F9;

border:1px solid #333;

padding:5px;

}

从上面CSS代码中的红色部分可以看出：这个DIV层初始默认状态是不可见的。

大家可以根据需要对以上代码进行美化，但请务必保留position，visibility，overflow三个属性。

JavaScript代码用于触发和显示弹出窗口：

这可能是本教程最重要最有趣的地方了。我们接下来会编写2个过程函数分别用于显示和隐藏上面那个DIV弹窗。当然，这两个函数之中会包含一些主体逻辑。

过程函数中需要顺序包含的逻辑：

计算JavaScript弹出窗口在屏幕上的显示位置（定位）；

在弹出窗口中添加一个状态栏（或按钮），用于关闭打开状态下的窗口；

显示弹出窗口。

为了简单起见，本例中我们设置的显示位置是Top：200，Left：200。即以浏览器内容框的左上角为坐标，向下偏移200PX，向左偏移200PX。

弹出窗口的大小我们可以在显示函数的参数中进行设置，包括两个参数：窗口长度和窗口宽度。

如果你需要将本例中的代码进行二次开发，有个地方需要特别注意，那就是获取弹出窗口DIV层的DOM对象，我们可以通过下面这个getElementById函数来获取ID名为“Popcontent”的DOM对象。

Q4: 如何用javascript写碰壁反弹效果

碰壁反弹这个效果真的是挺有趣的，看起来就比较的高大上，而且写碰壁反弹成功后，也就能做些网页小游戏了。虽然这么说，但其实这个效果并不难写。只是坑比较的多，很多工作多年的程序员都可能会陷进去。

废话不多说，我们写起来：

1.CSS文件：

style

body{

border-style: solid;

border-color: sliver;

border-width: 5px;

margin-left: 100px;

width:1000px;

height:800px;

}

#screen{

width:800px;

height:600px;

background-color:#272822;

position:relative;

left:100px;

top:100px;

}

#egg{

width:50px;

height:50px;

background-color:red;

position:relative;

}

/style

2.body内容：

body

div id="screen"

div id="egg"

/div

/div

/body

3.JavaScript脚本：

var eggX=0;

var eggY=0;

var directX=1;

var directY=1;

function test(){

eggX+=directX;

eggY+=directY;

egg.style.left=eggX+"px";

egg.style.top=eggY+"px";

if(eggX+egg.offsetWidth=document.getElementById("screen").clientWidth||eggX=0) {

directX=-directX;

}

if(eggY+egg.offsetHeight=document.getElementById("screen").clientHeight||eggY=0){

directY=-directY;

}

}

setInterval("test()",1);

说明：拷贝代码，我们就能看到一个碰壁反弹的方框了。当然如果想要换成图片，直接将div里的内容换掉就OK了。不过这样似乎太美水准了点，在这附上完整代码（有障碍物的）：

!DOCTYPE html

html

head

meta http-equiv="content-type" content="text/html; charset=UTF-8"

title碰壁反弹/title

style

body{

border-style: solid;

border-color: sliver;

border-width: 5px;

margin-left: 100px;

width:1000px;

height:800px;

}

#screen{

width:800px;

height:600px;

background-color:#272822;

position:relative;

left:100px;

top:100px;

}

#egg{

width:50px;

height:50px;

background-color:red;

position:relative;

}

#cock{

position:relative;

left:200px;

top:200px;

width:200px;

height:30px;

background-color: blue;

cursor: pointer;

}

/style

/head

body

div id="screen"

div id="egg"

/div

div id="cock" onmousedown="startDrag(this)" onmousemove="drag(this)" onmouseup="stopDrag(this)"

/div

/div

/body

script type="text/javascript"

var eggX=0;

var eggY=0;

var directX=1;

var directY=1;

function test(){

eggX+=directX;

eggY+=directY;

egg.style.left=eggX+"px";

egg.style.top=eggY+"px";

if(eggX+egg.offsetWidth=document.getElementById("screen").clientWidth||eggX=0) {

directX=-directX;

}

if(eggY+egg.offsetHeight=document.getElementById("screen").clientHeight||eggY=0){

directY=-directY;

}

if(eggY+egg.offsetHeight=document.getElementById("cock").offsetTop(eggX+egg.offsetWidth=200eggX+egg.offsetWidth=400)){

directY=-directY;

}

if((eggY-30)=document.getElementById("cock").offsetTop(eggX+egg.offsetWidth=200eggX+egg.offsetWidth=400)){

directY=-directY;

}

}

setInterval("test()",1);

/script

/html

Q5: 现在JavaScript可以做哪些有趣的事

你好！

JavaScript的诞生首先就是网页脚本

之后的html api让JavaScript有了操作DOM和渲染DOM的能力，于是可以生成整个网页

苹果又加了料，在webkit component里加入了canvas /，于是js可以绘图

后来微软提出的的ajax和新的H5脚本诞生了SPA的概念，于是有了网页应用

我能画画，我能交互，我要成为高达！于是基于JavaScript的网页游戏如雨后春笋

Ryan Dahl这个人想搞点大事情，“要有服务器”，于是有了 NodeJS

希望我的回答能帮助你！

望采纳谢谢?

祝生活愉快！