JavaScript設計模式之裝飾器模式
阿新 • • 發佈:2018-11-25
為物件新增新功能;不改變其原有的結構和功能。
手機殼就是裝飾器,沒有它手機也能正常使用,原有的功能不變,手機殼可以減輕手機滑落的損耗。
程式碼示例
class Circle { draw() { console.log('畫一個圓形') } } class Decorator { constructor(circle) { this.circle = circle } draw() { this.circle.draw() this.setRedBorder(circle) } setRedBorder(circle) { console.log('設定紅色邊框') } } // 測試 let circle = new Circle() circle.draw() let decorator = new Decorator(cicle) decorator.draw()
ES7裝飾器
// 簡單的裝飾器
@testDec // 裝飾器
class Demo {}
function testDec(target){
target.isDec = true
}
console.log(Demo.isDec) // true
// 裝飾器原理
@decorator
class A {}
// 等同於
class A {}
A = decorator(A) || A; // 把A 作為引數,返回執行的結果
// 傳引數 function testDec(isDec) { return function(target) { // 這裡要 return 一個函式 target.isDec = isDec; } } @testDec(true) class Demo { // ... } alert(Demo.isDec) // true
裝飾類
function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
const Foo = {
foo() {
console.log('foo')
}
}
@mixins(Foo)
class MyClass{}
let myclass = new MyClass()
myclass.foo() // 'foo'
裝飾方法
// 例1 只讀 function readonly(target, name, descriptor){ // descriptor物件原來的值如下 // { // value: specifiedFunction, // enumerable: false, // 可列舉 // configurable: true, // 可配置 // writable: true // 可寫 // }; descriptor.writable = false; return descriptor; } class Person { constructor() { this.first = 'A' this.last = 'B' } @readonly name() { return `${this.first} ${this.last}` } } var p = new Person() console.log(p.name()) p.name = function () {} // 這裡會報錯,因為 name 是隻讀屬性
// 例2 列印日誌
function log(target, name, descriptor) {
var oldValue = descriptor.value;
descriptor.value = function() {
// 1\. 先列印日子
console.log(`Calling ${name} with`, arguments);
// 2\. 執行原來的程式碼,並返回
return oldValue.apply(this, arguments);
};
return descriptor;
}
class Math {
@log
add(a, b) {
return a + b;
}
}
const math = new Math();
const result = math.add(2, 4);
console.log('result', result);
最後
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:943129070,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。