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

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