掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
俗話說，人靠衣裝，佛靠金裝。大街上的小姐姐都喜歡把自己打扮得美美的，讓你忍不住多看幾眼，這就是裝飾的作用。
目前成都創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、保定網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
1. 前言
裝飾器是最新的 ECMA 中的一個提案，是一種與類（class）相關(guān)的語法，用來注釋或修改類和類方法。裝飾器在 Python 和 Java 等語言中也被大量使用。裝飾器是實現(xiàn) AOP（面向切面）編程的一種重要方式。
下面是一個使用裝飾器的簡單例子，這個 @readonly 可以將 count 屬性設(shè)置為只讀?？梢钥闯鰜恚b飾器大大提高了代碼的簡潔性和可讀性。
- class Person {
- @readonly count = 0;
- }
由于瀏覽器還未支持裝飾器，為了讓大家能夠正?？吹叫Ч@里我使用 Parcel 進行了一下簡單的配置，可以去 clone 這個倉庫后再來運行本文涉及到的所有例子，倉庫地址：[learn es6][https://github.com/yinguangyao/ES6]
本文涉及到 [Object.defineProperty][https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty]、高階函數(shù)等知識，如果之前沒有了解過相關(guān)概念，建議先了解后再來閱讀本文。
2. 裝飾器模式
在開始講解裝飾器之前，先從經(jīng)典的裝飾器模式說起。裝飾器模式是一種結(jié)構(gòu)型設(shè)計模式，它允許向一個現(xiàn)有的對象添加新的功能，同時又不改變其結(jié)構(gòu)，是作為對現(xiàn)有類的一個包裝。一般來說，在代碼設(shè)計中，我們應(yīng)當遵循「多用組合，少用繼承」的原則。通過裝飾器模式動態(tài)地給一個對象添加一些額外的職責。就增加功能來說，裝飾器模式相比生成子類更為靈活。
2.1 一個英雄聯(lián)盟的例子
下班回去和朋友愉快地開黑，當我正在用亞索「面對疾風吧」的時候，突然想到，如果讓我設(shè)計亞索英雄，我該怎么實現(xiàn)呢？
我想了想，肯定會先設(shè)計一個英雄的類。
- class Hero {
- attack() {}
- }
然后，再實現(xiàn)一個 Yasuo 的類來繼承這個 Hero 類。
- class Yasuo extends Hero {
- attack() {
- console.log("斬鋼閃");
- }
- }
我還在想這個問題的時候，隊友已經(jīng)打了大龍，我的亞索身上就出現(xiàn)了大龍 buff 的印記。我突然想到，那該怎么給英雄增加大龍 buff 呢？那增加個大龍 buff 的屬性不行嗎？當然不太行，要知道，英雄聯(lián)盟里面的大龍 buff 是會增加收益的。嗯，聰明的我已經(jīng)想到辦法了，再繼承一次不就好了嗎？
- class BaronYasuo extends Yasuo {
- }
厲害了，但是如果亞索身上還有其他 buff 呢？畢竟 LOL 里面是有紅 buff、藍 buff、大龍 buff等等存在，那豈不是有多少種就要增加多少個類嗎？
可以換種思路來思考這個問題，如果把 buff 當做我們身上的衣服。在不同的季節(jié)，我們會換上不同的衣服，到了冬天，甚至還會疊加多件衣服。當 buff 消失了，就相當于把這件衣服脫了下來。如下圖所示：
衣服對人來說起到裝飾的作用，buff 對于亞索來說也只是增強效果。那么，你是不是有思路了呢？沒錯，可以創(chuàng)建 Buff 類，傳入英雄類后獲得一個新的增強后的英雄類。
- class RedBuff extends Buff {
- constructor(hero) {
- this.hero = hero;
- }
- // 紅buff造成額外傷害
- extraDamage() {
- }
- attack() {
- returnthis.hero.attack() + this.extraDamage();
- }
- }
- class BlueBuff extends Buff {
- constructor(hero) {
- this.hero = hero;
- }
- // 技能CD（減10%）
- CDR() {
- returnthis.hero.CDR() * 0.9;
- }
- }
- class BaronBuff extends Buff {
- constructor(hero) {
- this.hero = hero;
- }
- // 回城速度縮短一半
- backSpeed() {
- returnthis.hero.backSpeed * 0.5;
- }
- }
定義好所有的 buff 類之后，就可以直接套用到英雄身上，這樣看起來是不是清爽了很多呢？這種寫法看起來很像函數(shù)組合。
- const yasuo = new Yasuo();
- const redYasuo = new RedBuff(yasuo); // 紅buff亞索
- const blueYasuo = new BlueBuff(yasuo); // 藍buff亞索
- const redBlueYasuo = new BlueBuff(redYasuo); // 紅藍buff亞索
3. ES7 裝飾器
decorator（裝飾器）是 ES7 中的一個提案，目前處于 stage-2 階段，提案地址：[JavaScript Decorators][https://github.com/tc39/proposal-decorators]。裝飾器與之前講過的函數(shù)組合（compose）以及高階函數(shù)很相似。裝飾器使用 @ 作為標識符，被放置在被裝飾代碼前面。在其他語言中，早就已經(jīng)有了比較成熟的裝飾器方案。
3.1 Python 中的裝飾器
先來看一下 Python 中的一個裝飾器的例子：
- def auth(func):
- def inner(request,*args,**kwargs):
- v = request.COOKIES.get('user')
- if not v:
- return redirect('/login')
- return func(request, *args,**kwargs)
- return inner
- @auth
- def index(request):
- v = request.COOKIES.get("user")
- return render(request,"index.html",{"current_user":v})
這個 auth 裝飾器是通過檢查 cookie 來判斷用戶是否登錄的。auth 函數(shù)是一個高階函數(shù)，它接收了一個 func 函數(shù)作為參數(shù)，返回了一個新的 inner 函數(shù)。在 inner 函數(shù)中進行 cookie 的檢查，由此來判斷是跳回登錄頁面還是繼續(xù)執(zhí)行 func 函數(shù)。在所有需要權(quán)限驗證的函數(shù)上，都可以使用這個 auth 裝飾器，很簡潔明了且無侵入。
3.2 JavaScript 裝飾器
JavaScript 中的裝飾器和 Python 的裝飾器類似，依賴于 Object.defineProperty，一般是用來裝飾類、類屬性、類方法。使用裝飾器可以做到不直接修改代碼，就實現(xiàn)某些功能，做到真正的面向切面編程。這在一定程度上和 Proxy 很相似，但使用起來比 Proxy 會更加簡潔。
注意：裝飾器目前還處于 stage-2，意味著語法之后也許會有變動。裝飾器用于函數(shù)、對象等等已經(jīng)有一些規(guī)劃，請看：[Future built-in decorators][https://github.com/tc39/proposal-decorators/blob/master/NEXTBUILTINS.md#applying-built-in-decorators-to-other-syntactic-forms]
3.3 類裝飾器
裝飾類的時候，裝飾器方法一般會接收一個目標類作為參數(shù)。下面是一個給目標類增加靜態(tài)屬性 test 的例子：
- const decoratorClass = (targetClass) => {
- targetClass.test = '123'
- }
- @decoratorClass
- class Test {}
- Test.test; // '123'
除了可以修改類本身，還可以通過修改原型，給實例增加新屬性。下面是給目標類增加 speak 方法的例子：
- const withSpeak = (targetClass) => {
- const prototype = targetClass.prototype;
- prototype.speak = function() {
- console.log('I can speak ', this.language);
- }
- }
- @withSpeak
- class Student {
- constructor(language) {
- this.language = language;
- }
- }
- const student1 = new Student('Chinese');
- const student2 = new Student('English');
- student1.speak(); // I can speak Chinese
- student2.speak(); // I can speak Chinese
利用高階函數(shù)的屬性，還可以給裝飾器傳參，通過參數(shù)來判斷對類進行什么處理。
- const withLanguage = (language) =>(targetClass) => {
- targetClass.prototype.language = language;
- }
- @withLanguage('Chinese')
- class Student {
- }
- const student = new Student();
- student.language; // 'Chinese'
如果你經(jīng)常編寫 react-redux 的代碼，那么也會遇到需要將 store 中的數(shù)據(jù)映射到組件中的情況。connect 是一個高階組件，它接收了兩個函數(shù) mapStateToProps 和 mapDispatchToProps 以及一個組件 App，最終返回了一個增強版的組件。
- class App extends React.Component {
- }
- connect(mapStateToProps, mapDispatchToProps)(App)
有了裝飾器之后，connect 的寫法可以變得更加優(yōu)雅。
- @connect(mapStateToProps, mapDispatchToProps)
- class App extends React.Component {
- }
3.4 類屬性裝飾器
類屬性裝飾器可以用在類的屬性、方法、get/set 函數(shù)中，一般會接收三個參數(shù)：
- function readonly(target, name, descriptor) {
- descriptor.writable = false;
- return descriptor;
- }
- class Person {
- @readonly name = 'person'
- }
- const person = new Person();
- person.name = 'tom';
還可以用來統(tǒng)計一個函數(shù)的執(zhí)行時間，以便于后期做一些性能優(yōu)化。
- function time(target, name, descriptor) {
- const func = descriptor.value;
- if (typeof func === 'function') {
- descriptor.value = function(...args) {
- console.time();
- const results = func.apply(this, args);
- console.timeEnd();
- return results;
- }
- }
- }
- class Person {
- @time
- say() {
- console.log('hello')
- }
- }
- const person = new Person();
- person.say();
在 react 老牌的狀態(tài)管理庫 mobx 中，也通過裝飾器來將類屬性置為可觀察屬性，以此來實現(xiàn)響應(yīng)式編程。
- import {
- observable,
- action,
- autorun
- } from 'mobx'
- class Store {
- @observable count = 1;
- @action
- changeCount(count) {
- this.count = count;
- }
- }
- const store = new Store();
- autorun(() => {
- console.log('count is ', store.count);
- })
- store.changeCount(10); // 修改 count 的值，會引起 autorun 中的函數(shù)自動執(zhí)行。
3.5 裝飾器組合
如果你想要使用多個裝飾器，那么該怎么辦呢？裝飾器是可以疊加的，根據(jù)離被裝飾類/屬性的距離來依次執(zhí)行。
- class Person {
- @time
- @log
- say() {}
- }
除此之外，在裝飾器的提案中，還出現(xiàn)了一種組合了多種裝飾器的裝飾器例子。目前還沒見到被使用。通過使用 decorator 來聲明一個組合裝飾器 xyz，這個裝飾器組合了多種裝飾器。
- decorator @xyz(arg, arg2 {
- @foo @bar(arg) @baz(arg2)
- }
- @xyz(1, 2) class C { }
和下面這種寫法是一樣的。
- @foo @bar(1) @baz(2)
- class C { }
4. 裝飾器可以做哪些有意思的事情？
4.1 多重繼承
之前我們在講解 JavaScript 多重繼承的時候，使用過 mixin 的方式，這里結(jié)合裝飾器甚至還能更進一步簡化 mixin 的使用。mixin 方法將會接收一個父類列表，用其裝飾目標類。我們理想中的用法應(yīng)該是這樣：
- @mixin(Parent1, Parent2, Parent3)
- class Child {}
和之前實現(xiàn)多重繼承的時候?qū)崿F(xiàn)原理一致，只需要拷貝父類的原型屬性和實例屬性就可以實現(xiàn)了。這里創(chuàng)建了一個新的 Mixin 類，來將 mixins 和 targetClass 上面的所有屬性都拷貝過去。
- const mixin = (...mixins) => (targetClass) => {
- mixins = [targetClass, ...mixins];
- function copyProperties(target, source) {
- for (let key of Reflect.ownKeys(source)) {
- if (key !== 'constructor'
- && key !== 'prototype'
- && key !== 'name'
- ) {
- let desc = Object.getOwnPropertyDescriptor(source, key);
- Object.defineProperty(target, key, desc);
- }
- }
- }
- class Mixin {
- constructor(...args) {
- for (let mixin of mixins) {
- copyProperties(this, new mixin(...args)); // 拷貝實例屬性
- }
- }
- }
- for (let mixin of mixins) {
- copyProperties(Mixin, mixin); // 拷貝靜態(tài)屬性
- copyProperties(Mixin.prototype, mixin.prototype); // 拷貝原型屬性
- }
- return Mixin;
- }
- export default mixin
我們來測試一下這個 mixin 方法是否能夠正常工作吧。
- class Parent1 {
- p1() {
- console.log('this is parent1')
- }
- }
- class Parent2 {
- p2() {
- console.log('this is parent2')
- }
- }
- class Parent3 {
- p3() {
- console.log('this is parent3')
- }
- }
- @mixin(Parent1, Parent2, Parent3)
- class Child {
- c1 = () => {
- console.log('this is child')
- }
- }
- const child = new Child();
- console.log(child);
最終在瀏覽器中打印出來的 child 對象是這樣的，證明了這個 mixin 是可以正常工作的。
注意：這里的 Child 類就是前面的 Mixin 類。
image.png-69.4kB
也許你會問，為什么還要多創(chuàng)建一個多余的 Mixin 類呢？為什么不能直接修改 targetClass 的 constructor 呢？前面不是講過 Proxy 可以攔截 constructor 嗎？恭喜你，你已經(jīng)想到了 Proxy 的一種使用場景。沒錯，這里用 Proxy 的確會更加優(yōu)雅。
- const mixin = (...mixins) =>(targetClass) => {
- function copyProperties(target, source) {
- for (let key ofReflect.ownKeys(source)) {
- if ( key !== 'constructor'
- && key !== 'prototype'
- && key !== 'name'
- ) {
- let desc = Object.getOwnPropertyDescriptor(source, key);
- Object.defineProperty(target, key, desc);
- }
- }
- }
- for (let mixin of mixins) {
- copyProperties(targetClass, mixin); // 拷貝靜態(tài)屬性
- copyProperties(targetClass.prototype, mixin.prototype); // 拷貝原型屬性
- }
- // 攔截 construct 方法，進行實例屬性的拷貝
- returnnewProxy(targetClass, {
- construct(target, args) {
- const obj = new target(...args);
- for (let mixin of mixins) {
- copyProperties(obj, new mixin()); // 拷貝實例屬性
- }
- return obj;
- }
- });
- }
4.2 防抖和節(jié)流
以往我們在頻繁觸發(fā)的場景下，為了優(yōu)化性能，經(jīng)常會使用到節(jié)流函數(shù)。下面以 React 組件綁定滾動事件為例子：
- class App extends React.Component {
- componentDidMount() {
- this.handleScroll = _.throttle(this.scroll, 500);
- window.addEveneListener('scroll', this.handleScroll);
- }
- componentWillUnmount() {
- window.removeEveneListener('scroll', this.handleScroll);
- }
- scroll() {}
- }
在組件中綁定事件需要注意應(yīng)當在組件銷毀的時候進行解綁。而由于節(jié)流函數(shù)返回了一個新的匿名函數(shù)，所以為了之后能夠有效解綁，不得不將這個匿名函數(shù)存起來，以便于之后使用。但是在有了裝飾器之后，我們就不必在每個綁定事件的地方都手動設(shè)置 throttle 方法，只需要在 scroll 函數(shù)添加一個 throttle 的裝飾器就行了。
- const throttle = (time) => {
- let prev = newDate();
- return(target, name, descriptor) => {
- const func = descriptor.value;
- if (typeof func === 'function') {
- descriptor.value = function(...args) {
- const now = newDate();
- if (now - prev > wait) {
- fn.apply(this, args);
- prev = newDate();
- }
- }
- }
- }
- }
使用起來比原來要簡潔很多。
- class App extends React.Component {
- componentDidMount() {
- window.addEveneListener('scroll', this.scroll);
- }
- componentWillUnmount() {
- window.removeEveneListener('scroll', this.scroll);
- }
- @throttle(50)
- scroll() {}
- }
而實現(xiàn)防抖（debounce）函數(shù)裝飾器和節(jié)流函數(shù)類似，這里也不再多說。
- const debounce = (time) => {
- let timer;
- return(target, name, descriptor) => {
- const func = descriptor.value;
- if (typeof func === 'function') {
- descriptor.value = function(...args) {
- if(timer) clearTimeout(timer)
- timer = setTimeout(()=> {
- fn.apply(this, args)
- }, wait)
- }
- }
- }
- }
如果對節(jié)流和防抖函數(shù)比較感興趣，那么可以去閱讀一下這篇文章：[函數(shù)節(jié)流與函數(shù)防抖][https://juejin.im/entry/58c0379e44d9040068dc952f]
4.3 數(shù)據(jù)格式驗證
通過類屬性裝飾器來對類的屬性進行類型的校驗。
- const validate = (type) =>(target, name) => {
- if (typeof target[name] !== type) {
- thrownewError(`attribute ${name} must be ${type} type`)
- }
- }
- class Form {
- @validate('string')
- name = 111// Error: attribute name must be ${type} type
- }
如果你覺得對屬性一個個手動去校驗太過麻煩，也可以通過編寫校驗規(guī)則，來對整個類進行校驗。
- const rules = {
- name: 'string',
- password: 'string',
- age: 'number'
- }
- const validator = rules =>targetClass => {
- returnnewProxy(targetClass, {
- construct(target, args) {
- const obj = new target(...args);
- for (let [name, type] ofObject.entries(rules)) {
- if (typeof obj[name] !== type) {
- thrownewError(`${name} must be ${type}`)
- }
- }
- return obj;
- }
- })
- }
- @validator(rules)
- class Person {
- name = 'tom'
- password = '123'
- age = '21'
- }
- const person = new Person();
4.4 core-decorators.js
core-decorators 是一個封裝了常用裝飾器的 JS 庫，它歸納了下面這些裝飾器（只列舉了部分）。
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動版官網(wǎng)