摘要：定義公共組件供各模塊或特定場(chǎng)景調(diào)用，復(fù)用度高第三方庫(kù)組件插件庫(kù)用于解決以下版本瀏覽器對(duì)新增標(biāo)簽不識(shí)別，并導(dǎo)致不起作用的問(wèn)題。

前端技術(shù)發(fā)展很快，很多項(xiàng)目面臨前端部分重構(gòu)，很開(kāi)心可以讓我進(jìn)行這次項(xiàng)目前端的重構(gòu)方案編寫，在思考的同時(shí)參考了網(wǎng)上很多資料，希望本篇重構(gòu)方案有一定的完整性，可以帶給大家一些在面臨重構(gòu)時(shí)有用的東西，同時(shí)希望路過(guò)的大牛小牛不領(lǐng)賜教，能給我略微指點(diǎn)下重構(gòu)相關(guān)的點(diǎn)，在下感激不盡~

首先對(duì)原來(lái)項(xiàng)目做一個(gè)大概的梳理，既然是重構(gòu)，當(dāng)然很多東西是可以繼續(xù)拿來(lái)使用的。

我這邊負(fù)責(zé)的PC端的重構(gòu)，所以先把頁(yè)面結(jié)構(gòu)及之間的關(guān)系梳理了一遍，并用xmind畫好結(jié)構(gòu)圖，重點(diǎn)功能做上標(biāo)記，因?yàn)関ue是漸進(jìn)式框架，所以我會(huì)優(yōu)先重構(gòu)重要的部分
xmind結(jié)構(gòu)圖我就不上了，職業(yè)操守還是要的

項(xiàng)目結(jié)構(gòu)是針對(duì)代碼組織結(jié)構(gòu)的，梳理了項(xiàng)目各重要的文件夾及文件并注明對(duì)應(yīng)的內(nèi)容或者作用。同樣的，使用xmind畫出結(jié)構(gòu)圖，xmind圖略。

使用公司內(nèi)部人員自創(chuàng)框架C.F.F，自定義build文件，內(nèi)嵌Smarty模板獲取后臺(tái)數(shù)據(jù)，利用{$xxx}獲取后臺(tái)數(shù)據(jù)，但是定義了很多全局變量存儲(chǔ)模板數(shù)據(jù)，造成占用更多內(nèi)存、污染命名空間等問(wèn)題。
定義公共組件供各模塊或特定場(chǎng)景調(diào)用，復(fù)用度高

jquery： JavaScript庫(kù)
html5shiv：用于解決IE9以下版本瀏 覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題。
Dialog ： jquery彈窗插件
jCarousel : jquery 輪播插件 （重構(gòu)版舍棄，原因不復(fù)雜的場(chǎng)景能原生實(shí)現(xiàn)盡量原生實(shí)現(xiàn)）
respond：為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
sideToolbar：導(dǎo)航工具
echarts： 圖形工具
...

命名規(guī)范

html/css/less/sass/scss/javascript編碼規(guī)范

代碼檢查工具 eslint

規(guī)范這個(gè)東西沒(méi)有絕對(duì)的對(duì)錯(cuò)，只有同公司或者同部門來(lái)制定規(guī)范大家都保持一致，同事之間能很快讀懂相互的代碼，提高開(kāi)發(fā)效率

2.2技術(shù)選型

2.2.1 開(kāi)發(fā)模式：前后端分離

前后端分離開(kāi)發(fā)早已成為趨勢(shì)，到現(xiàn)在新項(xiàng)目大多采用這種模式進(jìn)行開(kāi)發(fā)，項(xiàng)目完全重構(gòu)的話當(dāng)然首選此模式
好處：以前沒(méi)有前端這一職位之說(shuō)，都是后端兼顧開(kāi)發(fā)，數(shù)據(jù)庫(kù)、底層服務(wù)、接口，頁(yè)面一把梭，壓力大，而且精力有限不能在每個(gè)領(lǐng)域都做的出色。后來(lái)有切圖這一職，可以把頁(yè)面寫的更精美一些，通過(guò)模板和請(qǐng)求接口配合進(jìn)行數(shù)據(jù)交互，前端都是緊緊耦合于后端，這種情況下開(kāi)發(fā)，溝通成本，開(kāi)發(fā)過(guò)程中進(jìn)度依賴成本都是較高的。前后端分離后，分工更明確，各自專注做好自己領(lǐng)域的事，同時(shí)開(kāi)工，不相互依賴，效率高
原理：（此圖來(lái)自某博客，地址忘記。 望博主看到能聯(lián)系我加上轉(zhuǎn)載出處，在此抱歉~）

開(kāi)啟一個(gè)本地的服務(wù)器來(lái)運(yùn)行自己的前端代碼，以此來(lái)模擬真實(shí)的線上環(huán)境；
利用nodejs的express框架來(lái)開(kāi)啟一個(gè)本地的服務(wù)器，然后利用nodejs的一個(gè)http-proxy-middleware插件將客戶端發(fā)往nodejs的請(qǐng)求轉(zhuǎn)發(fā)給真正的服務(wù)器，讓nodejs作為一個(gè)中間層。
然后就是數(shù)據(jù)問(wèn)題了，后端接口在開(kāi)發(fā)中，前端需要數(shù)據(jù)怎么辦呢？mockjs了解一下，
API地址https://github.com/nuysoft/Mo... ，當(dāng)后端設(shè)計(jì)出AP接口文檔后，我們就可以利用mockjs模擬出對(duì)應(yīng)格式的假數(shù)據(jù)進(jìn)行開(kāi)發(fā)，等到接口完全完成之后，再進(jìn)行接口聯(lián)調(diào)

2.2.2 MVVM框架：vue

Vue是一個(gè)漸進(jìn)式框架，容易入手、容易協(xié)同，能夠快速靈活的開(kāi)發(fā)迭代。同時(shí)也是目前主流三大框架里學(xué)習(xí)成本最低的，目前，公司也在主推vue作為首選框架，進(jìn)行相關(guān)技術(shù)的培訓(xùn)。
Vue社區(qū)相對(duì)熱度高，組件、庫(kù)、輪子多，資源整合鏈接：https://segmentfault.com/p/12...
體積小、自由度高、腳手架創(chuàng)建的項(xiàng)目自帶webpack打包構(gòu)建工具
雖然vue是單頁(yè)應(yīng)用，但是可以通過(guò)配置webpack進(jìn)行多頁(yè)開(kāi)發(fā)

2.2.3 css預(yù)編譯語(yǔ)言

使用css預(yù)編譯語(yǔ)言來(lái)寫css會(huì)提高編寫css效率（具體提高多少百分比效率可自行測(cè)試，我覺(jué)得找一段寫好的css，先用css寫一遍，再用less或者其他寫一遍計(jì)算耗時(shí)百分比，這里忽略寫樣式時(shí)候思考的時(shí)間進(jìn)行測(cè)試）
預(yù)編譯語(yǔ)言可以定義變量（比如常用的顏色、字體、字號(hào)等）、嵌套寫法、可以繼承其他類的屬性、計(jì)算、內(nèi)置函數(shù)等

2.2.4 常用類庫(kù)

圖形工具—echarts （對(duì)應(yīng)場(chǎng)景 – xxx）
適配插件—flexible taobaoH5終端適配方案 （對(duì)應(yīng)場(chǎng)景—xxx）
Lodash – JS函數(shù)庫(kù) （對(duì)應(yīng)場(chǎng)景—xxx）
ElementUI – UI庫(kù) （對(duì)應(yīng)場(chǎng)景—xxx）
One-Page-Nav – 導(dǎo)航插件 （對(duì)應(yīng)場(chǎng)景—xxx）
具體場(chǎng)景我就不寫了，根據(jù)你們不同的業(yè)務(wù)需求去判斷需要哪些類庫(kù)插件之類的，預(yù)先決定好，以免半途做什么都要去花時(shí)間思考

既然選擇了vue框架，構(gòu)建工具當(dāng)然選擇vue自帶的webpack了，對(duì)于webpack有人說(shuō)會(huì)配置項(xiàng)目就行，有人說(shuō)要深入研究，這個(gè)看個(gè)人需求我覺(jué)得

PS一鍵切圖功能

emmet快速編寫HTML

#page>div.logo+ul#navigation>li*5>a{Item $}

按下tab鍵，上述代碼 等于

    

    

        
Item 1
        
Item 2
        
Item 3
        
Item 4
        
Item 5
    

背景：原項(xiàng)目寫的純css

less/sass/scss 快速編寫css

比如

@base-size: 40px;
@theme-color: #ccc;
@my-selector: title;

.aa {
  font-weight: bold;
}

.@{my-selector} {
  font-size: @base-size;
  color: @theme-color;
  margin: 100/2px 200/10px;
  &-ok {
    color: green;
  }
  &-no {
    color: yellow;
  }
  > li{
    &:extend(.aa);
    &:hover {
      color: #fff;
    }
  }
}

編譯后為：

.aa,
.title > li {
  font-weight: bold;
}
.title {
  font-size: 40px;
  color: #ccc;
  margin: 50px 20px;
}
.title-ok {
  color: green;
}
.title-no {
  color: yellow;
}
.title > li:hover {
  color: #fff;
}

這里只寫了一點(diǎn)點(diǎn)，功能還有很多的
less官網(wǎng)選我選我
sass官網(wǎng)：選我選我

webpack：壓縮代碼、圖片，合并JS，檢測(cè)文件更新等自動(dòng)進(jìn)行

webstorm自帶取色器（其他IDE應(yīng)該都有，自行找下）

寫顏色色值的地方可以點(diǎn)擊調(diào)出取色板（不限于css），可以選顏色也可以利用吸管取色（屏幕任意處 不限于IDE內(nèi)部），也有取色的網(wǎng)站可以收藏到書簽工具文件夾里

Mockjs：上面有介紹mockjs，這里不再贅述，由于本人有過(guò)手寫假數(shù)據(jù)的悲慘經(jīng)歷，故把mockjs列入可以提高開(kāi)發(fā)效率行列，因?yàn)榍昂蠖朔蛛x后前后端同時(shí)開(kāi)發(fā)，假數(shù)據(jù)已成必須

比如：

let template = {
    "anchorList|3-6":[{
      "id|1-100": 1,
      "name": "@cname",
      "date": "@date(yyyy-MM-dd)",
      biubiubiu: () => Mock.Random.string("abcdefghijklmnopqrstuvwxyz", 5),
      "arr|2-5": [{
        "age|10-20": 0
      }]
    }]
  }
  console.log(Mock.mock(template))

輸出：

模塊化、組件化開(kāi)發(fā)：前后端解耦后，前端之間配合也可以解耦，各自負(fù)責(zé)不同的模塊開(kāi)發(fā)，寫自己的組件，最后通信部分再協(xié)同

2.5.1 數(shù)據(jù)存取

☆ 盡量使用局部變量
☆ 對(duì)象成員的嵌套深度與讀取時(shí)間成正比，嵌套過(guò)深要進(jìn)行優(yōu)化

2.5.2 DOM

☆ 盡量減少DOM操作（訪問(wèn)和修改都算）的次數(shù)
☆ 訪問(wèn)元素時(shí)使用最快的API
☆ 使用事件委托來(lái)減少事件處理器的數(shù)量
☆ 減少重繪和重排的次數(shù)

2.5.3 算法和流程

☆ for循環(huán)、while循環(huán)、do-whild循環(huán)比f(wàn)or in 要快
☆ 優(yōu)化循環(huán)體的復(fù)雜度
☆ 最小化屬性查找：
for(let i = 0, len = arr.length; i < len; i++){

...

}
☆ 當(dāng)條件較少時(shí) 使用if-else更易讀，而當(dāng)條件較多時(shí)if-else性能負(fù)擔(dān)比switch大，易讀性也沒(méi)switch好。
☆ 對(duì)于if else 概率越大的條件越靠前判斷 比如：

☆ 當(dāng)計(jì)算量很大且重復(fù)的時(shí)候，用Memoization緩存計(jì)算結(jié)果

2.5.4 字符串拼接

比較下四中字符串拼接方法的性能：
A：str = str + "a"+"b"
B:str += "a" + "b"
C: arr.join("")
D:str.concat("b","c")
☆ Chrome65上測(cè)試的是A優(yōu)于B優(yōu)于C優(yōu)于D
其他瀏覽器不確定

2.5.5 Ajax

☆ 服務(wù)端設(shè)置HTTP頭信息確保響應(yīng)會(huì)被瀏覽器緩存
☆ 客戶端講獲取的信息存到本地避免再次請(qǐng)求（localstorage sessionstorage cookice）
☆ 設(shè)置HTTP頭信息，expiresgaosu告訴瀏覽器緩存多久
☆ 減少HTTP請(qǐng)求，合并css、js、圖片資源文件等或使用MXHR
☆ 通過(guò)次要文件用Ajax獲取可縮短頁(yè)面加載時(shí)間

這里只列了比較重要的一部分，安利一下我之前寫的性能優(yōu)化總結(jié)傳送門

模塊化：以前由CommonJs、AMD、CMD等實(shí)現(xiàn)，現(xiàn)在ES6的Module（原生模塊化）完全可以取而代之，靈活、高效是模塊化開(kāi)發(fā)的好處，對(duì)于某個(gè)模塊我想輸出就輸出，想引入就引入，輸出引入也只需一個(gè)關(guān)鍵詞（export/import），而且ES6模塊語(yǔ)法支持暴露常量、單一接口、所有接口、混合暴露、取別名等等靈活高效是毋庸置疑的
配合webpack在構(gòu)建的時(shí)候把資源整合打包壓縮自動(dòng)處理了一些以前需要手動(dòng)進(jìn)行的性能優(yōu)化問(wèn)題了
組件化：解決復(fù)雜業(yè)務(wù)的痛點(diǎn)，把復(fù)雜的業(yè)務(wù)分為很多個(gè)組件分開(kāi)開(kāi)發(fā)管理以降低開(kāi)發(fā)難度和維護(hù)成本。一個(gè)5000行的頁(yè)面和十個(gè)500行命名規(guī)范的組件哪個(gè)開(kāi)發(fā)、維護(hù)簡(jiǎn)單？
組件靈活隨加隨用，可復(fù)用避免重復(fù)開(kāi)發(fā)，可組合使用

2.7.1 XSS

XSS是指瀏覽器錯(cuò)誤的將攻擊者提供的用戶輸入數(shù)據(jù)當(dāng)做JavaScript腳本給執(zhí)行了
解決辦法：校驗(yàn)用戶輸入，特殊字符進(jìn)行轉(zhuǎn)義
Vue 雙花括號(hào)自帶過(guò)濾功能

2.7.2 本地存儲(chǔ)數(shù)據(jù)泄露

本地存儲(chǔ)的所有數(shù)據(jù)就都可能被攻擊者的JS腳本讀取到，所以敏感、機(jī)密信息都不建議在前端存儲(chǔ)
const常量 let 塊級(jí)作用域避免代碼習(xí)慣不佳導(dǎo)致的作用域混亂問(wèn)題

☆ 優(yōu)化加載速度，減少用戶等待時(shí)間
☆ 減少不必要的無(wú)謂的操作
☆ 動(dòng)畫交互合理，短平快的交互或者動(dòng)畫更適合知學(xué)寶，我們是功能型網(wǎng)站不是欣賞型網(wǎng)站，不需要太花里胡哨的動(dòng)畫，那樣反而增加等待時(shí)間，適得其反
☆ 更賞心悅目的UI（字體、圖片、logo，按鈕、列表等）
☆ 處理好很多小的細(xì)節(jié)的地方，比如... 針對(duì)項(xiàng)目的地方就略了

關(guān)于用戶體驗(yàn)這塊暫時(shí)沒(méi)找到比較權(quán)威的書，如果大家有覺(jué)得不錯(cuò)的歡迎留言推薦~

寫的不是很細(xì)，但愿很多地方都覆蓋到了，歡迎留言補(bǔ)充~
注：內(nèi)容有不當(dāng)或者錯(cuò)誤處請(qǐng)指正~轉(zhuǎn)載請(qǐng)注明出處~謝謝合作！