公司某項目前端技術積累

最佳實踐

BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt

前期技術選型

1. BootStrap + Backbone.js + require.js + jquery插件
2. ExtJS
3. Angular.js
4. BootStrap + jquery + jquery插件

前端技術選型總結：

1. 之所以選擇 BootStrap + jquery + jquery插件 的原因是因爲ExtJS或Angular.js這種大而全的MVC框架，學習成本較大，之前沒有項目經驗；
2. 棄用require.js或sea.js（模塊化工具）以及Grunt（自動化構建工具）的原因是接手項目時已經是二手項目，並且rails有js模塊化工具和自動化構建工具

但如果後臺web框架不提供模塊化工具和自動化構建工具，就非常有必要使用類似於sea.js、require.js這樣的模塊化工具以及Grunt這樣的自動化構建工具

前端技術圖示

備註：有些技術未用到

前端插件使用心得

圖表

• Echarts
  1. 綜合評分：5星
  2. 易用性：4星
  3. 收費：否
  4. 使用心得：百度良心打造canvas圖表庫，能基本滿足所有線上圖表需求，示例多、主題豐富、線下詢問方便，但有一些bug（不影響正常使用）

• d3.js
  1. 綜合評分：4星
  2. 易用性：3星
  3. 收費：否
  4. 使用心得：開源SVG圖表庫，在圖表較爲複雜時，可以使用d3來繪製，示例多，但易用性較差，本項目中未使用

• HighCharts
  1. 綜合評分：4星
  2. 易用性：4星
  3. 收費：是
  4. 使用心得：收費高，易用性高、未發現bug，圖表豐富，本項目中未使用

表格控件

• DateTables
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：功能強大，有BootStrap風格樣式，本項目中未使用

• st-grid3.0
  1. 綜合評分：4星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：公司內部組件，可擴展性高，靈活性大，但有些功能尚不完善，可自行擴展

時間控件

• jquery datepicker
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：可用於單天日期選擇，API完善，能滿足大部分需求，建議自行從該插件擴展功能，同時有BootStrap風格的皮膚，本項目中未使用

• FullCalendar
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：可用於日程安排，API完善，易用性高

• DateRangePicker
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：雙日曆時間控件，當然jquery datepicker也可以控制顯示多個日曆表，但本控件封裝的較爲完善，滿足了較爲複雜的需求

多選日曆

• KitJS多選日曆
  1. 綜合評分：3星
  2. 易用性：3星
  3. 收費：否
  4. 使用心得：在論壇中找到，感覺像是爲了完成示例一樣的插件，現在作者不再維護，可擴展性差，在本項目中爲完成需求曾多次修改其源碼

• jquery Kalendae
  1. 綜合評分：未知
  2. 易用性：未知
  3. 收費：否
  4. 使用心得：將此插件找到後未使用，由於其爲jquery插件，可擴展性會比上款多選日曆的插件要好些（當然也只是感覺），本項目中未使用

下拉菜單

• select2
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：可用於單選或多選，可根據關鍵字搜索，易用性高，API完善

對話框

• st-pop
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：公司內部對話框組件，靈活性高，可擴展性強，但樣式方面可能需要使用者自行修改符合系統的風格

• magnific-popup
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：暗箱對話框，可用於展示圖片、視頻等，樣式好看

樹形控件

• zTree
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：API完善，易用性高，但一次性生成多個節點速度會比較慢，這也是生成大數據量的DOM節點時的弊病，本項目中未用到

及時編輯控件

• Jeditable
  1. 綜合評分：4星
  2. 易用性：4星
  3. 收費：否
  4. 使用心得：樣式簡潔，可所見即所得的編輯文字，可自行擴展樣式

• Editable for BootStrap
  1. 綜合評分：4星
  2. 易用性：4星
  3. 收費：否
  4. 使用心得：並非所見即所得的編輯文字，是有簡單的小彈窗，個人感覺較爲突兀，但其樣式較爲優美，功能豐富（可填寫文字或下拉列表等）

css前端框架

• BootStrap3.0
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：css框架，樣式豐富，同時有一些非常好用的js插件
     同時推薦一些css框架：扁平化風格的 Flat UI （公司已購買），微軟Metro風格的 Metro UI ，以及Google風格的 Google BootStrap

項目構建工具

• Grunt
  1. 綜合評分：5星
  2. 易用性：4星
  3. 收費：否
  4. 使用心得：自動化構建工具，可一鍵式壓縮（minification）、編譯、單元測試、linting，結束您反覆的構建工作。

模塊化

• sea.js
• require.js
  1. 綜合評分：都是5星
  2. 易用性：都是5星
  3. 收費：否
  4. 使用心得：兩個模塊化工具，是兩種不同的規範，sea.js是CMD規範，require.js是AMD規範，在本項目中未使用

js MVC 框架

• Backbone.js
  1. 綜合評分：4星
  2. 易用性：4星
  3. 收費：否
  4. 使用心得：學習方便，源碼僅有2000多行（帶註釋），非常適用於移動版，個人感覺，Backbone雖然沒有其他MVC框架那麼強大，但是也因此更加靈活，個人感覺可以當做多人協作的代碼規範工具，在項目中未使用

• Angular.js
  1. 綜合評分：未知
  2. 易用性：未知
  3. 收費：否
  4. 使用心得：在項目中只是用到其上傳文件的組件，Angular是Google開源的一個MVC框架，功能非常強大，但是報錯不是特別明顯，調試bug比較麻煩

• ExtJS
  1. 綜合評分：3星
  2. 易用性：3星
  3. 收費：是
  4. 使用心得：非常符合企業級的內部管理系統，高強度定製化，學習成本高，維護成本高，調試bug比較麻煩，學習教程

js庫

• jquery
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：非常好用乃至接近完美的js DOM 庫，jquery UI更是非常方便且易擴展，並且jquery UI 現在有BootStrap風格的皮膚

圖標字體

• Font Awesome
  1. 綜合評分：5星
  2. 易用性：5星
  3. 收費：否
  4. 使用心得：常用的圖標

上傳控件

• jquery FileUpload
  1. 綜合評分：5星
  2. 易用性：4星
  3. 收費：否
  4. 使用心得：配合HTML模板比較簡單易用，但是在本項目中整合到rails中就不是很好用，但仍不失爲一款非常好用的拖拽上傳軟件，支持查看上傳進度

• 百度WebUploader
  1. 綜合評分：未知
  2. 易用性：未知
  3. 收費：否
  4. 使用心得：百度FEX剛剛出的一款HTML+Flash上傳插件，功能較爲強大，但未在真實項目中使用，不知其性能和易用性如何

視頻播放插件

• jwplayer
  1. 綜合評分：4星
  2. 易用性：4星
  3. 收費：否（但去LOGO，需要收費）
  4. 使用心得：由於HTML5不支持在線播放Flash格式視頻，所以需要外在插件，jwplayer的確是不錯的選擇，但在本項目中也是自己進行破解其插件纔打到需要的效果