關(guān)于前端框架的淺談

小編給大家分享一下關(guān)于前端框架的淺談，相信大部分人都還不怎么了解，因此分享這篇文章給大家學(xué)習(xí)，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去學(xué)習(xí)方法吧！

大處著眼，小處著手！從細(xì)微處談?wù)勄岸酥貥?gòu)的一些注意事項。

如果你的項目使用的前端模板，后端路由+渲染，本文可能不太符合。本文主要針對SPA類型前端應(yīng)用。

創(chuàng)建一個前端應(yīng)用大致會包含一些的流程

注：測試放在開發(fā)之后也許是個錯誤，前端開發(fā)者也需要對測試有足夠的重視

本篇主要關(guān)注的是開發(fā)階段的一些細(xì)節(jié)， 一個項目運行一般會包含以下步驟

現(xiàn)在的很多框架，都幫助我們做了其中很大一部分工作，但是還是有很多細(xì)節(jié)之處，需要我們注意！

1. 啟動應(yīng)用時通常需要做些什么

a. 加載監(jiān)控

監(jiān)控雖然是最后一環(huán)才用到， 但是卻需要我們在應(yīng)用初始化的時候就開始使用

b. tracking

埋點，通常是用來做業(yè)務(wù)分析的重要依據(jù)，

原則1: 默認(rèn)大于配置

我們應(yīng)該在使用統(tǒng)一的方式，如事件代理，對必要的埋點處做數(shù)據(jù)發(fā)送

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 除標(biāo)識內(nèi)容的hash部分
       moduleClassName = moduleClassName.replace(/___.+/, "")
       let innerText = e.target.innerText || ""
       Tracking.trackEvent('click', {'lmt-track-id': moduleClassName, 'activity': innerText.substr(0,30)})
     }
   }
 }, {capture: true})

這是一段基于taro設(shè)定的默認(rèn)事件發(fā)送代碼

如上， 我們需要根據(jù)自己使用框架，找到一些有規(guī)律的行為， 并對該行為進(jìn)行解析，取出能夠作為tracking標(biāo)識的部分，進(jìn)行數(shù)據(jù)創(chuàng)建

2. 什么是全局?jǐn)r截器

主要用于應(yīng)對一些必須在路由初始化之前做的攔截判斷

3. 初始化路由

為什么要單獨列出路由初始化呢， 僅僅只是一個路由定義嗎， 當(dāng)然不是！

由于SPA類應(yīng)用，路由前置到了前端， 這時候我們就需要考慮，路由切換帶來的一些副作用

原則2：頁面隔離

后端路由切換往往帶動的前端頁面刷新， 而前端路由的調(diào)整僅僅是地址的變化，

我們就需要在必要節(jié)點對頁面信息進(jìn)行銷毀，防止對下一個頁面產(chǎn)生副作用

重點：定時器的銷毀是一定要注意的

注：手動abort Fetch請求，教程較多

參考AbortController實現(xiàn)，考慮到兼容性問題，可以實現(xiàn)一個虛擬的abort：即在resolve和reject中加上一個signal，通過程序設(shè)置，如果觸發(fā)signal則不處理響應(yīng)即可

如，基于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 () {
            //沒有對應(yīng)路由
            //為防止 無法返回上一步, 改成直接替換當(dāng)前頁面的
            try{
              routerInc.page ().notFound();
            }catch (e){
              routerInc.redirect ("/notfound");
              logger.error(e);
            }
          }
        });

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

如上圖， 當(dāng)遇到url需要登錄時，會直接redirect到login頁面， 上述功能可以使用過濾器或責(zé)任鏈模式實現(xiàn)

注：設(shè)計模式為重構(gòu)行為提供了目標(biāo)

4. 進(jìn)入頁面初始化

也就是我們一個頁面模塊的開發(fā)， 在該部分，我們應(yīng)該聚焦在業(yè)務(wù)的開發(fā)上，該階段，我們通常關(guān)注的點有

原則3：專注業(yè)務(wù)

a. 參數(shù)傳遞

參數(shù)分三類

①. 路由規(guī)則上的參數(shù)

    如 /pay/:type

    type就是一個路由參數(shù)

②. search上的參數(shù)

    如 /pay/online?orderid=xxxx

③. 組件間參數(shù)傳遞

    使用內(nèi)存?zhèn)鬟f參數(shù)，主要用于解決數(shù)據(jù)量大的情況

b. 參數(shù)的安全性

有些頁面會直接將search中的內(nèi)容顯示在頁面上， 如一些結(jié)果頁，接受到后臺的參數(shù)，展示給用戶

這時候就需要防止xss

參考獲取url中的queryString：https://w.url.cn/s/A4TUr3A

c. 防止用戶串號

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

參考：

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

d. ajax或fetch行為的一致性

主要包括三類， 一是loading，二是緩存，三是結(jié)果轉(zhuǎn)換

應(yīng)將通用的內(nèi)容封裝到框架中，統(tǒng)一編碼行為的難度永遠(yuǎn)大于框架實現(xiàn)

通常都有這樣的邏輯，我在頁面A通過接口判斷是否需要進(jìn)入頁面B, 同時未防止用戶手動輸入頁面B的地址直接進(jìn)入， 我們會在頁面A和B都進(jìn)行接口判斷

這時候緩存幾秒的功能會非常實用

5. 頁面級別過濾器

主要用于頁面對象初始化之前的異步過濾， 根據(jù)當(dāng)前頁面的業(yè)務(wù)對象進(jìn)行過濾處理

可以使用promise實現(xiàn)，參考實現(xiàn)如下

/**
   * 定義了一個公共的 filter
   * 用于處理一些 通用的頁面攔截邏輯
   * @param resolve
   * @param rejected
   */
  var filter = function (resolve, reject) {
 
    let excutors = []
 
    // 以下定義你的過濾器，按順序執(zhí)行
    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. 配置管理

當(dāng)我們上線一個充滿不確定性或復(fù)雜的功能、根據(jù)環(huán)境變化的或者其他需要配置開關(guān)變量的內(nèi)容時，配置管理是一個優(yōu)雅并且不可缺少的功能

原則4：配置大于硬編碼

7. mock配置

完善的mock機制，可以幫助我們加快開發(fā)的進(jìn)度

我們基于yapi和配置管理，定義了一套靈活的mock機制

首先， 項目所有的api定義有個常量類

通過定義統(tǒng)一的api獲取方法， 將mock集成進(jìn)去

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

以上是關(guān)于前端框架的淺談的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！