細微處談前端重構

2019 年 12 月 6 日
筆記

本文主要談談在前端重構中獲取到的一些經驗總結

大處著眼，小處著手！從細微處談談前端重構的一些注意事項

如果你的項目使用的前端模板，後端路由+渲染，本文可能不太符合。本文主要針對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：https://w.url.cn/s/A4TUr3A

c. 防止用戶串號

當一個用戶在同一瀏覽器的多tab頁面登錄不同賬戶時，需要加以提示

參考：

如何避免SPA應用中，多個瀏覽器tab登錄導致串用戶的問題：https://blog.uproject.cn/articles/2019/04/04/1554360913525.html

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轉發

作者：hugh_

來源：掘金

原文鏈接：https://juejin.im/post/5d4edd516fb9a06b2d77c3d7