裝飾者模式
在提及這個新特性前我們先了解一下設(shè)計模式中的裝飾者模式组砚。
定義
裝飾者模式能夠在不改變對象自身的基礎(chǔ)上吻商，在程序運行期間給對像動態(tài)的添加職責。與繼承相比糟红，裝飾者是一種更輕便靈活的做法艾帐。
裝飾者模式 v.s. 適配器模式
裝飾者模式和適配器模式都是包裝模式 (Wrapper Pattern)，它們都是通過封裝其他對象達到設(shè)計的目的的盆偿，但是它們的形態(tài)有很大區(qū)別柒爸。
適配器模式我們使用的場景比較多，比如連接不同數(shù)據(jù)庫的情況事扭，你需要包裝現(xiàn)有的模塊接口捎稚，從而使之適配數(shù)據(jù)庫 —— 好比你手機使用轉(zhuǎn)接口來適配插座那樣；
裝飾者模式不一樣求橄，僅僅包裝現(xiàn)有的模塊今野，使之 “更加華麗” ，并不會影響原有接口的功能 —— 好比你給手機添加一個外殼罷了罐农，并不影響手機原有的通話条霜、充電等功能；
裝飾者模式使用場景
-
AOP（面向切面編程）
- 使用場景：安全檢查啃匿、緩存蛔外、調(diào)試蛆楞、持久化
封裝before/after函數(shù)
封裝axios添加參數(shù)，鑒權(quán)夹厌，錯誤監(jiān)聽等功能
為表單提交添加驗證函數(shù)
裝飾器decorator
裝飾器可以改變類的行為豹爹，也可以改變方法的行為。
裝飾器不能用于函數(shù)矛纹，因為存在函數(shù)提升問題臂聋。
-
裝飾器接受三個參數(shù)，因為它本質(zhì)上是利用了 ES5 的 Object.defineProperty 屬性或南，這三個參數(shù)其實是和 Object.defineProperty 參數(shù)一致的孩等，因此不能更改。
- 第一個參數(shù)是要裝飾的對象target
- 第二個參數(shù)是對象的屬性名key
- 第三個參數(shù)是該屬性的描述對象descriptor
// descriptor對象
{
value: specifiedFunction,
enumerable: false,
configurable: true,
writable: true
};
- 如果同一個方法有多個修飾器采够，會像剝洋蔥一樣肄方，先從外到內(nèi)進入，然后由內(nèi)向外執(zhí)行蹬癌。
立即開始
由于decorator是es7提供的方法权她，在瀏覽器中是無法直接運行的，所以我們需要提前作準備逝薪，對它進行編譯隅要。
- 安裝基礎(chǔ)插件
npm i babel-plugin-transform-decorators-legacy babel-register --save-dev
安裝：
babel-plugin-transform-decorators-legacy
babel-register
transform-decorators-legacy：
是第三方插件，用于支持decorators
babel-register：
用于接入node api
編寫你的裝飾器栗子decorator.js
創(chuàng)建compile.js
require('babel-register')({
plugins: ['transform-decorators-legacy']
});
require("./decorator.js")
- 運行compile.js
node compile
一個decorator栗子
// 主食加餐-方法裝飾器
function addMeat(target, key, descriptor) {
const method = descriptor.value;
let ret;
descriptor.value = (...args) => {
args[0] = '鰻魚炒飯';
ret = method.apply(target, args);
return ret;
}
return descriptor
}
// 飲料加餐-方法裝飾器
function addDrink(target, key, descriptor) {
const method = descriptor.value;
let ret;
descriptor.value = (...args) => {
args[1] = '莫吉托';
ret = method.apply(target, args);
return ret;
}
return descriptor
}
// 新增甜品-類裝飾器
function addDimSum(isAdd) {
return function(target) {
target.isAdd = isAdd;
let extra = isAdd ? ' (加餐加餐董济！另送一份拿破侖蛋糕' : '';
let method = target.prototype.toString;
target.prototype.toString = (...args) => {
return method.apply(target.prototype, args) + extra
}
return target
}
}
@addDimSum(true)
class Dinner {
constructor(meat, drink) {
this.init(meat, drink);
}
@addMeat
@addDrink
init (meat, drink) {
this.meat = meat;
this.drink = drink
}
toString () {
return `今日特價晚餐：${this.meat} 配 ${this.drink}`;
}
}
let todayDinner = new Dinner('白飯', '白開水');
console.log(`${todayDinner}`);
自己實現(xiàn)一個decorator
// 創(chuàng)建一個基類
function Dinner () {
this.meat = '白飯';
this.drink = '白開水';
}
Dinner.prototype.toString = function () {
return `今日特價晚餐：${this.meat} 配 ${this.drink}`;
}
// 創(chuàng)建一個裝飾器
var Decorator = function (dinner) {
this.dinner = dinner;
}
Decorator.prototype.toString = function () {
return this.dinner.toString();
}
// 繼承裝飾器
var AddMeat = function (dinner) {
dinner.meat = '鰻魚草飯';
Decorator.call(this, dinner);
}
AddMeat.prototype = new Decorator();
AddMeat.prototype.toString = function () {
return this.dinner.toString();
}
// 實例
var todayDinner = new Dinner('白飯');
todayDinner = new AddMeat(todayDinner);
console.log(`${todayDinner}`);
