首頁 web前端 js教程 javascript框架設計框架分類及主要功能_javascript技巧

javascript框架設計框架分類及主要功能_javascript技巧

May 16, 2016 pm 03:53 PM

從內部架構和理念劃分,目前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走向工業化的標誌,「要編寫複雜軟體有不至於一派塗地的唯一方法,就是定義清晰的接口,把若干模組組合起來,如此一來,多數問題只會出現在局部,那麼還有希望對局部進行改進和優化,而不至於牽動全身。

第五種,就是具有明確的分層架構的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操作。
登入後複製
以上所述就是本文的全部內容了,希望大家能夠喜歡。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何創建和發布自己的JavaScript庫? 如何創建和發布自己的JavaScript庫? Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能? 如何在瀏覽器中優化JavaScript代碼以進行性能? Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼? 如何使用瀏覽器開發人員工具有效調試JavaScript代碼? Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試,專注於設置斷點,使用控制台和分析性能。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何使用源地圖調試縮小JavaScript代碼? 如何使用源地圖調試縮小JavaScript代碼? Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖,設置斷點以及使用Chrome DevTools和WebPack之類的工具。

console.log輸出結果差異:兩次調用為何不同? console.log輸出結果差異:兩次調用為何不同? Apr 04, 2025 pm 05:12 PM

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

See all articles