公司某項目前端技術積累，項目前端積累

公司某項目前端技術積累，項目前端積累
最佳實務

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. 使用心得：樣式簡潔，可所見即所得 (WYSIWYG)的編輯文字，可自行擴充樣式

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

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的確是不錯的選擇，但在本項目中也是自己進行破解其外掛程式才打到需要的效果

java程式員想轉web前端開發，需要學習什技術？ 另外切圖是指什？

html，JavaScript（及其衍生的很多架構，比如：JQuery，ext等），css。
切圖是用製圖軟體（PS等）為web前端做定製的圖片。
 
對於學習web前端開發的問題

你會xhtml+css為什麼會不知道DOM呢？
DOM說通俗一點就是HTML結構

你可以先去做外包的公司實習，外包公司基本上都是流水線的形勢在動作，一個部門只負責做前端靜態頁面，一個部門只負責寫背景程式，這樣你可以有機會接觸到大量項目，可以遇到大量問題，可以累積到解決大量問題的經驗。最主要的一點是，一般的外包公司的對於技術的要求不是很高，甚至不要求會js，因為一般會有專人寫的。

自學也是必要的，把基礎理論掌握了，然後到公司裡實際運用

祝你好運吧