天天看點

新手教程:您必須了解的15套JavaScript架構與庫

【51cto.com快譯】javascript擁有着龐大的技術社群,而如此可觀的技術支援基礎亦幫助其進一步在閱聽人群體中吸引人氣。值得強調的是,目前面向開發者的大部分架構及庫屬于開源項目,這意味着相關開發人員能夠輕松運用這些資源以高效完成日常工作。是以,無論您身為javascript新手抑或經驗豐富的前輩高人,充分利用這些方案的既有優勢都将顯著提升您的開發效率與效果。

在今天的文章中,我們将介紹15款最為重要的javascript架構與庫——您千萬不要錯過。

1. angular.js

新手教程:您必須了解的15套JavaScript架構與庫

angular.js為目前人氣最高的javascript架構之一。開發者利用其打造出無數複雜的web應用。angular.js的核心設計思路在于單頁面應用模式,但其同時亦支援mvc架構。利用angular.js,開發者能夠在前端使用javascript代碼,進而随意擴充html詞彙。

angular.js自2009年誕生以來一直沒有停止發展的腳步。目前的angular 1穩定處死怕生1.5.8/1.2.30。大家也可以試試angular 2,其較版本1實作顯著提升,不過仍未在全球開發者群體中得到普及。

angular.js采用了資料綁定這一重要概念。使用者利用該接口進行互動,當互動完成後,視圖即随後利用新值進行更新,進而確定全部内容得到同步。dom更新則在底層邏輯于模型中執行完畢之後再開始進行。

2. backbone.js

新手教程:您必須了解的15套JavaScript架構與庫

很多朋友可能并不打算開發複雜的web應用。在這種情況下,backbone.js等相對較為簡單的web應用架構則能夠很好地用于學習相關知識。backbone.js是一套直覺架構,能夠加快簡單web應用的建構并使整個過程充滿樂趣。與angular.js類似,backbone.js同樣具備mvc支援能力。backbone.js的其它核心特性包括路由、restful api支援、屬性狀态管理等等。大家也可以利用backbone.js建構單頁面應用。

backbone.js目前的穩定版本為1.3.3,且可從github處直接擷取。

3. d3.js

新手教程:您必須了解的15套JavaScript架構與庫

d3.js是一套出色的javascript庫,能夠幫助開發者利用資料操作功能建立出富網頁。d3.js結合了svg、html以及css。利用d3.js,大家可以輕松将資料綁定至dom并啟動資料驅動型事件。在d3.js的幫助下,我們也可以建立出高品質資料驅動型網頁,進而以更出色的視覺效果提供資料内容了解資訊。

4. react.js

新手教程:您必須了解的15套JavaScript架構與庫

react.js是一套非常有趣的javascript架構。與其它javascript架構不同,react.js非常适合用于建構高度可擴充性前端使用者界面。react.js誕生于2013年,基于bsd許可并憑借着在開發複雜、美觀使用者界面領域的優勢而得到快速發展。

react.js的核心思路在于虛拟dom。虛拟dom類似于用戶端與伺服器端間的中介,用于提升性能水準。虛拟dom中發生的變更與伺服器dom進行比對,確定僅必要元素得到更新,這就讓整個流程在速度上遠優于傳統ui更新。

大家也可以利用react實作material設計,意味着可以借此打造出極強性能水準的現代web應用。

5. jquery

新手教程:您必須了解的15套JavaScript架構與庫

jquery是一套高人氣javascript庫,其功能包括事件處理、動畫以及更多其它方向。在建構web項目時,大家當然不希望把時間浪費在為簡單任務編寫代碼身上。jquery憑借着其易于使用的api幫助我們解決這項難題。它還能夠與全部主流浏覽器協作。利用jquery,大家可以無縫化控制dom并開發ajax應用。利用jquery,開發者無需擔心底層互動并能夠輕松開發出自己構想中的web應用。

jquery還促進了html與javascript代碼的分離,使得開發者能夠利用跨浏覽器相容性編寫出簡潔的代碼。另外,由jquery開發而成的web應用還易于改進及擴充。

6. ember.js

新手教程:您必須了解的15套JavaScript架構與庫

ember.js在功能性層面相當于angular.js與react.js的結合體。大家可以通過其技術支援社群了解ember.js的極高人氣,新功能亦在不斷出現。ember.js在資料同步方面類似于angular.js。這種雙向資料交換機制能夠確定應用的運作速度及可擴充能力。另外,其還可幫助開發者建立前端元素。

在react.js相似性方面,ember.js同樣提供伺服器端虛拟dom以提升性能及擴充性。ember.js亦鼓勵降低代碼編寫需求,提供出色的api選項并擁有卓越的技術社群。

7. polymer.js

如果大家打算自行建立html5元素,則不妨試試polymer.js。polymer的核心在于為web開發者提供建立自有标簽的能力,進而擴充開發能力。例如,大家可以建立一個〈my_video〉标簽并為其定義與html5内〈video〉元素類似的功能。

polymer由谷歌公司于2013年推出,且基于3-clause bsd許可。

8. three.js

新手教程:您必須了解的15套JavaScript架構與庫

three.js為另一套javascript庫,主要面向3d開發方向。如果大家身為動畫及遊戲開發人員,那麼three.js絕對值得一試。three.js采用webgl并可輕松用于渲染螢幕上的3d對象。大家可能聽說過hexgl這款未來風格的競速遊戲,它就是由three.js打造而成的。

9. phantomjs

新手教程:您必須了解的15套JavaScript架構與庫

使用javascript免不了要跟各種浏覽器打交道。而在談到浏覽器時,資源管理就成了最重要議題。利用phantomjs,大家可以通過其提供的webkit監控web應用性能。此webkit亦屬于chrome及safari内渲染引擎的組成部分。

整個流程以自動化方式實作,大家隻需要利用其提供的api設定web應用即可。

10. babylonjs

新手教程:您必須了解的15套JavaScript架構與庫

babylonjs與three.js在定位上非常相似,皆提供javascript api以建立強大的無縫化3d應用。其開源且立足于javascript與webgl基礎之上。建立球體等簡單3d對象的過程非常簡單,隻需要數行代碼即可完成。大家可以認真參閱babylonjs的說明文檔以了解該庫的卓越之處。另外,項目首頁還提供不少啟發性優秀示範。

11. boba.js

新手教程:您必須了解的15套JavaScript架構與庫

web應用之間存在着一大共通性需求,即分析。如果大家一直在糾結于如何将分析機制插入javascript應用内,那麼不妨考慮boba.js。boba.js能幫助大家輕松完成任務,同時包含對舊有ga.js的支援能力。大家也可以利用boba.js實作名額整合。其惟一的運作前提為jquery。

12. underscore.js

新手教程:您必須了解的15套JavaScript架構與庫

underscore.js可謂空白html編輯器檔案的最佳解決方案。在啟動項目時,很多朋友面對着空空如也的螢幕感到無從下手或者被迫重複之前項目中已經完成過的步驟。underscore.js能夠據此提供多項功能,例如允許使用者利用自己最常用的backbone.js或者jquery功能元素。

另外,其中還提供一些功能幫助機制,包括“過濾”以及“調用圖”,旨在幫助我們盡快進入工作狀态。另外,underscore.js還提供相關套件以簡化測試流程。

13. meteor.js

新手教程:您必須了解的15套JavaScript架構與庫

meteor.js是一種快速高效的javascript應用建構途徑。其為開源項目且可用于面向桌面、移動以及web端建立應用成果。meteor.js是一套全棧架構,可實作多種平台的端到端開發任務。大家可以利用meteor.js建立後端與前端功能,亦可保證應用本身擁有出色的性能表現。meteor.js亦擁有龐大的技術社群,是以新功能與bug修複更新可謂所在多有。另外,meteor.js也天然具備子產品化特性并可配合多種出色的api進行協作。

14. knockout.js

新手教程:您必須了解的15套JavaScript架構與庫

knockout.js顯然是今天提到的所有架構中,最被低估的選項。這套開源javascript架構基于mit許可,且立足于mvvm設計基礎之上。

15.特别推薦: node.js

新手教程:您必須了解的15套JavaScript架構與庫

node.js是一套強大的javascript運作時環境。其可用于配合真實資料建構高速且極具可擴充性的應用程式。其既非架構亦非庫,而是一套基于谷歌chrome javascript v8引擎的運作時環境。大家可以利用node.js建立多樣的應用,包括單頁應用、實時web應用等等。從技術層面講,node.js的事件驅動型架構能夠支援異步i/o,這使其成為開發高擴充性解決方案的理想選項。

總結

javascript已經成為web領域當之無愧的王者。其快速發展态勢除了源自強大的功能與效果,亦受到周邊開源社群的戮力支援。以上提到的各架構與庫絕對值得各位javascript開發人員加以嘗試,您當然也不應該錯過。

本文作者:核子可樂譯

來源:51cto

繼續閱讀