細微處談前端重構

本文主要談談在前端重構中獲取到的一些經驗總結
大處着眼，小處着手！從細微處談談前端重構的一些注意事項
若是你的項目使用的前端模板，後端路由+渲染，本文可能不太符合
本文主要針對SPA類型前端應用。
建立一個前端應用大體會包含一些的流程

注： 測試放在開發以後也許是個錯誤，前端開發者也須要對測試有足夠的重視

本篇主要關注的是開發階段的一些細節， 一個項目運行通常會包含如下步驟

如今的不少框架，都幫助咱們作了其中很大一部分工做，可是仍是有不少細節之處，須要咱們注意！

1. 啓動應用時一般須要作些什麼

a. 加載監控

監控雖然是最後一環纔用到， 可是卻須要咱們在應用初始化的時候就開始使用

b. tracking

埋點，一般是用來作業務分析的重要依據，

原則1: 默認大於配置

咱們應該在使用統一的方式，如事件代理，對必要的埋點處作數據發送

const eventWhiteList = ['InputItem-module', 'AuthButton-module']
 window.addEventListener("mouseup", function (e) {
   if(e.target) {
     // 找到classlist
     const classList = e.target.classList;
     let moduleClassName = null
     for(let i=0; i< classList.length; i++) {
       if(classList[i].indexOf("-module__") > 0) {
         moduleClassName = classList[i]
         break;
       }
     }
     if(moduleClassName && !new RegExp("^("+eventWhiteList.join(")|(")+")").test(moduleClassName)) {
       // 截取class 除標識內容的hash部分
       moduleClassName = moduleClassName.replace(/___.+/, "")
       let innerText = e.target.innerText || ""
       Tracking.trackEvent('click', {'lmt-track-id': moduleClassName, 'activity': innerText.substr(0,30)})
     }
   }
 }, {capture: true})
複製代碼

這是一段基於taro設定的默認事件發送代碼

如上， 咱們須要根據本身使用框架，找到一些有規律的行爲， 並對該行爲進行解析，取出可以做爲tracking標識的部分，進行數據建立

2. 什麼是全局攔截器

主要用於應對一些必須在路由初始化以前作的攔截判斷

3. 初始化路由

爲何要單獨列出路由初始化呢， 僅僅只是一個路由定義嗎， 固然不是！

因爲SPA類應用，路由前置到了前端， 這時候咱們就須要考慮，路由切換帶來的一些反作用

原則2：頁面隔離

後端路由切換每每帶動的前端頁面刷新， 而前端路由的調整僅僅是地址的變化，

咱們就須要在必要節點對頁面信息進行銷燬，防止對下一個頁面產生反作用

重點： 定時器的銷燬是必定要注意的

注： 手動abort Fetch請求，教程較多
參考AbortController實現，考慮到兼容性問題，能夠實現一個虛擬的abort：即在resolve和reject中加上一個signal，經過程序設置，若是觸發signal則不處理響應便可

如，基於director的路由，咱們能夠這樣寫

// routeConfig爲定義的路由列表
var r = new director.Router (routeConfig).configure ({
          html5history: !!routerInc["settings"]["enableHistory"], run_in_init: true, convert_hash_in_init: true,
          before: function () {
            // 對上一個頁面作清理操做
            if (routerInc && routerInc.page ()) {
              routerInc.page ().isLoading (true);
              routerInc.page ().cancelXhr();
              routerInc.page ().modal.distoryModal();
              routerInc.clearPage();
            }
            var curUrl = !!routerInc["settings"]["enableHistory"] ? window.location.href.replace(window.location.protocol+"//"+window.location.host,"") : (this.delimiter+this.getRoute().join(this.delimiter);
            logger.debug ("all--------route---before");
            return ic.doInterceptor(curUrl, routerInc);
          },
          notfound: function () {
            //沒有對應路由
            //爲防止 沒法返回上一步, 改爲直接替換當前頁面的
            try{
              routerInc.page ().notFound();
            }catch (e){
              routerInc.redirect ("/notfound");
              logger.error(e);
            }
          }
        });
複製代碼

上述代碼中有個ic.doInterceptor， 這是一個過濾器調用類， 主要用於在路由中作一些同步過濾的工做

如上圖， 當遇到url須要登陸時，會直接redirect到login頁面， 上述功能可使用過濾器或責任鏈模式實現

注： 設計模式爲重構行爲提供了目標

4. 進入頁面初始化

也就是咱們一個頁面模塊的開發， 在該部分，咱們應該聚焦在業務的開發上，該階段，咱們一般關注的點有

原則3：專一業務

a. 參數傳遞

參數分三類
①. 路由規則上的參數
如 /pay/:type
type就是一個路由參數

②. search上的參數
如 /pay/online?orderid=xxxx

③. 組件間參數傳遞
使用內存傳遞參數，主要用於解決數據量大的狀況

b. 參數的安全性

有些頁面會直接將search中的內容顯示在頁面上， 如一些結果頁，接受到後臺的參數，展現給用戶

這時候就須要防止xss

參考獲取url中的queryString

c. 防止用戶串號

當一個用戶在同一瀏覽器的多tab頁面登陸不一樣帳戶時，須要加以提示

參考如何避免SPA應用中， 多個瀏覽器tab登陸致使串用戶的問題

d. ajax或fetch行爲的一致性

主要包括三類， 一是loading，二是緩存，三是結果轉換

應將通用的內容封裝到框架中，統一編碼行爲的難度永遠大於框架實現

一般都有這樣的邏輯，我在頁面A經過接口判斷是否須要進入頁面B, 同時未防止用戶手動輸入頁面B的地址直接進入， 咱們會在頁面A和B都進行接口判斷

這時候緩存幾秒的功能會很是實用

5. 頁面級別過濾器

主要用於頁面對象初始化以前的異步過濾， 根據當前頁面的業務對象進行過濾處理

可使用promise實現，參考實現以下

/** * 定義了一個公共的 filter * 用於處理一些 通用的頁面攔截邏輯 * @param resolve * @param rejected */
  var filter = function (resolve, reject) {
 
    let excutors = []
 
    // 如下定義你的過濾器，按順序執行
    new Filter1(excutors, promiseQueue);
    new Filter2(excutors, promiseQueue);
    new Filter3(excutors, promiseQueue);
     
 
    promiseQueue(excutors).then(() => {
      resolve(true)
    }).catch(cb => {
      reject(cb)
    })
 
  }
 
  function promiseQueue (executors, letGo) {
    return new ES6Promise((resolve, reject) => {
      if (!Array.isArray(executors)) {
        executors = Array.from(executors)
      }
      if (executors.length <= 0) {
        return resolve([])
      }
 
      var res = []
      executors = executors.map((x, i) => () => {
        var p = typeof x === 'function' ? new ES6Promise(x) : ES6Promise.resolve(x)
        p.then(response => {
          res[i] = response
          if (i === executors.length - 1) {
            resolve(res)
          } else {
            executors[i + 1]()
          }
        }, reject)
      })
      executors[0]()
      if (letGo) {
        resolve(true)
      }
    })
  }
複製代碼

6. 配置管理

當咱們上線一個充滿不肯定性或複雜的功能、根據環境變化的或者其餘須要配置開關變量的內容時，配置管理是一個優雅而且不可缺乏的功能

原則4：配置大於硬編碼

7. mock配置

完善的mock機制，能夠幫助咱們加快開發的進度
咱們基於yapi和配置管理，定義了一套靈活的mock機制
首先， 項目全部的api定義有個常量類
經過定義統一的api獲取方法， 將mock集成進去

var getApi = function(url, obj){
   var path = $.extend({}, apis, mock)[url] || url;
   if(obj){
     for(var o in obj){
       path = path.replace(":"+o,obj[o]);
     }
   }
   // 處理mock
   if(settings.mockConfig && settings.mockConfig.enable && $.inArray(url, mockPaths || []) >= 0){
     path = (mockPrefix||"") + path
   }
   return path;
 }
複製代碼

而後配合nginx或者node轉發