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

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