javascript框架有哪些

目前來(lái)看，JS框架以及一些開(kāi)發(fā)包和庫(kù)類(lèi)有如下幾個(gè)，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)橋西免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Dojo （JS library and UI component ）：

Dojo是目前最為強(qiáng)大的j s框架，它在自己的Wiki上給自己下了一個(gè)定義，dojo是一個(gè)用JavaScript編寫(xiě)的開(kāi)源的DHTML工具箱。dojo很想做一個(gè)“大一統(tǒng)”的 工具箱，不僅僅是瀏覽器層面的，野心還是很大的。Dojo包括ajax, browser, event, widget等跨瀏覽器API，包括了JS本身的語(yǔ)言擴(kuò)展，以及各個(gè)方面的工具類(lèi)庫(kù)，和比較完善的UI組件庫(kù)，也被廣泛 應(yīng)用在很多項(xiàng)目中，他的UI組件的特點(diǎn)是通過(guò)給html標(biāo)簽增加tag的方式進(jìn)行擴(kuò)展，而不是通過(guò)寫(xiě)JS來(lái)生成，dojo的API模仿Java類(lèi)庫(kù)的組織 方式。 用dojo寫(xiě)Web OS可謂非常方便。dojo現(xiàn)在已經(jīng)4.0了，dojo強(qiáng)大的地方在于界面和特效的封裝，可以讓開(kāi)發(fā)者快速構(gòu)建一些兼容標(biāo)準(zhǔn)的界面。

優(yōu)點(diǎn)：庫(kù)相當(dāng)完善，發(fā)展時(shí)間也比較長(zhǎng)，功能強(qiáng)大，據(jù)說(shuō)利用dojo的io.bind()可以實(shí)現(xiàn)comet，看見(jiàn)其功能強(qiáng)大非一般，得到IBM和SUN的支持

缺點(diǎn)：文件體積比較大，200多KB，初次下載相當(dāng)慢，此外，dojo的類(lèi)庫(kù)使用顯得不是那么易用，j s語(yǔ)法增強(qiáng)方面不如prototype。

Prototype （JS OO library）：

是一個(gè)非常優(yōu)雅的JS庫(kù)，定義了JS的面向?qū)ο髷U(kuò)展，DOM操作API，事件等等，以prototype為核心，形成了一個(gè)外圍的各種各樣 的JS擴(kuò)展庫(kù)，是相當(dāng)有前途的JS底層框架，值得推薦，感覺(jué)也是現(xiàn)實(shí)中應(yīng)用最廣的庫(kù)類(lèi)（RoR集成的AJAX JS庫(kù)），之上還有 Scriptaculous 實(shí)現(xiàn)一些JS組件功能和效果。

優(yōu)點(diǎn)：基本底層，易學(xué)易用，甚至是其他一些js特效開(kāi)發(fā)包的底層，體積算是最小的了。

缺點(diǎn)：如果說(shuō)缺點(diǎn)，可能就是功能是他的弱項(xiàng)

Scriptaculous （JS UI component based on prototype）：

Scriptaculous是基于prototype.js框架的JS效果。包含了6個(gè)js文件，不同的文件對(duì)應(yīng)不同的js效果，所以說(shuō)，如果底層用 prototype的話(huà)，做js效果用Scriptaculous那是再合適不過(guò)的了，連大名鼎鼎的digg都在用他，可見(jiàn)不一般

優(yōu)點(diǎn)：基于prototype是最大的優(yōu)點(diǎn)，由于使用prototype的廣泛性，無(wú)疑對(duì)用戶(hù)書(shū)錦上添花，并且在《ajax in action》中就拿Scriptaculous來(lái)講述js效果

缺點(diǎn)：剛剛興起，需要時(shí)間的磨練

yui-ext (JS UI component)：

基于Yahoo UI的擴(kuò)展包yui-ext是具有CS風(fēng)格的Web用戶(hù)界面組件 能實(shí)現(xiàn)復(fù)雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開(kāi)發(fā)。真正的可編輯的表格Edit Grid，支持XML和Json數(shù)據(jù)類(lèi)型，直接可以遷入grid。許多組件實(shí)現(xiàn)了對(duì)數(shù)據(jù)源的支持，例如動(dòng)態(tài)的布局，可編輯的表格控件，動(dòng)態(tài)加載的Tree 控件、動(dòng)態(tài)拖拽效果等等。1.0 beta版開(kāi)始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。

優(yōu)點(diǎn)：結(jié)構(gòu)化，類(lèi)似于java的結(jié)構(gòu)，清晰明了，底層用到了Jquery的一些函數(shù)，使整合使用有了選擇，最重要的一點(diǎn)是界面太讓讓人震撼了。

缺點(diǎn)：太過(guò)復(fù)雜，整個(gè)界面的構(gòu)造過(guò)于復(fù)雜。

Jquery ：

jQuery是一款同prototype一樣優(yōu)秀js開(kāi)發(fā)庫(kù)類(lèi)，特別是對(duì)css和XPath的支持，使我們寫(xiě)js變得更加方便！如果你不是個(gè)js高手又想寫(xiě)出優(yōu) 秀的js效果，jQuery可以幫你達(dá)到目的！并且簡(jiǎn)介的語(yǔ)法和高的效率一直是jQuery追求的目標(biāo)，

優(yōu)點(diǎn)：注重簡(jiǎn)介和高效，js效果有yui-ext的選擇，因?yàn)閥ui-ext 重用了很多jQuery的函數(shù)

缺點(diǎn)：據(jù)說(shuō)太嫩，歷史不悠久。

Mochikit ：

MochiKit自稱(chēng)為一個(gè)輕量級(jí)的js框架。MochiKit 主要受到 Python 和 Python 標(biāo)準(zhǔn)庫(kù)提供的很多便利之處的啟發(fā)，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對(duì)象。MochiKit.DOM 大部分都是針對(duì) XHTML 文檔定制的，如果與 MochiKit 和 Ajax 結(jié)合在一起，使用 XHTML 包裝的微格式尤其方便。Mochikit可以直接對(duì)字符串或者數(shù)字格式化輸出，比較實(shí)用和方便。它還有自己的 js 代碼解釋器

優(yōu)點(diǎn)：MochiKit.DOM這部分很實(shí)用，簡(jiǎn)介也是很突出的

缺點(diǎn)：輕量級(jí)的缺點(diǎn)

mootools ：

MooTools是一個(gè)簡(jiǎn)潔，模塊化，面向?qū)ο蟮腏avaScript框架。它能夠幫助你更快，更簡(jiǎn)單地編寫(xiě)可擴(kuò)展和兼容性強(qiáng)的JavaScript代碼。Mootools跟prototypejs相類(lèi)似，語(yǔ)法幾乎一樣。但它提供的功能要比prototypejs多，而且更強(qiáng)大。比如增加了動(dòng)畫(huà)特效、拖放操作等等。

優(yōu)點(diǎn)：可以定制自己所需要的功能，可以說(shuō)是prototypejs的增強(qiáng)版。

缺點(diǎn)：不大不小，具體應(yīng)用具體分析

moo.fx ：

moo.fx是一個(gè)超級(jí)輕量級(jí)的javascript特效庫(kù)（7k）,能夠與prototype.js或mootools框架一起使用。它非?？臁⒁子谑褂?、跨瀏覽器、符合標(biāo)準(zhǔn)，提供控制和修改任何HTML元素的CSS屬性，包括顏色。它內(nèi)置檢查器能夠防止用戶(hù)通過(guò)多次或瘋狂點(diǎn)擊來(lái)破壞效果。moo.fx整體采用模塊化設(shè)計(jì)，所以可以在它的基礎(chǔ)上開(kāi)發(fā)你需要的任何特效。

優(yōu)點(diǎn)：小塊頭有大能耐

缺點(diǎn)：這么小了，已經(jīng)不錯(cuò)了

如何用javascript寫(xiě)碰壁反彈效果

碰壁反彈這個(gè)效果真的是挺有趣的，看起來(lái)就比較的高大上，而且寫(xiě)碰壁反彈成功后，也就能做些網(wǎng)頁(yè)小游戲了。雖然這么說(shuō)，但其實(shí)這個(gè)效果并不難寫(xiě)。只是坑比較的多，很多工作多年的程序員都可能會(huì)陷進(jìn)去。

廢話(huà)不多說(shuō)，我們寫(xiě)起來(lái)：

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內(nèi)容：

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);

說(shuō)明：拷貝代碼，我們就能看到一個(gè)碰壁反彈的方框了。當(dāng)然如果想要換成圖片，直接將div里的內(nèi)容換掉就OK了。不過(guò)這樣似乎太美水準(zhǔn)了點(diǎn)，在這附上完整代碼（有障礙物的）：

!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

現(xiàn)在JavaScript可以做哪些有趣的事

你好！

JavaScript的誕生首先就是網(wǎng)頁(yè)腳本

之后的html api讓JavaScript有了操作DOM和渲染DOM的能力，于是可以生成整個(gè)網(wǎng)頁(yè)

蘋(píng)果又加了料，在webkit component里加入了canvas /，于是js可以繪圖

后來(lái)微軟提出的的ajax和新的H5腳本誕生了SPA的概念，于是有了網(wǎng)頁(yè)應(yīng)用

我能畫(huà)畫(huà)，我能交互，我要成為高達(dá)！于是基于JavaScript的網(wǎng)頁(yè)游戲如雨后春筍

Ryan Dahl這個(gè)人想搞點(diǎn)大事情，“要有服務(wù)器”，于是有了 NodeJS

希望我的回答能幫助你！

望采納謝謝????

祝生活愉快！