盡管Web應用程序的復雜性日益增加，用戶對其前端界面也提出了更高的要求，但今天仍然沒有多少前端開發人員會從軟件工程的角度思考前端開發，幫助團隊開發效率，甚至前端保持像玩具一樣簡單的刻板印象，日復一日，刀耕火。
    前端發展歷史悠久，總是像一個自由放養的野孩子子，原始，不可避免地讓人嘆息！
    目前的前端開發并非一無所有。為了提高前端開發的效率和運行性能，前端團隊的項目建設將經歷三個階段：
    第一階段:庫/框架選擇
    前端工程建設的第一項任務是根據工程特點進行技術選擇。
    基本上沒有人完全從0開始做網站，即使是政府項目jquery都很正常，React/Angularjs當框架誕生時，它解放了大量的生產力。毫無疑問，合理的技術選擇可以為項目節省大量的工程量。
    第二階段：簡單構建優化
    選擇后，您基本上可以開始敲擊代碼，但僅僅解決開發效率是不夠的，我們必須考慮運行性能。在前端工程的第二階段，將選擇一施工工具來壓縮和驗證代碼，然后以頁面為單位合并簡單的資源。
    前端開發工程度低，往往出乎我的意料，我在百度工作之前沒有多少概念，直到離開大公司溫室，去行業與更多的團隊溝通發現，可以做這個階段超過行業平均水平，屬于高工程團隊，查看在線形狀**網頁源代碼，能做到最基本JS/CSS壓縮的Web應用程序已經進入了標準互聯網公司的行列，不難理解為什么許多前端團隊對前端工程建設的認知只停留在壓縮、驗證和合并的程度上。
    第三階段：JS/CSS模塊化開發
    分而治之是軟件工程中的一個重要思想，是復雜系統開發和維護的基石，也適用于前端開發。在解決了基本開發效率和運行效率問題后，前端團隊開始思考維護效率，模塊化是前端最流行的治療方法。
    JS模塊化方案很多，AMD/CommonJS/UMD/ES6Module等等，對應的框架和工具也很多，說起來很煩，大家自己百度吧；CSS模塊化開發基本上是less、sass、stylus等待預處理器import/mixin在特性支持下實現。
    雖然這些技術歷史悠久，但在今天的言必及中React時代有點落后，但考慮到行業中絕大多數團隊的工程落后，毫不夸張地說，前端團隊可以達到第三階段屬于高端行列，基本上有一般規模的開發和維護Web應用能力。
    但是，做到這一點就夠了嗎？Naive！
    當我們想開發一個完整的Web前端將面臨更多的工程問題，如：
    這無疑是一系列嚴重的系統工程問題。
    雖然前面提到的三個階段比喝血的時代進步了很多，但似乎還缺乏支持第四階段多人合作開發和精細性能優化的缺點。
    到底，缺什么？
    讀過《人月神話》的人應該聽說軟件工程沒有銀彈。是的，前端開發也沒有銀彈，但現在連™沒有鉛彈的年月！BB彈，摔）
    前端一直被稱為簡單。在前端開發者中，小而美的價值觀占據了主要的發言權，甚至成為一種信念。如果你想與他人交流你的項目經驗，你通常會得到兩個詞：太重了。
    工程方案也可以小而漂亮！但它的小而美并不意味著代碼的數量，而是意味著規則。找出問題的根源，制定最容易遵守和理解的開發規范或工具，以提高開發效率和工程質量，也是小而美的典范！
    2011年我有幸參加FIS在項目中，我們與百度眾多大中型項目的前端研發團隊合作，不斷探索實踐前端開發的工程解決方案，離開百度13年UC，面對完全不同的產品形式，不同的業務場景，不同的適應終端，甚至不同的網絡環境，過去的廣場**還能快速落地，為多個團隊的不同業務場景量身定制合理的前端解決方案。
    這些經歷讓我明白了一個道理:
    分治確實是一種非常重要的工程優化手段。在我看來，前端是一種GUI軟件，光有JS/CSS模塊化還不夠，對UI組件的分治也有同樣的迫切需要:
    如上圖所示，這是我所相信的前端組件開發理念，簡單解釋一下：
    第二項描述的附近維護原則是我認為最具工程價值的地方。它為前端開發提供了良好的分離策略。每個開發人員都會清楚地知道，他們開發和維護的功能單元的代碼必須存在于相應的組件目錄中，并且可以在此目錄中找到功能單元的所有內部邏輯和樣式，JS無論頁面結構如何，都在那里。
    無論是前端渲染的單頁應用，還是后端模板渲染的多頁應用，組件開發的概念都具有較高的通用性。HTML根據業務選擇的不同，部分可以是靜態的HTML可以是前端模板，也可以是后端模板：
    基于這一工程理念，我們很容易將系統劃分為獨立組件：
    由于系統功能分為獨立模塊或組件，粒度精細，組織松散，開發人員不依賴開發順序，大大提高平行開發效率，理論上允許新成員索賠組件開發或維護工作，更容易支持多個團隊維護大型網站開發。

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.dedgn.cn/news-id-76829.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注web前端頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050