一、描述

在軟件開(kāi)發(fā)的領(lǐng)域當(dāng)中，一些工程化的東西是必不可少，它可以把我們的效率，質(zhì)量，還有團(tuán)隊(duì)合作，維護(hù)方面更加的輕松。

1、什么是工程化

定義

• 工程化即系統(tǒng)化、模塊化、規(guī)范化的一個(gè)過(guò)程。
• 如果說(shuō)計(jì)算機(jī)科學(xué)要解決的是系統(tǒng)的某個(gè)具體問(wèn)題，或者更通俗點(diǎn)說(shuō)面向編碼的，那么工程化要解決的是如何提高整個(gè)系統(tǒng)生成效率。
• 與其說(shuō)軟件工程是一門(mén)科學(xué)，不如說(shuō)它更偏向于管理學(xué)和方法論。
  解決什么問(wèn)題
• 工程化解決的問(wèn)題是，如何提高編碼、測(cè)試、維護(hù)階段的生產(chǎn)效率。

二、必要性

在一些簡(jiǎn)單的項(xiàng)目當(dāng)中，例如，邀請(qǐng)函H5項(xiàng)目等，這種純展示的，沒(méi)有什么業(yè)務(wù)邏輯，不涉及數(shù)據(jù)庫(kù)的項(xiàng)目當(dāng)中，其實(shí)是沒(méi)什么必要性的，因?yàn)榛ㄙM(fèi)一大堆時(shí)間搭起webpack,gulp,grunt,parcel，這些打包編譯工具，只會(huì)增加你的成本。打個(gè)比方，在生活當(dāng)中，我們有時(shí)候會(huì)接到一些私單，可能就純粹的HTML頁(yè)面，或者就類似于PPT式的展示項(xiàng)目，我們的目錄結(jié)構(gòu)，其實(shí)就很簡(jiǎn)單，可以搭建成以下。

三、工程化的發(fā)展

1.古老時(shí)代

在很早的時(shí)候，還沒(méi)出現(xiàn)Vue、React、Angular這些利用組件開(kāi)發(fā)和ajax實(shí)現(xiàn)頁(yè)面和與后端交互的時(shí)候，我們一般小公司，采取都是PHP或者Java等后端語(yǔ)言的模版引擎進(jìn)行開(kāi)發(fā)，也就是什么意思呢，如下圖。

圖片.png

從此圖可以看出，最辛苦的是PHP和JAVA，為什么呢？假設(shè)我的產(chǎn)品哥哥和小姐姐需要迭代某一個(gè)功能和頁(yè)面，又要前端重新的弄下一個(gè)按鈕的樣式啊之類的，弄完之后，又把靜態(tài)頁(yè)面給了我們苦逼的后端人員，那時(shí)候的后端人員，本人覺(jué)得才叫全棧工程師，為什么呢，因?yàn)槟０嬉嫱ǔＶ挥泻蠖巳藛T才會(huì)使用，以前的前端切圖仔只負(fù)責(zé)還原UI設(shè)計(jì)圖和血一些簡(jiǎn)單的交互，而且在這過(guò)程中，我們一般都會(huì)使用jquery，這里有一個(gè)不好的地方，一般對(duì)于沒(méi)什么經(jīng)驗(yàn)的后端人員來(lái)說(shuō)，通常很喜歡，前端給了的頁(yè)面，直接使用上面的class名，來(lái)操作元素，但是這有個(gè)很惡心的問(wèn)題帶來(lái)了，就是前端人員修改了樣式，刪了這個(gè)class名，這時(shí)候，測(cè)試發(fā)現(xiàn)了bug，點(diǎn)不了，或者報(bào)錯(cuò)，這又到了后端人員找來(lái)bug了，找了老半天可能才發(fā)現(xiàn)，前端人員原來(lái)修改樣式的時(shí)候把class名刪了，這時(shí)候前端后端大家一起推卸責(zé)任，這樣的開(kāi)發(fā)效率大大的減少。

這個(gè)時(shí)期，由于整個(gè)項(xiàng)目幾乎都是由后端人員進(jìn)行開(kāi)發(fā)完成交付，因此前后端的代碼經(jīng)?；祀s在一起。例如，php的娃娃們就很喜歡使用他們的模版符號(hào)""在頁(yè)面中嵌入后端代碼，從而實(shí)現(xiàn)數(shù)據(jù)交互。 一個(gè)簡(jiǎn)單的php使用場(chǎng)景代碼如下：

這顯然來(lái)說(shuō)長(zhǎng)期的項(xiàng)目迭代更新和維護(hù)，是十分困難的。

2.銅器時(shí)代

這個(gè)階段就是開(kāi)始有一些組件化的思想和異步加載的實(shí)現(xiàn)在項(xiàng)目里面。

“組件化”是指不再把所有代碼都放到一個(gè)文件里面，而是通過(guò)一些iframe和frameset的標(biāo)簽來(lái)進(jìn)行頁(yè)面的組織，把Javascript代碼放到“.js”文件里面，通過(guò)外部鏈接引入到頁(yè)面去。

異步加載，就要提到Ajax，這個(gè)技術(shù)幫助了開(kāi)發(fā)者提升網(wǎng)站性能，優(yōu)化用戶的體驗(yàn)，利用局部加載，使得頁(yè)面加載速度更快，用戶更加快速的看到頁(yè)面。也正因?yàn)閍jax的出現(xiàn)，一些前端框架也慢慢的興起。

3.農(nóng)業(yè)時(shí)代

在“銅器時(shí)代”出現(xiàn)的一些框架，讓開(kāi)發(fā)者更好的組織代碼，從而提高代碼的可讀性，增加維護(hù)性。

隨著產(chǎn)品項(xiàng)目越來(lái)越大，越來(lái)越復(fù)雜，代碼量也越來(lái)越多，大大降低了頁(yè)面加載的速度，影響了用戶體驗(yàn)。為了解決這個(gè)問(wèn)題，一些模塊加載的規(guī)范就衍生出來(lái)了，主要分成兩種，就是我們?cè)趧e人口中聽(tīng)到的AMD(Asynchronous Module Definition)和CMD(Common Module Definition)。

在實(shí)現(xiàn)AMD的規(guī)范的框架中，用得最多就是RequireJS，下面是一個(gè)依賴于Jquery來(lái)實(shí)現(xiàn)js代碼的RequireJS框架下的寫(xiě)法:

4.工業(yè)時(shí)代

在這個(gè)階段當(dāng)中，互聯(lián)網(wǎng)產(chǎn)品越來(lái)越復(fù)雜，交互也越來(lái)越多，為了降低開(kāi)發(fā)難度和成本，一些前端的MVC、MVVM框架就誕生了，一般統(tǒng)稱MV*，用得最多就是Backbone，AngularJS、React、Vue等。本人最喜歡其實(shí)就是Backbone和React。

這些框架的好處分別有：

前后端分離，不再有后端語(yǔ)言的依賴。

分層明確，代碼單一原則化，降低復(fù)雜度。

同時(shí)，就是這些框架的出現(xiàn)，為了更加提高團(tuán)隊(duì)的效率，出現(xiàn)了一大堆的打包工具，例如Gulp,Grunt,webpack等。更加靈活的使用它們做一些代碼壓縮混淆，編譯，單元測(cè)試，打包發(fā)布等重復(fù)性的任務(wù)，來(lái)降低開(kāi)發(fā)者的工作。

前端工程化要解決什么

1、制定各項(xiàng)規(guī)范，讓工作有章可循

1、統(tǒng)一團(tuán)隊(duì)成員的編碼規(guī)范，便于團(tuán)隊(duì)協(xié)作和代碼維護(hù)

目錄結(jié)構(gòu)，文件命名規(guī)范
編碼規(guī)范：eslint，stylelint

2、開(kāi)發(fā)流程的規(guī)范

使用敏捷，增強(qiáng)開(kāi)發(fā)進(jìn)度管理和控制
應(yīng)對(duì)各項(xiàng)風(fēng)險(xiǎn)，需求變更等
code review 機(jī)制
UAT 提升發(fā)布的需求的質(zhì)量

3、前后端接口規(guī)范，其他文檔規(guī)范

2. 使用合適的前端技術(shù)和框架，提高生產(chǎn)效率，降低維護(hù)難度

目標(biāo)： 職責(zé)分離、降低耦合，增強(qiáng)代碼的可讀性、維護(hù)性和測(cè)試性。

采用模塊化的方式組織代碼

JS 模塊化：AMD、CommonJS、UMD、ES6 Module
CSS 模塊化：less、sass、stylus、postCSS、css module
采用組件化的編程思想，處理 UI 層

react、vue、angular
將數(shù)據(jù)層分離管理

redux、mbox
使用面向?qū)ο蠡蛘吆瘮?shù)編程的方式組織架構(gòu)

3. 提高代碼的可測(cè)試性，引入單元測(cè)試，提高代碼質(zhì)量

4. 通過(guò)使用各種自動(dòng)化的工程工具，提升整個(gè)開(kāi)發(fā)、部署效率

原文鏈接：http://kuaibao.qq.com/s/20180331G02REF00?refer=cp_1026
https://yq.aliyun.com/articles/574270?utm_content=m_45413