如何作好一個優秀的web項目心得

最近利用空餘的時間（坐公交車看教程視頻），想了不少本身作的作果項目的優缺點，從新瞭解了先後端分離，前端工程化等概念學習，思考如何打造好一個優秀的web前端項目。

 

前端準備篇

 

    前端代碼規範：制定前端開發代碼規範文檔。

                         PS：重中之中，爲了下一步實現前端工程化。

                                編碼風格有不少。團隊代碼規範必定要統一。便於維護web項目。

    接口文檔規範：制定RESTful架構接口規範文檔。

                         PS：果斷使用用apiDoc構建API文檔。美觀好看，易於維護。

                                  還用Word或者Excel寫文檔，太low了。

    先後端分離：簡單理解爲前端代碼不影響後端代碼，後端代碼不影響前端代碼。

                      PS：我的感受就是有點像C/S架構，web前端 == apk || ipa 。

    前端工程化（模塊化）：簡單理解爲前端代碼再也不零散，有組織，有規範的管理起來。

                      PS：我的感受就是把後端mvc模式中v與c層都交了前端處理。

    前端漸進式（PWA）：依靠緩存，Web Workers等現代技術打造的漸進式web應用。

                      PS：有點像hybrid app，但無需原生代碼，可離線，可推送web應用。

             

前端代碼篇 

   

    html：固然採用最新的html5標籤。

             PS：值得一提的是，不要濫用html5的標籤，好比section與div標籤。

     css：使用CSS Modules，讓css局部模塊化，保證css全局惟一性。

               PS：建議配合webpack一塊兒使用。

               使用sass預處理，讓css模塊化，便於維護與管理css。

               PS：我確實有點抵觸css預處理，以爲沒什麼用，後來使用了css預處理自後，感受真的很方便，

                       我選用sass是由於不少css框架都有集成sass，便於使用而已。

               使用PostCSS後處理，讓css標準化，寫出高質量的css。

               PS：後處理器基本是把sublime text裏面的前端插件都搬過來了，徹底實現前端自動化。

       js：使用html5新api。

            PS：html5 api更容易操做dom，實現一些新功能，好比拖拽。

            使用ES6/ES7/ES8的語法。

            PS：js終於變成真正的javascript了，語法與java類似度更高了。

            使用jquery庫。

            PS:  jquery永遠不會過期，由於jquery有強大的插件。

            使用js mvvm框架Angular.js或vue.js  

            PS：mvvm框架讓web前端更易於提升web性能。固然啦，具體問題具體分析，慎用mvvm框架。

                   據我的感受，vue.js比較適合移動端web項目，體積小，性能高。

                                      Angular.js比較適合PC端大型項目，功能強大。

前端構建工具篇

 

    nodejs：一個從Chrome瀏覽器提取出來的強大的js解析器（js運行環境）。

               PS：與java的JRE相似，一個高性能的運行環境。 

webpack：一個出色的前端打包構建工具。

               PS：webpack真的是個神奇的打包工具，實現前端模塊化的神器。

 

    補充：如今一個前端的開發主流工具就使用腳手架（命令行工具），好比：vue的vue-cli。能迅速構架web應用項目，搭建開發環境與發佈項目。