如何打造一個"逼格"的web前端項目

標籤：mvvm   公交   模組   移動端   簡單   res   比較   完全   vue.js   

    最近利用空餘的時間（坐公交車看教程視頻），重新瞭解了前後端分離，前端工程化等概念學習，思考如何打造一個“逼格”的web前端項目。

    

    前端理論篇

 

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

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

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

   

    介面文檔規範：制定RESTful架構介面規範文檔。

 

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

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

 

                                

 

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

                      PS：個人感覺就是有點像C/S架構，web前端 == apk || ipa 。

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

                      PS：個人感覺就是把後端mvc模式中v與c層都交了前端處理。

   

    前端代碼篇 

 

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

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

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

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

                    我選用sass是因為很多css架構都有整合sass，便於使用而已。

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

             PS：後處理器基本是把sublime text裡面的前端外掛程式都搬過來了，完全實現前端自動化。

       js：使用html5新api。

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

            使用ES6的文法。

            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類似，一個高效能的運行環境。 

      gulp：一個出色的前端任務構建工具。

               PS：gulp使用js函數去編寫任務流，簡單明了。所以我選擇gulp而不選grunt。

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

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

 

     

如何打造一個"逼格"的web前端項目