前端重構方案瞭解一下

時間 2019-11-10

標籤前端方案瞭解一下简体版

原文原文鏈接

前言javascript

前端技術發展很快，不少項目面臨前端部分重構，很開心可讓我進行此次項目前端的重構方案編寫，在思考的同時參考了網上不少資料，但願本篇重構方案有必定的完整性，能夠帶給你們一些在面臨重構時有用的東西，同時但願路過的大牛小牛不領賜教，能給我略微指點下重構相關的點，在下感激涕零~css

1、原項目梳理html

首先對原來項目作一個大概的梳理，既然是重構，固然不少東西是能夠繼續拿來使用的。前端

1.1頁面結構vue

我這邊負責的PC端的重構，因此先把頁面結構及之間的關係梳理了一遍，並用xmind畫好結構圖，重點功能作上標記，由於vue是漸進式框架，因此我會優先重構重要的部分html5

xmind結構圖我就不上了，職業操守仍是要的java

1.2項目結構node

項目結構是針對代碼組織結構的，梳理了項目各重要的文件夾及文件並註明對應的內容或者做用。一樣的，使用xmind畫出結構圖，xmind圖略。jquery

1.3前端框架、模板webpack

使用公司內部人員自創框架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、重構方案

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/1210000008583242/read?from=timeline#UI%E7%BB%84%E4%BB%B6）

體積小、自由度高、腳手架建立的項目自帶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

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

按下tab鍵，上述代碼等於

<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

好比

@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;
}

這裏只寫了一點點，功能還有不少的

less官網（https://less.bootcss.com/features/）

sass官網（https://www.sass.hk/）

webpack：壓縮代碼、圖片，合併JS，檢測文件更新等自動進行
webstorm自帶取色器（其餘IDE應該都有，自行找下）

寫顏色色值的地方能夠點擊調出取色板（不限於css），能夠選顏色也能夠利用吸管取色（屏幕任意處不限於IDE內部），也有取色的網站能夠收藏到書籤工具文件夾裏

Mockjs：上面有介紹mockjs，這裏再也不贅述，因爲本人有過手寫假數據的悲慘經歷，故把mockjs列入能夠提升開發效率行列，由於先後端分離後先後端同時開發，假數據已成必須

好比：

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 要快

☆ 優化循環體的複雜度

☆ 最小化屬性查找：

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用戶體驗