建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要描述現(xiàn)今流行的一些 Javascript web 前端框架，庫(kù)以及它們的適用場(chǎng)景。
專注于為中小企業(yè)提供網(wǎng)站制作、做網(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è)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
新的 Javascript 庫(kù)層出不窮，從而Web 社區(qū)愈發(fā)活躍、多樣、在多方面快速發(fā)展。詳細(xì)去描述每一種主流的 Javascript 框架和庫(kù)近乎不可能，所以在這篇文章中主要介紹一些對(duì)前端發(fā)展***影響力的前端框架。接下來讓我們來共同研究一些主流前端框架、庫(kù)和工具，并討論它們的適 用場(chǎng)景。
同時(shí)：
如果該篇文章沒有包含你喜歡的 Javascript 框架，勿噴
在使用前端框架進(jìn)行開發(fā)時(shí)，建議保持版本更新。***版本的一般都會(huì)提供給更好的跨瀏覽器，跨平臺(tái)效果。 需檢測(cè)某個(gè)框架的舊版本是否對(duì)各種瀏覽器以及設(shè)備的兼容，請(qǐng)使用 類似這個(gè)掃描器 的工具
準(zhǔn)備好了吧，那么接下來逐個(gè)討論它們。
AngularJS
Angular 是一款流行的企業(yè)級(jí) 框架，很多程序員都用它來構(gòu)建和維護(hù)復(fù)雜的網(wǎng)頁(yè)應(yīng)用。Angular 擁有巨大的人氣，使用它的公司跟 Domino 的 Pizza 種類一樣多，如 Ryanair, iTunes Connect, PayPal Checkout, Google。Angular 是一個(gè)由 Google 支持的開源框架。Angular 稱自己為構(gòu)建復(fù)雜網(wǎng)頁(yè)應(yīng)用而對(duì) HTML 的擴(kuò)展。如果你也對(duì) TypeScript 很熟悉，那么可以看看 怎樣寫 Angular 2 .
Angular 采用 MVC 架構(gòu)。它提供了 Model 層和 View 層之間雙重?cái)?shù)據(jù)綁定。這種數(shù)據(jù)綁定方式的好處是不管哪邊數(shù)據(jù)改變，都會(huì)自動(dòng)的更新兩邊的數(shù)據(jù)。這有助于你構(gòu)建可服用的 View 組件。它還提供了一個(gè)前后端服務(wù)易于交互的服務(wù)框架。最重要的是，它是簡(jiǎn)單的 JavaScript。
什么時(shí)候使用 AngularJS? 當(dāng)你構(gòu)建一個(gè)復(fù)雜的網(wǎng)頁(yè)前端應(yīng)用并需要一個(gè)單獨(dú)的模塊框架去處理一切時(shí)。
GitHub: https://github.com/angular/angular.js
Current Version:1.4.7/1.2.29
Website: angularjs.org
React 是今年***的 JavaScript 項(xiàng)目！幾乎人人都在談?wù)?ReactJS。去年，我參加的每一個(gè)會(huì)幾乎都會(huì)有一兩個(gè)話題探討 React 和相同體系下的其它庫(kù)( Flux ， Redux ) 。React 是一個(gè)開源項(xiàng)目，幾乎是由 Fackbook 和其它主要的技術(shù)公司貢獻(xiàn)開發(fā)的。React 稱自己為為構(gòu)建用戶接口而提供的 JavaScript 庫(kù)。
React 基本上用來作為 MVC 中的 V。它完全專注于 MVC 中的 V 部分，而忽略了應(yīng)用中的其它部分架構(gòu)。它提供了一個(gè)組件層，這讓我們易于制作UI元素并將這些UI元素組合在一起。它抽象出了DOM，因此而優(yōu)化了渲染， 并允許你使用 node.js 渲染 React。另外，它實(shí)現(xiàn)了單向數(shù)據(jù)交互流，這使它比其它的框架更易于理解和使用。
多個(gè)項(xiàng)目例如 Angular ，Ember 綁定使用 React 成為 MVC 中的 V。
什么時(shí)候使用 React？當(dāng)你想要有一個(gè)強(qiáng)大的 View 層，而應(yīng)用中的其它部分缺不需要一個(gè)復(fù)雜的框架時(shí)，或當(dāng)你想要一個(gè) View 層和你的 Angular， Backbone，或者 Ember應(yīng)用一起使用。當(dāng)你試著構(gòu)建一個(gè)同構(gòu)的網(wǎng)頁(yè)框架。
GitHub: https://github.com/facebook/react
目前版本:v0.14.0
網(wǎng)址: Facebook.github.io/react/
Backbone
Backbone 是 一個(gè)出名的精簡(jiǎn)的框架，所有內(nèi)容都可以放到一個(gè)單一的文件里。Backbone 已經(jīng)流行了一段時(shí)間，其作者是 Jeremy Ashkenas，曾經(jīng)由于開發(fā)了 CoffeeScript 和 Underscore 而為大家所知。Backbone 特別適用于需要開發(fā)的 web 程序不大的那些團(tuán)隊(duì)，他們希望能使用小巧的框架，而不是像 Angular 或者 Ember 這樣的大型框架。
Backbone 提供了全功能的 MVC 框架和路由。它的 Model 可以實(shí)現(xiàn) key-value 綁定和數(shù)據(jù)更新的事件處理。Model(及 Collection)可以與 RESTful 的 API 協(xié)同工作。View 可以聲明事件處理，Router 在 URL 處理和狀態(tài)管理方面做的很好。對(duì)于開發(fā)一個(gè)單頁(yè)面應(yīng)用，所有需要的功能都可以支持，不需要額外引入不需要的復(fù)雜性。
何時(shí)使用 Backbone?對(duì)于小型的 web 程序，Backbone 是我必選的框架。
GitHub: https://github.com/jashkenas/backbone/
當(dāng)前版本:1.2.3
官方網(wǎng)站: backbonejs.org
Ember 作為一個(gè) web應(yīng)用框架，非常專注于程序員的效率上。Ember 相對(duì)比較流行，核心團(tuán)隊(duì)有不少很聰明的成員，包括 Yehuda Katz，他是 Ruby on Rails 和 jQuery 的核心團(tuán)隊(duì)的成員。Ember 對(duì)自己的定位是“一個(gè)用來創(chuàng)建震撼的 web 應(yīng)用的框架”，它也確實(shí)不會(huì)浪費(fèi)你的時(shí)間。它在這方面非常專注，為你提供很多的選擇。
Ember 同樣也是一個(gè) MVC 的框架。它包含一個(gè)模板和視圖引擎，在數(shù)據(jù)更新時(shí)可以自動(dòng)更新，這方面與Angular, Backbone, 和 React 類似。它還有一個(gè) web 組件 的概念，允許你用自己的標(biāo)簽擴(kuò)展HTML，(如Angular)。它還有一個(gè)路由及 model 引擎，可以與 RESTful API 一起工作的很好。
何時(shí)使用 Ember?適用于你需要一個(gè)框架馬上就能使用。對(duì)靈活性要求不高的時(shí)候可以選擇 Ember，因?yàn)槟阃ǔＪ穷A(yù)算緊張或者工期緊張。
GitHub: https://github.com/emberjs/ember.js
當(dāng)前版本:2.1.0
官方網(wǎng)站: emberjs.com
JQuery 這個(gè)庫(kù)就不用多做介紹了。它獨(dú)立承擔(dān)了讓跨瀏覽器網(wǎng)站成為現(xiàn)實(shí)的重任，是它使得整個(gè) web 成為今天這個(gè)樣子。Web 標(biāo)準(zhǔn)的制定以及瀏覽器廠家對(duì)標(biāo)準(zhǔn)的接受方面，jQuery 功不可沒。jQuery 基金會(huì)的目標(biāo)是"通過開源軟件的開發(fā)和支持，以及社區(qū)的協(xié)作，增進(jìn)開放的網(wǎng)絡(luò)，讓每個(gè)人都能訪問"
JQuery 是世界上應(yīng)用最廣的 JavaScript 庫(kù)，沒有應(yīng)用可以離開它，除非你對(duì)開發(fā)效率不感興趣。它使得 DOM 遍歷、事件處理、動(dòng)畫和 AJAX 在所有瀏覽器上都變得如此的簡(jiǎn)單易用。
何時(shí)使用 jQuery?任何時(shí)候，除非你打算使用更輕量級(jí)的版本，例如 Zepto 。
GitHub: https://github.com/jquery/jquery
當(dāng)前版本：v1.11.3 或 v2.1.4
官方網(wǎng)站: jquery.com
Underscore 和 lodash
有時(shí)內(nèi)置的 JavaScript 對(duì)于讓程序員真正的有生產(chǎn)力還遠(yuǎn)遠(yuǎn)不夠。總是會(huì)缺了一個(gè)工具函數(shù)，又或者是一個(gè)能簡(jiǎn)化代碼的函數(shù)。Underscore (還有 lodash) 就是這樣的一個(gè) JavaScript 庫(kù)，它提供了一整套工具函數(shù)，無(wú)需經(jīng)驗(yàn)不足的程序員再去給內(nèi)置的 JavaScript 對(duì)象打補(bǔ)丁。兩個(gè)庫(kù)都提供了超過 100 個(gè)輔助函數(shù)，還有其它特別的好東西；包括了像 map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone 等等這些函數(shù)。
什么時(shí)候使用 Underscore?當(dāng)你想要擁有一個(gè)立即能增強(qiáng)程序員效率的 JavaScript 文件時(shí)。
Underscore GitHub : https://github.com/jashkenas/underscore
Underscore 當(dāng)前版本:1.8.3
Underscore 網(wǎng)站: underscorejs.org
什么時(shí)候使用 lodash?當(dāng)你想要一個(gè)模塊化的，性能更好好一點(diǎn)的，并附帶有對(duì)于 AMD 和社區(qū)插件支持的 Underscore 版本時(shí)。
Lodash GitHub: https://github.com/lodash/lodash
Lodash 當(dāng)前的版本:v3.10.1
Lodash 網(wǎng)站: lodash.com
D3.js
數(shù)據(jù)可視化和圖表是web應(yīng)用程序的一種常規(guī)需求。當(dāng)涉及到任何數(shù)據(jù)操作和可視化時(shí)，D3.js 就是事實(shí)上的標(biāo)準(zhǔn)。它是 GitHub 上***的項(xiàng)目之一，并被數(shù)百個(gè)組織機(jī)構(gòu)所采用。大量的圖形、圖標(biāo)和可視化庫(kù)都是構(gòu)件于 D3 之上的。
D3 讓你可以操作任何來源的數(shù)據(jù)文檔，并將數(shù)據(jù)進(jìn)行轉(zhuǎn)換后應(yīng)用到 DOM、SVG 和 CSS上。D3 專注于現(xiàn)代的 web 標(biāo)準(zhǔn)，以及確保你可以不受到任何像 Flash 或者 Silverlight 這樣的專有格式的限制。
什么時(shí)候使用 D3.js?當(dāng)你需要任何類型的視覺效果的時(shí)候。
GitHub: https://github.com/mbostock/d3
當(dāng)前版本:3.5.6
網(wǎng)站: d3js.org
Babylon.js
想要構(gòu)建一個(gè)完全運(yùn)行于現(xiàn)代瀏覽器上，并且能跨瀏覽器運(yùn)行的視頻游戲嗎？那就看看 Babylon.js 吧，它是一個(gè) 3D 游戲引擎，基于 WebGL 和 JavaScript。你可以使用其物理、音頻和粒子系統(tǒng)創(chuàng)造出超乎預(yù)期的高質(zhì)量游戲來。
什么時(shí)候使用 Babylon.js?當(dāng)你正在構(gòu)建一個(gè)視頻游戲或者一個(gè)某種類型的 3D 場(chǎng)景時(shí)。
GitHub: https://github.com/BabylonJS/Babylon.js
當(dāng)前版本: 2.2
網(wǎng)站: babylonjs.com
Three.js
想要構(gòu)建一個(gè) 3D 視覺特效，但是又不需要一個(gè)功能完整的游戲？Three.js 提供了一個(gè)輕量級(jí)的 3D 庫(kù)，讓你可以將 3D 效果渲染成一個(gè) HTML5 的 canvas, SVG, 和 WebGL。這是一個(gè)詳單簡(jiǎn)單的庫(kù)，在 three.js 陳列站點(diǎn)上可以看到數(shù)百個(gè)漂亮的示例。
什么時(shí)候使用 Three.js?當(dāng)你需要一個(gè)簡(jiǎn)單的能輸出為 Canvas 的 3D 視覺效果時(shí)。
GitHub: https://github.com/mrdoob/three.js/
當(dāng)前版本: r73
網(wǎng)站: threejs.org
Mocha 和 Chai
長(zhǎng)久以來測(cè)試 JavaScript 一直都令人不甚反感。說起來，測(cè)試任何代碼都是令人反感的，但又卻是每個(gè)開發(fā)者應(yīng)該做的事情。每個(gè)開發(fā)者似乎總是對(duì)此不屑，忽視掉針對(duì)它們的代碼的測(cè)試工 作。 現(xiàn)在有了治愈這種反感的辦法了，那就是 Mocha 和 Chai。而兩個(gè)庫(kù)都以美味的熱飲命名，都能幫助你測(cè)試代碼，不過方式不同而已。
Mocha 是一個(gè) JavaScript 測(cè)試框架，它使得針對(duì)你的node模塊或者瀏覽器應(yīng)用中的異步代碼的測(cè)試變得容易起來。Mocha 測(cè)試可以串起來運(yùn)行，并且對(duì)于針對(duì)合適的測(cè)試案例進(jìn)行異常跟蹤的質(zhì)量不錯(cuò)。
Chai 是一個(gè)行為驅(qū)動(dòng)開發(fā)和測(cè)試驅(qū)動(dòng)開發(fā)的斷言庫(kù)，可與 Mocha 比肩。它以一種可讀性好的風(fēng)格來描述你所要測(cè)試的東西，用起來簡(jiǎn)單。
什么時(shí)候使用 Mocha 和 Chai?用他們就對(duì)了! 請(qǐng)測(cè)試你的代碼，讓這個(gè)世界變得更好。
Mocha GitHub: https://github.com/mochajs/mocha
Mocha 當(dāng)前版本: 2.3.3
Mocha 網(wǎng)站: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai 當(dāng)前版本: v3.4.1
Chai 網(wǎng)站: chaijs.com
我們已經(jīng)在這份清單中囊括了 Mocha 和 Chai ，如果不去把可以運(yùn)行這些測(cè)試或者也許可以設(shè)定持續(xù)集成測(cè)試的測(cè)試運(yùn)行器拉進(jìn)來的話，那么這份清單就不會(huì)是完整的。Karma 是一個(gè)用來幫助你在不同的瀏覽器中自動(dòng)運(yùn)行你的測(cè)試的工具。它將會(huì)幫助你在時(shí)下所有的瀏覽器上運(yùn)行你的 Mocha 和 Chai 測(cè)試。
并不是每個(gè)瀏覽器都會(huì)運(yùn)行于每個(gè)平臺(tái)之上，不過幸運(yùn)的是有許多免費(fèi)的工具可供你用來測(cè)試其它的瀏覽器，可以在 瀏覽器截屏 上看一看。如果你是在 OS X 上運(yùn)行的話，并且要測(cè)試的是 Edge 或者 IE 的話，你就可以 免費(fèi) 使用這個(gè)工具。
什么時(shí)候使用 Karma?當(dāng)你想要擁有一個(gè)功能全面的測(cè)試套件，并像確保測(cè)試能在所有的瀏覽器上通過時(shí)。
GitHub: https://github.com/karma-runner/karma
當(dāng)前版本: v0.13
網(wǎng)站: karma-runner.github.io
PhantomJS
運(yùn)行全部的瀏覽器來測(cè)試你的代碼是要密集消耗內(nèi)存和 CPU 的。PhantomJS 讓你可以運(yùn)行一個(gè)純粹的 WebKit —— Safari 和 之前版本的 Chrome 中的渲染引擎(現(xiàn)在是 Blink)。它能讓你通過一個(gè) JavaScript API 來運(yùn)行測(cè)試、截屏、模擬網(wǎng)絡(luò)以及自動(dòng)的瀏覽頁(yè)面。
什么時(shí)候使用 PhantomJS ?當(dāng)你需要進(jìn)行更多的測(cè)試、操作網(wǎng)頁(yè)和模擬網(wǎng)絡(luò)請(qǐng)求的操作時(shí)。
GitHub: https://github.com/ariya/phantomjs
當(dāng)前版本: v2.0
網(wǎng)站: phantomjs.org
Grunt 和 Gulp
構(gòu)建用于生產(chǎn)環(huán)境的網(wǎng)站一般還涉及到一些提升性能這方面的任務(wù)，像 JavaScript 和 CSS 的最小化，CoffeeScript/TypeScript 的編譯，單元測(cè)試，代碼精簡(jiǎn)。也許你已經(jīng)有了一個(gè)工具鏈，用于準(zhǔn)備你生產(chǎn)版本上的網(wǎng)站，而如果你還沒有的話，就會(huì)想要擁有一個(gè)像 Grunt 或者 Gulp 這樣的任務(wù)運(yùn)行器。它們都無(wú)數(shù)的插件，能為你的網(wǎng)站進(jìn)行任何的轉(zhuǎn)換，以使其能投入生產(chǎn)環(huán)境。
什么時(shí)候使用 Grunt?當(dāng)你更愿意編寫配置文件，而對(duì)于你的任務(wù)運(yùn)行器會(huì)生成什么中間文件并不關(guān)心時(shí)。
Grunt GitHub: https://github.com/gruntjs/grunt
Grunt 當(dāng)前版本: v0.4.5
Grunt 網(wǎng)站: gruntjs.com
何時(shí)使用 Gulp?當(dāng)你更愿意編寫配置代碼，并且想利用 node.js 的流處理能力實(shí)現(xiàn)更快的任務(wù)執(zhí)行時(shí)。
Gulp GitHub: https://github.com/gulpjs/gulp
Gulp 當(dāng)前版本: v3.9.0
Gulp 網(wǎng)站: gulpjs.com
Babel
JavaScript 作為一門語(yǔ)言發(fā)展很快速。ECMAScript 2015 在去年夏天發(fā)布，而它的許多新特性正在許多***的瀏覽器中被實(shí)現(xiàn)。如果你想要了解有關(guān)瀏覽器對(duì) ECMAScript 2015 兼容信息，可以看看這個(gè)來自于 @kangax 的 表格 。你會(huì)注意到***版本的 Edge，F(xiàn)irefox 和 Chrome 已經(jīng)幾乎是完全的兼容了。
我們并不是生活在一個(gè)***的世界中。作為開發(fā)者，我們將會(huì)需要繼續(xù)支持老版本的瀏覽器，它們不具有***和最棒的 JavaScript 功能特性。而我們實(shí)在是想要發(fā)展我們的 web 并提升我們的代碼庫(kù)。Babel 就是一個(gè) JavaScript 編譯器，它可以將***的 JavaScript 標(biāo)準(zhǔn)編譯成兼容 ES5 的JavaScript，讓你可以在 IE9 那么老的瀏覽器上運(yùn)行它們。它擁有一些插件，讓使用 React 開發(fā)更加容易，設(shè)置會(huì)使用那些并不是規(guī)范 (例如 ES7) 的組成部分的功能特性。
什么時(shí)候使用 Babel?當(dāng)你想要使用新的 JavaScript 語(yǔ)言特性并且還要支持老的瀏覽器時(shí)。
GitHub: https://github.com/babel/babel
當(dāng)前版本: 6.1.2
網(wǎng)站: babeljs.io
更多 Web 開發(fā)的實(shí)踐
這篇文章是 web 開發(fā)系列的一部分，來自于 Microsoft 技術(shù)的傳道者和工程師，內(nèi)容都是關(guān)于實(shí)用的 JavaScript 學(xué)習(xí)、開源項(xiàng)目，還有互操作性***實(shí)踐這些方面，包括了 Microsoft Edge 瀏覽器和新的 EdgeHTML 渲染引擎 。
我們鼓勵(lì)您在所有的瀏覽器和設(shè)備，包括作為 Windows 10 默認(rèn)瀏覽器的 Microsoft Edge 上進(jìn)行測(cè)試 —— 使用 dev.microsoftedge.com 上的免費(fèi)工具：
掃描你的站點(diǎn)上的過時(shí)的庫(kù)，布局問題以及可訪問性
下載免費(fèi)的 Mac, Linux, 和 Windows 的虛擬機(jī)
在所有的瀏覽器，包括在 Microsoft Edge 上檢查 Web 平臺(tái)的狀態(tài)
在你自己的設(shè)備上遠(yuǎn)程測(cè)試 Microsoft Edge
更深入了解我們的工程師和傳道者：
GitHub 上的編碼實(shí)驗(yàn)室：跨瀏覽器測(cè)試和***實(shí)踐
Microsoft Edge Web 大會(huì) 2015 (來自于我們的工程團(tuán)隊(duì)和 JS 社區(qū))
哇哦，我能在 Mac 和 Linux 上測(cè)試 IE 和 Edge 了! (來自于 Rey Bango)
沒有破話 Web 的先進(jìn)的 JavaScript (來自于)
能讓 Web 立刻起作用的 Edge 渲染引擎 (來自于 Jacob Rossi)
使用 WebGL 發(fā)揮 3D 渲染的潛能 (來自于 David Catuhe)
托 管web 應(yīng)用和web平臺(tái)方面的創(chuàng)新 (來自于 Kevin Hill 和 Kiril Seksenov)
我們的社區(qū)開放源代碼項(xiàng)目：
vorlon.JS (多設(shè)備遠(yuǎn)程 JavaScript 測(cè)試)
manifoldJS (部署跨平臺(tái)托管 Web 應(yīng)用)
babylonJS (讓 3D 圖形這些東西更平易近人)
更多免費(fèi)的工具和后端web開發(fā)的東西：
Linux, MacOS, 和 Window s 上使用的 Visual Studio Code
嘗試在 Azure Cloud 上 使用 node.JS 編寫代碼
許可
這篇文章，連帶其相關(guān)的任何源代碼和文件，是受到 代碼項(xiàng)目開放許可(CPOL) 保護(hù)的。
新聞名稱：14個(gè)優(yōu)秀 JS 前端框架、庫(kù)、工具及其使用時(shí)機(jī)
文章來源：http://m.5511xx.com/article/cdhseph.html
