前言
前端技術發展很快，很多專案面臨前端部分重構，很開心可以讓我進行這次專案前端的重構方案編寫，在思考的同時參考了網上很多資料，希望本篇重構方案有一定的完整性，可以帶給大家一些在面臨重構時有用的東西，同時希望路過的大牛小牛不領賜教，能給我略微指點下重構相關的點，在下感激不盡~
一、原專案梳理
首先對原來專案做一個大概的梳理，既然是重構，當然很多東西是可以繼續拿來使用的。
1.1頁面結構
我這邊負責的PC端的重構，所以先把頁面結構及之間的關係梳理了一遍，並用xmind畫好結構圖，重點功能做上標記，因為vue是漸進式框架，所以我會優先重構重要的部分
xmind結構圖我就不上了，職業操守還是要的
1.2專案結構
專案結構是針對程式碼組織結構的，梳理了專案各重要的資料夾及檔案並註明對應的內容或者作用。同樣的，使用xmind畫出結構圖，xmind圖略。
1.3前端框架、模板
使用公司內部人員自創框架C.F.F，自定義build檔案，內嵌Smarty模板獲取後臺資料，利用{$xxx}獲取後臺資料，但是定義了很多全域性變數儲存模板資料，造成佔用更多記憶體、汙染名稱空間等問題。
定義公共元件供各模組或特定場景呼叫，複用度高
1.4第三方庫、元件、外掛
jquery： JavaScript庫
html5shiv：用於解決IE9以下版本瀏 覽器對HTML5新增標籤不識別，並導致CSS不起作用的問題。
Dialog ： jquery彈窗外掛
jCarousel : jquery 輪播外掛 （重構版捨棄，原因不復雜的場景能原生實現儘量原生實現）
respond：為 IE6-8 以及其它不支援 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計
sideToolbar：導航工具
echarts： 圖形工具
…
二、重構方案
2.1開發規範
- 命名規範
- html/css/less/sass/scss/javascript編碼規範
- 程式碼檢查工具 eslint
規範這個東西沒有絕對的對錯，只有同公司或者同部門來制定規範大家都保持一致，同事之間能很快讀懂相互的程式碼，提高開發效率
2.2技術選型
- 2.2.1 開發模式：前後端分離
前後端分離開發早已成為趨勢，到現在新專案大多采用這種模式進行開發，專案完全重構的話當然首選此模式
好處：以前沒有前端這一職位之說，都是後端兼顧開發，資料庫、底層服務、介面，頁面一把梭，壓力大，而且精力有限不能在每個領域都做的出色。後來有切圖這一職，可以把頁面寫的更精美一些，通過模板和請求介面配合進行資料互動，前端都是緊緊耦合於後端，這種情況下開發，溝通成本，開發過程中進度依賴成本都是較高的。前後端分離後，分工更明確，各自專注做好自己領域的事，同時開工，不相互依賴，效率高
原理：（此圖來自某部落格，地址忘記。 望博主看到能聯絡我加上轉載出處，在此抱歉~）
開啟一個本地的伺服器來執行自己的前端程式碼，以此來模擬真實的線上環境；
利用nodejs的express框架來開啟一個本地的伺服器，然後利用nodejs的一個http-proxy-middleware外掛將客戶端發往nodejs的請求轉發給真正的伺服器，讓nodejs作為一箇中間層。
然後就是資料問題了，後端介面在開發中，前端需要資料怎麼辦呢？mockjs瞭解一下，
API地址https://github.com/nuysoft/Mo… ，當後端設計出AP介面文件後，我們就可以利用mockjs模擬出對應格式的假資料進行開發，等到介面完全完成之後，再進行介面聯調
- 2.2.2 MVVM框架：vue
Vue是一個漸進式框架，容易入手、容易協同，能夠快速靈活的開發迭代。同時也是目前主流三大框架裡學習成本最低的，目前，公司也在主推vue作為首選框架，進行相關技術的培訓。
Vue社群相對熱度高，元件、庫、輪子多，資源整合連結：https://segmentfault.com/p/12…
體積小、自由度高、腳手架建立的專案自帶webpack打包構建工具
雖然vue是單頁應用，但是可以通過配置webpack進行多頁開發
- 2.2.3 css預編譯語言
使用css預編譯語言來寫css會提高編寫css效率（具體提高多少百分比效率可自行測試，我覺得找一段寫好的css，先用css寫一遍，再用less或者其他寫一遍計算耗時百分比，這裡忽略寫樣式時候思考的時間進行測試）
預編譯語言可以定義變數（比如常用的顏色、字型、字號等）、巢狀寫法、可以繼承其他類的屬性、計算、內建函式等
- 2.2.4 常用類庫
圖形工具—echarts （對應場景 – xxx）
適配外掛—flexible taobaoH5終端適配方案 （對應場景—xxx）
Lodash – JS函式庫 （對應場景—xxx）
ElementUI – UI庫 （對應場景—xxx）
One-Page-Nav – 導航外掛 （對應場景—xxx）
具體場景我就不寫了，根據你們不同的業務需求去判斷需要哪些類庫外掛之類的，預先決定好，以免半途做什麼都要去花時間思考
2.3構建工具
既然選擇了vue框架，構建工具當然選擇vue自帶的webpack了，對於webpack有人說會配置專案就行，有人說要深入研究，這個看個人需求我覺得
2.4開發效率
- PS一鍵切圖功能
- emmet快速編寫HTML
|
1 |
#page>div.logo+ul#navigation>li*5>a{Item $} |
按下tab鍵，上述程式碼 等於
|
1 2 3 4 5 6 7 8 9 10 |
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div> |
背景：原專案寫的純css
- less/sass/scss 快速編寫css
比如
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
@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; } } } |
編譯後為：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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; } |
這裡只寫了一點點，功能還有很多的
less官網選我選我
sass官網：選我選我
- webpack：壓縮程式碼、圖片，合併JS，檢測檔案更新等自動進行
- webstorm自帶取色器（其他IDE應該都有，自行找下）
寫顏色色值的地方可以點選調出取色板（不限於css），可以選顏色也可以利用吸管取色（螢幕任意處 不限於IDE內部），也有取色的網站可以收藏到書籤工具資料夾裡
- Mockjs：上面有介紹mockjs，這裡不再贅述，由於本人有過手寫假資料的悲慘經歷，故把mockjs列入可以提高開發效率行列，因為前後端分離後前後端同時開發，假資料已成必須
比如：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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)) |
輸出：
- 模組化、元件化開發：前後端解耦後，前端之間配合也可以解耦，各自負責不同的模組開發，寫自己的元件，最後通訊部分再協同
2.5效能優化
- 2.5.1 資料存取
☆ 儘量使用區域性變數
☆ 物件成員的巢狀深度與讀取時間成正比，巢狀過深要進行優化
- 2.5.2 DOM
☆ 儘量減少DOM操作（訪問和修改都算）的次數
☆ 訪問元素時使用最快的API
☆ 使用事件委託來減少事件處理器的數量
☆ 減少重繪和重排的次數
- 2.5.3 演算法和流程
☆ for迴圈、while迴圈、do-whild迴圈比for in 要快
☆ 優化迴圈體的複雜度
☆ 最小化屬性查詢：
|
1 2 3 4 |
for(let i = 0, len = arr.length; i < len; i++){ ... } |
☆ 當條件較少時 使用if-else更易讀，而當條件較多時if-else效能負擔比switch大，易讀性也沒switch好。
☆ 對於if else 概率越大的條件越靠前判斷 比如：
☆ 當計算量很大且重複的時候，用Memoization快取計算結果
- 2.5.4 字串拼接
比較下四中字串拼接方法的效能：
A：str = str + ‘a’+’b’
B:str += ‘a’ + ‘b’
C: arr.join(”)
D:str.concat(‘b’,’c’)
☆ Chrome65上測試的是A優於B優於C優於D
其他瀏覽器不確定
- 2.5.5 Ajax
☆ 服務端設定HTTP頭資訊確保響應會被瀏覽器快取
☆ 客戶端講獲取的資訊存到本地避免再次請求（localstorage sessionstorage cookice）
☆ 設定HTTP頭資訊，expiresgaosu告訴瀏覽器快取多久
☆ 減少HTTP請求，合併css、js、圖片資原始檔等或使用MXHR
☆ 通過次要檔案用Ajax獲取可縮短頁面載入時間
這裡只列了比較重要的一部分，安利一下我之前寫的效能優化總結傳送門
2.6模組化元件化
模組化：以前由CommonJs、AMD、CMD等實現，現在ES6的Module（原生模組化）完全可以取而代之，靈活、高效是模組化開發的好處，對於某個模組我想輸出就輸出，想引入就引入，輸出引入也只需一個關鍵詞（export/import），而且ES6模組語法支援暴露常量、單一介面、所有介面、混合暴露、取別名等等靈活高效是毋庸置疑的
配合webpack在構建的時候把資源整合打包壓縮自動處理了一些以前需要手動進行的效能優化問題了
元件化：解決複雜業務的痛點，把複雜的業務分為很多個元件分開開發管理以降低開發難度和維護成本。一個5000行的頁面和十個500行命名規範的元件哪個開發、維護簡單？
元件靈活隨加隨用，可複用避免重複開發，可組合使用
2.7前端安全
- 2.7.1 XSS
XSS是指瀏覽器錯誤的將攻擊者提供的使用者輸入資料當做JavaScript指令碼給執行了
解決辦法：校驗使用者輸入，特殊字元進行轉義
Vue 雙花括號自帶過濾功能
- 2.7.2 本地儲存資料洩露
本地儲存的所有資料就都可能被攻擊者的JS指令碼讀取到，所以敏感、機密資訊都不建議在前端儲存
const常量 let 塊級作用域避免程式碼習慣不佳導致的作用域混亂問題
2.8使用者體驗
☆ 優化載入速度，減少使用者等待時間
☆ 減少不必要的無謂的操作
☆ 動畫互動合理，短平快的互動或者動畫更適合知學寶，我們是功能型網站不是欣賞型網站，不需要太花裡胡哨的動畫，那樣反而增加等待時間，適得其反
☆ 更賞心悅目的UI（字型、圖片、logo，按鈕、列表等）
☆ 處理好很多小的細節的地方，比如… 針對專案的地方就略了
關於使用者體驗這塊暫時沒找到比較權威的書，如果大家有覺得不錯的歡迎留言推薦~
end
寫的不是很細，但願很多地方都覆蓋到了，歡迎留言補充~
注：內容有不當或者錯誤處請指正~轉載請註明出處~謝謝合作！