前端技術集錦整理

目的：普遍得了解前端工具，在項目中選擇合適的前端工具進行開發，達到事半功倍的效果。

---

構建工具

Gulp 基於nodeJs，依靠不一樣的插件自動完成代碼的壓縮，合併，風格檢查等操做。　相似的還有grunt, webpack

構建工具的插件

• 代碼壓縮合並、圖片壓縮、MD5後綴
• LESS 爲CSS引入函數、嵌套等操做，方便CSS的開發與維護。相似的還有：SASS
• Babel ES6/ES2015轉ES5。es6介紹
• CoffeeScript 以另外一種更精簡的語法來書寫JS。相似的還有：TypeScript
• artTemplate 模版引擎

RequireJs

• 實現JS文件的異步加載（防止JS阻塞）
• 管理模塊之間的依賴性（嚴格保證js加載順序）

　介紹, 文檔

Polymer

• Web component 組件

MVC、MV*
AngularJs, Backbone 適合單頁面、交互複雜的web項目。

DOM操做庫

• jQuery 適合PC端
• zeptoJs 適合mobile

UI / 組件庫

jQuery UI, Kissy, Bootstrap, pureCss

icon font

Font Awesome 一套字體圖標，使用css來替代經常使用的圖標/img。

es5-shim.js

使得舊版瀏覽器也可以兼容es5。

　es5-shim.js, es5介紹

Hybrid App開發

• 基於WebView： APPCAN, phonegap
• 基於HTML5+ : MUI, Hbuilder
• React Native

React

以組件的方式進行開發

• ReactJs 使用Virtual DOM（diff算法）緩解DOM操做緩慢與特效卡問題。
• React Canvas 基於ReactJS與Canvas，進一步優化手機端網頁特效。
• React Native 用於開發IOS與Android應用。(1)理念：既擁有Native的用戶體驗、又保留React的開發效率；(2)learn once, write anywhere；(3)使用javascriptCore+本身開發的瀏覽器渲染引擎，而不是webview；(4)css-layout, JSX；

代碼管理

• SVN 集中式
• Git/Github 分佈式

　二者對比