建站
咨詢
售后
建站咨詢
新聞中心
javascript框架是什么意思？有什么作用？怎么理解？最好舉個例子
淺談js框架設計 在這個JavaScript框架隨處亂跑的時代，你是否考慮過寫一個自己的框架？下面的內(nèi)容也許會有點幫助。
成都創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新干企業(yè)提供專業(yè)的網(wǎng)站設計制作、成都網(wǎng)站設計，新干網(wǎng)站改版等技術服務。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
一個框架應該包含哪些內(nèi)容？
1.語言擴展
大部分現(xiàn)有的框架都提供了這部分內(nèi)容，語言擴展應當是以ECMAScript為基礎進行的，不應當依賴任何宿主環(huán)境，也就是說，作為一個框架的設計者，你應當保證你的語言擴展可以工作在任何宿主環(huán)境中，而不是僅僅適合瀏覽器環(huán)境。你必須保證把它放到WScript,SpiderMonkeyShell,Rhino Shell,Adobe ExtendScript Toolkit甚至FlashActionScript等環(huán)境中都能正確的工作，舉個現(xiàn)實一點的例子setTimeout不可以出現(xiàn)在其中，你也不能用XMLHTTP加載腳本運行，盡管它們看起來很貼近語言。保持這一部分的獨立性可以讓你方便的移植你的框架到其他宿主環(huán)境下?！?/p>
2.數(shù)據(jù)結(jié)構和算法
JS本身提供的內(nèi)置對象非常有限，很多時候，框架應該提供一些數(shù)據(jù)結(jié)構和算法來幫助使用者更好的完成邏輯表達。但我認為隨便翻本數(shù)據(jù)結(jié)構或者算法書用JS挑幾個實現(xiàn)了加到框架中是不負責任的，多數(shù)數(shù)據(jù)結(jié)構應當以庫的形式存在而非框架?？蚣苤械臄?shù)據(jù)結(jié)構應該足夠常用而且實現(xiàn)不是非常復雜的，可以考慮的如集合、哈希表、鏈表、有序數(shù)組以及有序數(shù)組上的二分搜索。對JS來說，對象是一個天然的字符串哈希表，而集合很容易在哈希表上實現(xiàn)，因此只需要處理掉Object的內(nèi)置方法，我們就可以實現(xiàn)一個高效的集合或哈希表。
3.DOM擴展
JS主要應用于Web開發(fā)，目前所有的框架也都用于瀏覽器環(huán)境，那么，瀏覽器端環(huán)境里重點中的重點DOM當然也是框架的擴展目標了，如果一個框架不提供DOM的擴展，那么其實基本沒什么用處了。需要注意的是，DOM擴展也有w3c的標準可依，所以，不要嘗試為各種瀏覽器做一些奇怪的擴展，比如FF下面的element們的prototype，框架的編寫者應當無視它們。DOM擴展的主要任務之一是兼容性，不同瀏覽器上的DOM實現(xiàn)相差很多，框架必須消除這些實現(xiàn)帶來的差異，提供統(tǒng)一的訪問方式。當然，做為框架，應當提供一些更為方便的接口，將宿主提供的DOM對象用js對象封裝是個不錯的想法，但是同時這也很可能會造成內(nèi)存泄露，所以做這事之前，了解內(nèi)存泄露是必要的。實際上，自己想象的擴展遠不如W3C的設計，比如如果你能更完整地實現(xiàn)XPath，你就能比JQuery做的更好。
4.AJAX擴展
大部分現(xiàn)有框架出現(xiàn)的原因都是因為AJAX，所以如果你想設計一個受歡迎的框架，AJAX是必須要做的。跟DOM擴展很相似，AJAX擴展的主要任務是兼容和內(nèi)存泄露，對AJAX的核心組件XMLHttpRequest對象，必須在IE6中使用ActiveX創(chuàng)建，而ActiveX又有各種版本，而隨之而來的內(nèi)存泄露和兼容性變得非常麻煩，比如：事件函數(shù)名大小寫、this指向、事件函數(shù)的null賦值。處理好這些兼容性的基礎上，可以做進一步的工作，提供一些常用的實現(xiàn)。應該指出的是，除非你確定你提供的接口比原來的更好，否則不要改變原來的XMLHttpRequest對象的接口，比如寫一個Request函數(shù)來代替open和send，如果你不清楚W3C的專家們?yōu)槭裁催@么設計，請不要把他們想象成傻瓜。我想自己另外寫一個兼容且內(nèi)存安全的XMLHttpRequest加入到自己框架的命名空間里，使它從外部看上去跟W3C描述的XMLHttpRequest一模一樣是不錯的辦法，對XMLHttpRequest我認為唯一可以考慮的修改是提供onsuccess事件。當然針對一些復雜功能的AJAX擴展也是可行的，比如HTMLHttpRequest類似的擴展可以讓AJAX初學者喜歡你的框架。
5.效果
時間效果是最能刺激用戶神經(jīng)的，漸隱、緩動、滑動、顏色漸變這些都很不錯，其實技術難度也不是很高。拖動效果則是瀏覽器中一個很重要的效果，用鼠標事件來模擬本來很容易，不過兼容和setCapture也是很麻煩的事情。這一部分內(nèi)容量力而為就可以了。
7.腳本管理
因為大家非常喜歡C++風格的include或者JAVA風格的import，很多框架提供了基于AJAX的腳本管理，不過同步加載的效率問題是巨大的。之前我們曾經(jīng)作過各種嘗試，希望找到一個瀏覽器中不用XMLHTTP加載外部js的方法，但是最后得出的結(jié)論是：不可能。
關于這個，略微思考就可以知道，Java C++ C#都是編譯型語言，include 和import都是編譯期處理，在js中做到類似的事情是不太可能的。為了實現(xiàn)類似的功能，我想我們可以利用服務端程序或者編寫一個文本工具來實現(xiàn)。
YUI將所有的js文件依賴關系提取出來的做法是可行的，不過這不能算是include的實現(xiàn)方式了，維護依賴關系不是一件很簡單的事情。
8.控件
EXT的成功告訴我們：提供優(yōu)質(zhì)的控件才是框架的王道。你不能指望優(yōu)質(zhì)的擴展會吸引更多使用者。多數(shù)人只關心如何快速完成手邊的工作。當然不是所有框架都要提供這部分內(nèi)容。控件好壞取決于能力和美工，不過至少要保證框架里的控件不會內(nèi)存泄露。
框架設計的若干原則：
1.不要做多余的事
對這框架設計來說，我認為一個非常必要的原則就是不要做多余的事情，舉個極端的的例子：
function add(a,b)
{
return a+b;
}
這樣的代碼如果出現(xiàn)在框架中，就是個十足的笑話。不過大多數(shù)時候，事情不是那么明顯，很多框架試圖用某種形式在JS中"實現(xiàn)"OOP，但是實際上，JS本身是OO的（ECMA262中明確指出來的，不像某些人所說是基于對象云云）只是有一些語法跟Java等語言不同。那么顯然這些OOP的"實現(xiàn)"其實是跟上面的例子一樣的道理。另一個例子是Array.prototype.clone
Array.prototype.clone=function(){
return this.slice();
}
2.慎用prototype擴展
很多框架利用修改原生對象的prototype來做語言擴展，但我認為應當小心地看待這件事，毫無疑問這將造成一定的命名污染，你無法保證框架的使用者或者與你的框架共存的其他框架不會使用同樣的名字來完成其他的事情。特別需要注意的是，Object和Array這兩個對象的prototype擴展格外的危險，對Object來說，如果Object被修改，那么框架的使用者將無法創(chuàng)建一個未被修改的干凈的對象，這是一個致命的問題，尤其如果你的使用者喜歡用forin來反射一個對象的屬性。Array.prototype修改的危險來自js一個不知有意還是無意的小小設計，對原生的Array來說，任何情況下for和forin的遍歷結(jié)果是相同的，而因為無法控制自定義的屬性是不可枚舉的，任何Array.prototype的修改都會破壞這種特性。一方面，我認為不應當推薦用forin遍歷數(shù)組，這其中包含著錯誤的語義。另一方面，框架的設計者必須尊重這些使用者，因為對于ECMA所定義的語法而言，它是正確的做法。其中包含著這樣一個簡單的事實：假如你的框架中修改了Array.prototype，那么一些之前能正確工作的代碼變得不可正確工作。
直接修改prototype看上去非常誘人，但是在考慮它之前應當先考慮兩種可能的方案：
(1)函數(shù)
提供一個以對象為第一個參數(shù)的函數(shù)比如 Array.prototype.each =
function ForEach(arr,f)
{
if(arr instanceof Array)/*...*/;
}
(2)繼承
以return的形式繼承一個內(nèi)置對象 比如考慮Array.prototype.each=
function ArrayCollection()
{
var r=Array.apply(this,arguments);
r.each=function(){/*......*/};
return r;
}
套用一句名言，不要修改原生對象的prototype，除非你認為必要。不過修改原生對象的prototype確實有一些特殊的用途（就是"必要的情況"），主要體現(xiàn)在2點：文字量支持和鏈式表達。舉一個例子可以體現(xiàn)這兩點：
var cf=function f(a,b,c,d)
{
/*........*/
}.$curry(3,4).$curry(5).$run();
如果希望實現(xiàn)類似上面的表達方式，可能就需要擴展Function.prototype，權衡一下的話，如果你認為命名污染的代價是值得的，那么也是可以提供給使用者的。
一個比較討巧的辦法是把選擇權利交給使用者，提供一個擴展器：
function FunctionExtend()
{
this.$curry=function(){/*......*/};
this.$run=function(){/*......*/};
}
如果用戶喜歡可以FunctionExtend.apply(Function.prototype); 如果不喜歡擴展 則可以
var r=function(){/*......*/};
FunctionExtend.apply(r);
3.保持和原生對象的一致
不知你有沒有注意到，內(nèi)置對象Function Array等都有這樣的性質(zhì)：
new Function()跟Function的結(jié)果完全一致（String Number Boolean這種封裝型對象沒有這樣的性質(zhì)）
如果框架中提供的類也具有這種性質(zhì)，會是不錯的選擇。這僅僅是一個例子，如果你注意到了其他細節(jié)，并且讓框架中的類和原生對象保持一致，對使用者來說是非常有益的。
4.尊重語言 尊重用戶
編寫框架應該尊重依賴的語言環(huán)境，在對原有的元素修改之前，首先應該考慮到原來的合理性，任何語言的原生環(huán)境提供的都是經(jīng)過了精心設計的，在任何修改之前，至少應該考慮這幾點：效率、命名規(guī)范、必要性、與其他功能是否重復。如果你沒有付出至少跟語言的設計者相當?shù)墓ぷ髁?，你的做法就是欠考慮的。
編寫框架也應該尊重用戶的所有習慣，將編寫者的喜好強加給使用者并不是框架應該做的事情。框架應該保證大部分在沒有框架環(huán)境下能運行的代碼都能在框架下正常工作，這樣用戶不必為了使用你的框架而修改原有的代碼。
5.規(guī)范命名和使用命名空間
減少命名污染可以讓你的框架跟其他框架更好地共存。很多框架使用了命名空間來管理，這是良好的設計。命名應該是清晰且有實際意義的英文單詞，如前面3所述，為了保持和原生對象的一致，命名規(guī)則最好貼近原生對象，比如類名第一字母大寫，方法名用駝峰命名。捎帶一提prototype中的$實在是非常糟糕的設計，無法想象$出現(xiàn)的目的僅僅是為了讓使用者少寫幾個字母。這種事情應該交給你的用戶在局部代碼中使用
《JavaScript框架設計》epub下載在線閱讀全文，求百度網(wǎng)盤云資源
《JavaScript框架設計》（司徒正美）電子書網(wǎng)盤下載免費在線閱讀
鏈接：
提取碼：mxjm ?
書名：JavaScript框架設計
豆瓣評分：7.8
作者:?司徒正美
出版社:?人民郵電出版社
出版年:?2014-4-9
頁數(shù):?445
內(nèi)容簡介
《JavaScript框架設計》是一本全面講解JavaScript框架設計的圖書，詳細地講解了設計框架需要具備的知識，主要包括的內(nèi)容為：框架與庫、JavaScript框架分類、JavaScript框架的主要功能、種子模塊、模塊加載系統(tǒng)、語言模塊、瀏覽器嗅探與特征偵測、樣式的支持偵測、類工廠、JavaScript對類的支撐、選擇器引擎、瀏覽器內(nèi)置的尋找元素的方法、節(jié)點模塊、一些有趣的元素節(jié)點、數(shù)據(jù)緩存系統(tǒng)、樣式模塊、個別樣式的特殊處理、屬性模塊、jQuery的屬性系統(tǒng)、事件系統(tǒng)、異步處理、JavaScript異步處理的前景、數(shù)據(jù)交互模塊、一個完整的Ajax實現(xiàn)、動畫引擎、API的設計、插件化、當前主流MVVM框架介紹、監(jiān)控數(shù)組與子模板等。
作者簡介
鐘欽成 網(wǎng)名司徒正美，著名的JavaScript專家，立志做考古學家的日語系工程師，穿梭于二次元與二進制間的“魔法師”，做過陶藝，寫過小說，涉獵Java、Ruby、 JavaScript，3年成就此書！
什么是js框架？
Javascript框架是指以Javascript語言為基礎搭建的編程框架。
JavaScript框架如今正融入到屬于自己的Web和移動應用程序中，構建后端API和豐富的前臺客戶端是一大趨勢，而這些又多由JavaScript框架編寫而成。
在開發(fā)前臺界面時應用API，便會更加熟悉API，也會對工作內(nèi)容了如指掌，當應用該項技術編寫客戶端，編寫頂級iPhone或者Android應用程序就會變得非常容易。
在JavaScript框架出現(xiàn)之前，開發(fā)人員只能在頁面上進行jQuery操作。這種方式很容易引起開發(fā)人員對編碼操作的困惑，而且也不易管理。
Backbone是最初的領跑者，提供了一個基本的結(jié)構和組織以及開發(fā)者友好的框架，如Angular和Ember。
擴展資料：
javascript的特點：
1、一種解釋性執(zhí)行的腳本語言。
同其他腳本語言一樣，javascript也是一種解釋性語言，其提供了一個非常方便的開發(fā)過程。
2、一種基于對象的腳本語言。
其也被看作是一種面向?qū)ο蟮恼Z言，這意味著javascript能運用其已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的開發(fā)方法 與腳本的相互作用。
3、一種簡單弱類型腳本語言。
javascript是一種基于java基本語句和控制流之上的簡單而緊湊的設計，從而對于使用者學習java或其他c語系的編程語言是一種非常好的過渡。
4、一種相對安全腳本語言。
javascript作為一種安全性語言，不被允許訪問本地的硬盤，不允許對網(wǎng)絡文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失或?qū)ο到y(tǒng)開發(fā)的非法訪問。
參考資料來源：百度百科-JavaScript框架
javascript框架有哪些
目前來看，JS框架以及一些開發(fā)包和庫類有如下幾個，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx
Dojo （JS library and UI component ）：
Dojo是目前最為強大的j s框架，它在自己的Wiki上給自己下了一個定義，dojo是一個用JavaScript編寫的開源的DHTML工具箱。dojo很想做一個“大一統(tǒng)”的 工具箱，不僅僅是瀏覽器層面的，野心還是很大的。Dojo包括ajax, browser, event, widget等跨瀏覽器API，包括了JS本身的語言擴展，以及各個方面的工具類庫，和比較完善的UI組件庫，也被廣泛 應用在很多項目中，他的UI組件的特點是通過給html標簽增加tag的方式進行擴展，而不是通過寫JS來生成，dojo的API模仿Java類庫的組織 方式。 用dojo寫Web OS可謂非常方便。dojo現(xiàn)在已經(jīng)4.0了，dojo強大的地方在于界面和特效的封裝，可以讓開發(fā)者快速構建一些兼容標準的界面。
優(yōu)點：庫相當完善，發(fā)展時間也比較長，功能強大，據(jù)說利用dojo的io.bind()可以實現(xiàn)comet，看見其功能強大非一般，得到IBM和SUN的支持
缺點：文件體積比較大，200多KB，初次下載相當慢，此外，dojo的類庫使用顯得不是那么易用，j s語法增強方面不如prototype。
Prototype （JS OO library）：
是一個非常優(yōu)雅的JS庫，定義了JS的面向?qū)ο髷U展，DOM操作API，事件等等，以prototype為核心，形成了一個外圍的各種各樣 的JS擴展庫，是相當有前途的JS底層框架，值得推薦，感覺也是現(xiàn)實中應用最廣的庫類（RoR集成的AJAX JS庫），之上還有 Scriptaculous 實現(xiàn)一些JS組件功能和效果。
優(yōu)點：基本底層，易學易用，甚至是其他一些js特效開發(fā)包的底層，體積算是最小的了。
缺點：如果說缺點，可能就是功能是他的弱項
Scriptaculous （JS UI component based on prototype）：
Scriptaculous是基于prototype.js框架的JS效果。包含了6個js文件，不同的文件對應不同的js效果，所以說，如果底層用 prototype的話，做js效果用Scriptaculous那是再合適不過的了，連大名鼎鼎的digg都在用他，可見不一般
優(yōu)點：基于prototype是最大的優(yōu)點，由于使用prototype的廣泛性，無疑對用戶書錦上添花，并且在《ajax in action》中就拿Scriptaculous來講述js效果
缺點：剛剛興起，需要時間的磨練
yui-ext (JS UI component)：
基于Yahoo UI的擴展包yui-ext是具有CS風格的Web用戶界面組件 能實現(xiàn)復雜的Layout布局，界面效果可以和backbase媲美，而且使用純javascript代碼開發(fā)。真正的可編輯的表格Edit Grid，支持XML和Json數(shù)據(jù)類型，直接可以遷入grid。許多組件實現(xiàn)了對數(shù)據(jù)源的支持，例如動態(tài)的布局，可編輯的表格控件，動態(tài)加載的Tree 控件、動態(tài)拖拽效果等等。1.0 beta版開始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。
優(yōu)點：結(jié)構化，類似于java的結(jié)構，清晰明了，底層用到了Jquery的一些函數(shù)，使整合使用有了選擇，最重要的一點是界面太讓讓人震撼了。
缺點：太過復雜，整個界面的構造過于復雜。
Jquery ：
jQuery是一款同prototype一樣優(yōu)秀js開發(fā)庫類，特別是對css和XPath的支持，使我們寫js變得更加方便！如果你不是個js高手又想寫出優(yōu) 秀的js效果，jQuery可以幫你達到目的！并且簡介的語法和高的效率一直是jQuery追求的目標，
優(yōu)點：注重簡介和高效，js效果有yui-ext的選擇，因為yui-ext 重用了很多jQuery的函數(shù)
缺點：據(jù)說太嫩，歷史不悠久。
Mochikit ：
MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標準庫提供的很多便利之處的啟發(fā)，另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便，能夠以比原始 JavaScript 更友好的方式處理 DOM 對象。MochiKit.DOM 大部分都是針對 XHTML 文檔定制的，如果與 MochiKit 和 Ajax 結(jié)合在一起，使用 XHTML 包裝的微格式尤其方便。Mochikit可以直接對字符串或者數(shù)字格式化輸出，比較實用和方便。它還有自己的 js 代碼解釋器
優(yōu)點：MochiKit.DOM這部分很實用，簡介也是很突出的
缺點：輕量級的缺點
mootools ：
MooTools是一個簡潔，模塊化，面向?qū)ο蟮腏avaScript框架。它能夠幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools跟prototypejs相類似，語法幾乎一樣。但它提供的功能要比prototypejs多，而且更強大。比如增加了動畫特效、拖放操作等等。
優(yōu)點：可以定制自己所需要的功能，可以說是prototypejs的增強版。
缺點：不大不小，具體應用具體分析
moo.fx ：
moo.fx是一個超級輕量級的javascript特效庫（7k）,能夠與prototype.js或mootools框架一起使用。它非?？?、易于使用、跨瀏覽器、符合標準，提供控制和修改任何HTML元素的CSS屬性，包括顏色。它內(nèi)置檢查器能夠防止用戶通過多次或瘋狂點擊來破壞效果。moo.fx整體采用模塊化設計，所以可以在它的基礎上開發(fā)你需要的任何特效。
優(yōu)點：小塊頭有大能耐
缺點：這么小了，已經(jīng)不錯了
新聞標題：windows系統(tǒng)清道夫的簡單介紹
轉(zhuǎn)載來源：http://www.dlmjj.cn/article/dsighdh.html
