前端JavaScript架構彙總

概述：

有些日子沒有正襟危坐寫部落格了，網際網路飛速發展的時代，技術更新疊代的速度也在加快。看着Java、Js、Swift在各領域心花路放，也是煞是羨慕。尋了尋.net的消息，也是振奮人心，.net core 1，mono，xamarin等等，但大多都還在狂吼的階段。其實一直以來對技術的了解是技術服務于業務和産品，産品又在不同程度的推進着技術的演進。

Web、無線、物聯網、VR、PC從不同方向推進着技術的融合與微創新。程式員在不同業務場景下的角色互換。而随着node.js的出現語言的角色也在發生着轉變，Js扮演了越來越重要的角色。也就有了茶餘飯後也把了解到的知識整理一下。看過“你的知識需要管理”後，強烈的意識到雜亂且範範的知識儲備遠不如整理後條理清晰的知識帶來好處多。是以，是的，我們需要時不時的回來對掌握的知識梳理歸類，以備不時之需。

一、前端架構庫：

1.Zepto.js

• 位址：http://www.css88.com/doc/zeptojs/
• 描述：Zepto是一個輕量級的針對現代進階浏覽器的JavaScript庫， 它與jquery有着類似的api。 如果你會用jquery，那麼你也會用zepto。關于Zepto認知我也是通過與一位騰訊朋友聊天的時候知道的，隻作了些基礎的了解。

2.SUI Mobile

• 位址：http://m.sui.taobao.org
• 描述：SUI Mobile 是一套基于 Framework7 開發的UI庫。它非常輕量、精美，隻需要引入我們的CDN檔案就可以使用，并且能相容到 iOS 6.0+ 和 Android 4.0+，非常适合開發跨平台Web App。
• 用途：你也看到了，他是用于無線端的Web App的開發。

3.Node.Js

• 位址：http://www.runoob.com/nodejs/nodejs-tutorial.html (中文網)
• 描述：Node.js是一個Javascript運作環境(runtime)。實際上它是對Google V8引擎進行了封裝。V8引 擎執行Javascript的速度非常快，性能非常好。Node.js對一些特殊用例進行了優化，提供了替代的API，使得V8在非浏覽器環境下運作得更好。

　　Node.js是一個基于Chrome JavaScript運作時建立的平台， 用于友善地搭建響應速度快、易于擴充的網絡應用。Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常适合在分布式裝置上運作資料密集型的實時應用。

　　簡單的說 Node.js 就是運作在服務端的 JavaScript。

　　Node.js 是一個基于Chrome JavaScript 運作時建立的一個平台。

　　Node.js是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

• 用途：

　　1. RESTful API

　　這是NodeJS最理想的應用場景，可以處理數萬條連接配接，本身沒有太多的邏輯，隻需要請求API，組織資料進行傳回即可。它本質上隻是從某個資料庫中查找一些值并将它們組成一個響應。由于響應是少量文本，入站請求也是少量的文本，是以流量不高，一台機器甚至也可以處理最繁忙的公司的API需求。

　　2. 統一Web應用的UI層

　　目前MVC的架構，在某種意義上來說，Web開發有兩個UI層，一個是在浏覽器裡面我們最終看到的，另一個在server端，負責生成和拼接頁面。

不讨論這種架構是好是壞，但是有另外一種實踐，面向服務的架構，更好的做前後端的依賴分離。如果所有的關鍵業務邏輯都封裝成REST調用，就意味着在上層隻需要考慮如何用這些REST接口建構具體的應用。那些後端程式員們根本不操心具體資料是如何從一個頁面傳遞到另一個頁面的，他們也不用管使用者資料更新是通過Ajax異步擷取的還是通過重新整理頁面。

　　3. 大量Ajax請求的應用

例如個性化應用，每個使用者看到的頁面都不一樣，緩存失效，需要在頁面加載的時候發起Ajax請求，NodeJS能響應大量的并發請求。　　總而言之，NodeJS适合運用在高并發、I/O密集、少量業務邏輯的場景。

4.angular.Js

• 位址：http://www.runoob.com/angularjs/angularjs-tutorial.html (中文網)
• 描述：AngularJS[1]  誕生于2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS架構，已經被用于Google的多款産品當中。AngularJS有着諸多特性，最為核心的是：MVVM、子產品化、自動化雙向資料綁定、語義化标簽、依賴注入等等。
• 用途：通過描述我們應該就能很好的明白AngularJS的真實用途了，MVVM，子產品化，自動化雙向資料綁定等等。除了簡單的dom操作外，更能展現Js程式設計的強大。當然應用應該視場合而定。

5.JQuery Mobile

• 位址：http://www.w3school.com.cn/jquerymobile/    (中文網)
• 描述：Query Mobile是jQuery 在手機上和平闆裝置上的版本。jQuery Mobile 不僅會給主流移動平台帶來jQuery核心庫，而且會釋出一個完整統一的jQuery移動UI架構。支援全球主流的移動平台。jQuery Mobile開發團隊說：能開發這個項目，我們非常興奮。移動Web太需要一個跨浏覽器的架構，讓開發人員開發出真正的移動Web網站。
• 用途：jQuery Mobile 是建立移動 web 應用程式的架構。

　　　　　　jQuery Mobile 适用于所有流行的智能手機和平闆電腦。

　　　　　　jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。

6.requirejs

• 位址：http://www.requirejs.cn/
• 描述：RequireJS的目标是鼓勵代碼的子產品化，它使用了不同于傳統<script>标簽的腳本加載步驟。可以用它來加速、優化代碼，但其主要目的還是為了代碼的子產品化。它鼓勵在使用腳本時以module ID替代URL位址。

RequireJS以一個相對于baseUrl的位址來加載所有的代碼。 頁面頂層<script>标簽含有一個特殊的屬性data-main，require.js使用它來啟動腳本加載過程，而baseUrl一般設定到與該屬性相一緻的目錄。

• 用途：子產品化動态加載。

7.Vue.js

• 位址：http://cn.vuejs.org/
• 描述：Vue.js 是用于建構互動式的 Web  界面的庫。它提供了 MVVM 資料綁定和一個可組合的元件系統，具有簡單、靈活的 API。從技術上講， Vue.js 集中在 MVVM 模式上的視圖模型層，并通過雙向資料綁定連接配接視圖和模型。實際的 DOM 操作和輸出格式被抽象出來成指令和過濾器。相比其它的 MVVM 架構，Vue.js 更容易上手。

8.backbone.js

• 位址：http://www.css88.com/doc/backbone/
• 描述：Backbone 為複雜Javascript應用程式提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用于綁定鍵值資料和自定義事件；集合附有可枚舉函數的豐富API； 視圖可以聲明事件處理函數，并通過RESTful JSON接口連接配接到應用程式。

9.React

• 位址：http://reactjs.cn/react/docs/why-react.html
• 描述：React 是一個 Facebook 和 Instagram 用來建立使用者界面的 JavaScript 庫。很多人認為 React 是 MVC 中的 V（視圖）。我們創造 React 是為了解決一個問題：建構随着時間資料不斷變化的大規模應用程式。為了達到這個目标，React 采用下面兩個主要的思想。

10.Ionic 

• 位址：http://www.ionic.wang/js_doc-index.html

• 描述：Ionic既是一個CSS架構也是一個Javascript UI庫。許多元件需要Javascript才能産生神奇的效果，盡管通常元件不需要編碼，通過架構擴充可以很容易地使用，比如我們的AngularIonic擴充。

  Ionic遵循視圖控制模式，通俗的了解和 Cocoa 觸摸架構相似。在視圖控制模式中，我們将界面的不同部分分為子視圖或包含其他視圖的子視圖控制器。然後視圖控制器“驅動”内部視圖來提供互動和UI功能。一個很好的例子就是标簽欄（Tab Bar）視圖控制器處理點選标簽欄在一系列可視化面闆間切換。

  浏覽我們的API文檔來了解視圖控制器和Ionic中可用的Javascript實用工具。

  Ionic 是目前最有潛力的一款 HTML5 手機應用開發架構。通過 SASS 建構應用程式，它 提供了很多 UI 元件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 架構和 AngularJS 來增強應用。提供資料的雙向綁定，使用它成為 Web 和移動開發者的共同選擇。

二、前端UI架構

1.Pure

• 位址：http://purecss.org/layouts/
• 描述：Pure精心設計，隻為可以在任何Web項目中使用。為了例證這一點，我們制作了如下幾個模闆。這些模闆都是響應式的，并且沒有使用任何JavaScript。
• 用途：真的是很精美的一個樣式架構，便于我們快事建構一些個人産品，當然也可以服務于工作中的一些項目。

2.bootstrap

• 位址：http://www.bootcss.com/
• 描述：簡潔、直覺、強悍的前端開發架構，讓web開發更迅速、簡單。

3.EasyUI

• 位址：http://www.jeasyui.net/  (中文網)
• 描述：easyui是一種基于jQuery的使用者界面插件集合。

　　　　　　easyui為建立現代化，互動，JavaScript應用程式，提供必要的功能。

　　　　　　使用easyui你不需要寫很多代碼，你隻需要通過編寫一些簡單HTML标記，就可以定義使用者界面。

　　　　　　easyui是個完美支援HTML5網頁的完整架構。

　　　　　　easyui節省您網頁開發的時間和規模。

　　　　　　easyui很簡單但功能強大的。

 4.Ant Design

• 位址：http://ant.design/
• 描述：一個 UI 設計語言，一套提煉和應用于企業級背景産品的互動語言和視覺體系

三、可視化元件

1.Echarts

• 位址：http://echarts.baidu.com/
• 描述：ECharts，一個純 Javascript 的圖表庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫ZRender，提供直覺，生動，可互動，可高度個性化定制的資料可視化圖表。

2.tableau(收費)

• 位址：http://www.yuandingit.com/special/tableau/index.html
• 描述：Tableau 是桌面系統中最簡單的商業智能工具軟體，Tableau 沒有強迫使用者編寫自定義代碼，新的控制台也可完全自定義配置。在控制台上，不僅能夠監測資訊，而且還提供完整的分析能力。Tableau控制台靈活，具有高度的動态性。

四、前端建構工具

1.gulp

• 位址：http://www.gulpjs.com.cn/
• 描述：易于使用

　　　　　　通過代碼優于配置的政策，Gulp 讓簡單的任務簡單，複雜的任務可管理。

　　　　　　建構快速

　　　　　　利用 Node.js 流的威力，你可以快速建構項目并減少頻繁的 IO 操作。

　　　　　　插件高質

　　　　　　Gulp 嚴格的插件指南確定插件如你期望的那樣簡潔高質得工作。

　　　　　　易于學習

　　　　　　通過最少的 API，掌握 Gulp 毫不費力，建構工作盡在掌握：如同一系列流管道。

五、部落格搭建 

1.技術組合

　　HEXO+Github,搭建屬于自己的部落格。

　　站點：http://www.jianshu.com/p/465830080ea9

　　HEXO介紹：Hexo是一個開源的靜态部落格生成器,用node.js開發,作者是台灣大學生tommy351

　　準備：git  + node.js + markdown編輯 + gitcafe + 域名