前端工程化，組件化，模塊化，層次化

我的認爲：前端發展的導向是前端工程化，智能化，模塊化，組件化，層次化。

一個項目的開發逐漸在人工智能+物聯網的時代，走向如下的五化

    緣由: Web前端頁面的開發必然與DOM進行交互操做，前端框架的一次次更新，是從知足目前的業務需求到提高效率的階段，慢慢走向改善性能的階段（開發和部署環境優化，代碼優化，網站性能優化，數據優化，頁面優化等等）。

1.前端工程化。

       前端工程化指的是將軟件工程的方法和原理運用在前端開發中, 目的是實現 高效協同，質量開發。

          具體是：

                 a.Node服務，提供數據代理，路由，服務器渲染。

                 b.Web應用開發，專一於web交互體驗。

                 c.前端運維：構建，測試，部署，監控。

2.前端模塊化(頁面模塊化開發+基礎模塊化)。

        （1）基礎模塊化：

        A.  CommonJS————同步加載、服務器端的模塊化規範，採用案列：Node.js

          實現原理：

                 一個單獨的文件就是一個模塊；

      加載模塊採用同步方式，加載完成後才能執行後面的操做；

      加載模塊使用require方法，該方法讀取一個文件並執行，最後返回內部的exports對象；

         特色：

              比較適合運用於服務器的編程，加載模塊文件一般都存在本地磁盤，加載過程無延遲，無需異步加載

        B.  AMD————異步加載，採用案例：require.js

   實現原理：

      異步模塊定義，經過一個函數封裝全部所須要、所依賴的模塊/方法/對象/屬性；

      返回一個新函數(模塊)；推崇依賴前置，依賴的模塊提早執行；

      採用依賴注入方式加載模塊；注入依賴模塊後，執行異步回調函數；

      特色：

                異步加載，不會產生異步阻塞，適合瀏覽器網絡環境

       C. CMD————異步加載、異步執行依賴，案例：Seal.JS

           CMD 與 AMD 相似；都是採用異步加載，

    不一樣點主要有一下幾點:

                - 對依賴模塊的執行時機：CMD延遲執行，AMD提早執行

                - 依賴位置：CMD推崇依賴就近，按需加載；AMD推崇依賴前置；

                - API:CMD推崇職責單一，AMD裏面require分局部和全局方式；

    （2）頁面模塊化：

             1.將整個項目前端部分，拆分爲單一多個頁面

       2.將每一個頁面劃分爲多個模塊，對每一個模塊開發，封裝組件等（例如：header，nav，centent，persion，footer等）

       3.將每一個模塊頁面組件存放組件庫，便於後續各個頁面的調用

       4.將每一個模塊頁面引入當前主頁面page，組成整個頁面。（例如：main主頁面由header，nav，centent，persion，footer等多個模塊組成，經過項目框架指定的調用方式：$$header)

3.前端層次化。

          前端層次化是指項目結構目錄清晰，樹狀分佈，層次化分明，多個文件夾嵌套，頁面，樣式，框架，組件，模塊，腳本等獨立劃分，相互調用聯繫。（例如：css樣式所有歸於css文件夾等等）

4.前端智能化。

          前端智能化是指經過人工智能AI的方式開發前端，將前端與python相結合從項目評估選取最優的模式，框架，庫，組件等到項目打包上線應用，造成高效有序，包括語音識別，刷臉支付，智能檢測等。在此過程當中採用 scrum 敏捷開發模式。

5.前端組件化。

          前端的發展延伸出來不少前端框架和庫，例如：Vue，React，Jquery，Angular，Element，Layout，Iview，Ogma，Echarts等等，主要用來封裝業務組件，架構項目結構，樣式佈局，路由通信等，一個項目由多個組件組成。每每項目經理與架構師，研發工程師商定評估選取最優的方案，進行開發，基於最底層的框架服務，造成了多個框架庫的同時引用，相互嵌套實現某些項目的需求，優點互補，高效開發的方式。

 

總結：前端的開發，必定要規範化，代碼規範，分支管理，模塊管理，自動化測試，最後部署；規範化有利於之後項目的重構，二次開發，版本迭代，前端上手。

          具體爲：1.重命名，對類，接口，方法，屬性重命名。

                         2.抽取代碼，將方法內代碼抽取其餘地方調用。

                         3.封裝字段，類字段換屬性。

                         4.刪除參數，重排參數。

備註：源於自身前端的實踐經驗和自我學習瞭解，總結的前端概況，若有不當之處，請同行指正，很是感謝，多多交流。

                  

         

原文出處：https://www.cnblogs.com/fron-tend/p/11731531.html