decorator（修飾器）的業務應用

es6問世的時間也不短了，而且很多時候對es6所謂的「熟練應用」基本還停留在下面的幾種api應用：

(當然也可能是我用的比較簡單)

最近也是看了很多大神寫的**，確實學到了很多東西，這也讓我下定決心要更深層次的應用es6

本次我們介紹decrator（修飾器）在業務中的應用

首先我們先看下decrator的用法：

1.類修飾器（只有乙個引數）：

target -> 指向類，如果是型別是function，則指向myfunction.prototype

// 類修飾器
const animaldecorator = (target) => ;
@animaldecorator
class cat 
console.log(cat.isanimal); // true
console.log((new cat()).nickname); // 'nimo'

2.方法修飾器（有三個引數）

target -> 方法所在的類

key -> 方法名稱

descriptor -> 描述物件

// 方法修飾器
const log = (target, key, descriptor) => :', args)
}  return descriptor
};class util 
}util.setparam()    // 'setparam: '

上面的用法沒有傳引數，如果需要傳引數的話,內部需要return乙個方法,以方法修飾器為例

// 方法修飾器
const log = (name) =>  $:`, args)
}return descriptor
}};class util 
}util.setparam()    // 'setparam fortest: '

應用的話打日誌也算是一種，但是感覺應用場景有限，一般對關鍵業務操作才會用到。常規的業務感覺應用並不多。

下面介紹幾個常見的場景：

某個場景下需要同時請求多個介面，但這些介面都需要做登入驗證

傳送行為埋點，傳送前需要獲取token（如果cookie中有就從本地獲取，否則從介面獲取。注：這個token和登入沒關係，是用來計算pv和uv的唯一標識）

場景：頁面載入完成後，需要同時傳送多個行為埋點統計（如：pv、某些模組**點）

特點：每次傳送埋點都要檢查token是否存在，在本地cookie中沒有token的時候，就會從介面獲取，並種到本地。

看著邏輯好像沒問題。

實際：這些行為埋點方法呼叫的時機，基本上是同時發生。如果cookie中沒用token，這幾次api呼叫都會觸發獲取token介面的呼叫，這就導致多次不必要的請求。

目標：我們希望，就請求一次介面就可以了。

那麼，我們就需要處理傳送埋點的方法，一般有兩種方式：

統計方法：

...
/**   * 上報埋點
* @param  actiontype
* @param  pagetype
* @param  backup
*/static report (actiontype, pagetype, backup = {}) 
pagetype = pagetype.touppercase()
// 處理backup欄位
if (backup && typeof backup !== 'object') 
let commonparams = lestatic._options.commonbackup.call(this)
for (let param in backup)  與統一埋點引數名稱衝突，請注意檢查`, `actiontype:`, actiontype, 'pagetype:', pagetype, 'backup:', backup)}}
backup = object.assign(commonparams, backup)
backup = json.stringify(backup)
// 保證token的存在
zzlogin.ensuringexistingtoken().then(() => ,
success: (res) => 
},fail: (res) => 
})})
} catch (e) 
}

這塊看著好像沒做快取處理，別著急

關鍵點在：zzlogin.ensuringexistingtoken()的呼叫，我們來看下zzlogin中的ensuringexistingtoken方法

lib/zzlogin.js

import  from '@/lib/decorators'
class zzlogin 
*/@mergestep
static ensuringexistingtoken () 
// 獲取使用者token
zzlogin.gettoken().then(res => )
})}}

我們在呼叫ensuringexistingtoken 時加了修飾器，目的就是，即使同時刻多次呼叫，非同步請求也是被合併成了一次，其他次的呼叫也是在第一次非同步請求完成後，再進行統一呼叫。

來看看修飾器是怎麼寫的（mergestep）

lib/decorators.js

...
// 快取物件
const mergecache = {}
export function mergestep (target, funcname, descriptor) 
return new promise((resolve, reject) => )
// 觸發後將陣列置空
mergecache[funcname].fnlist.length = 0
})})
// 同時刻多次呼叫
} else )
})// 如果之前非同步狀態已經完成，則直接呼叫
} else 
}}  return descriptor
}

原理：其實修飾器大家知道麼，基本上都了解，可業務裡就是從來不用。包括es6中其它api也一樣，會用了才是自己的。

最近也是全組一起重新深入學習es6的應用，並且是結合實際業務。

後面也是打算對現有專案的公共庫進行演算法優化公升級。如果有機會再進行分享。

es6 Decorator類的修飾器

許多物件導向的語言都有修飾器 decorator 函式，用來修改類的行為。目前，有乙個提案將這項功能，引入了 ecmascript。testable class mytestableclass function testable target mytestableclass istestable t...

ES2017中的修飾器Decorator

修飾器 decorator 是乙個函式，用來修改類的行為。本文將詳細介紹es2017中的修飾器decorator es2017 引入了這項功能，目前 babel 轉碼器已經支援decorator 首先，安裝babel core和babel plugin transform decorators。由於...

ES6裡的修飾器Decorator

修飾器 decorator 是乙個函式，用來修改類的行為。es6 引入了這項功能，目前 babel 轉碼器已經支援decorator 首先，安裝babel core和babel plugin transform decorators。由於後者包括在babel preset stage 0之中，所以改...

decorator（修飾器）的業務應用

es6 Decorator類的修飾器

ES2017中的修飾器Decorator

ES6裡的修飾器Decorator

相關推薦