一文理解JavaScript裝飾器模式
裝飾器模式想必大家并不陌生：它允許向一個(gè)現(xiàn)有的對(duì)象添加新的功能，同時(shí)又不改變其結(jié)構(gòu)，屬于結(jié)構(gòu)型模式，它是作為現(xiàn)有的類的一個(gè)包裝。
這種模式創(chuàng)建了一個(gè)裝飾類，用來包裝原有的類，并在保持類方法簽名完整性的前提下，提供了額外的功能。
在 JS 中，裝飾器（Decorator）是ES7中的一個(gè)新語法，它可以對(duì)??類、方法、屬性??進(jìn)行??修飾??，從而進(jìn)行一些相關(guān)功能定制。它的寫法與Java的注解（Annotation）非常相似，但是功能還是有很大區(qū)別。
代碼示例：
不使用裝飾器：
const log = (srcFun) => {
if(typeof(srcFun) !== 'function') {
throw new Error(`the param must be a function`);
}
return (...arguments) => {
console.info(`${srcFun.name} invoke with ${arguments.join(',')}`);
srcFun(...arguments);
}
}
const plus = (a, b) => a + b;
const logPlus = log(plus);
logPlus(1,2);
// plus invoke with 1,2使用裝飾器：
const log = (target, name, descriptor) => {
var oldValue = descriptor.value;
descriptor.value = function() {
console.log(`Calling ${name} with`, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
}
class Math {
@log // Decorator
plus(a, b) {
return a + b;
}
}
const math = new Math();
math.plus(1, 2);
// Calling plus with 1,2從上面的代碼可以看出，如果有的時(shí)候我們并不需要關(guān)心函數(shù)的內(nèi)部實(shí)現(xiàn)，僅僅是想調(diào)用它的話，裝飾器能夠帶來比較好的可讀性，使用起來也是非常的方便。
// readonly 裝飾器
import { readonly } from 'core-decorators';
class Fudao {
@readonly
title = 'A';
}
var fudao = new Fudao();
fudao.title = 'B'; // This will log error & doesn't workJS中的裝飾器本質(zhì)也是一個(gè)函數(shù)，利用的是JS中object的descriptor；
裝飾類和被裝飾類可以獨(dú)立發(fā)展，不會(huì)相互耦合，裝飾模式是繼承的一個(gè)替代模式，裝飾模式可以動(dòng)態(tài)擴(kuò)展一個(gè)實(shí)現(xiàn)類的功能。
到此這篇關(guān)于一文理解JavaScript裝飾器模式的文章就介紹到這了,更多相關(guān)JS裝飾器模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript 組件之旅（四）：測(cè)試 JavaScript 組件
本期，我們要討論的話題是 JavaScript 的測(cè)試，以檢查組件的狀態(tài)和工作方式是否符合預(yù)期，還會(huì)介紹一個(gè)可以方便編寫測(cè)試用例的測(cè)試方法。這里說的測(cè)試當(dāng)然是使用自動(dòng)化的測(cè)試手段，這是軟件質(zhì)量保證(QA)的重要環(huán)節(jié)。2009-10-10
18個(gè)JavaScript編寫簡(jiǎn)潔高效代碼的技巧分享
在這篇文章中,小編將和大家分享18個(gè)JavaScript技巧,以及一些你應(yīng)該知道的示例代碼,以編寫簡(jiǎn)潔高效的代碼,感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2024-01-01
js隱式轉(zhuǎn)換的知識(shí)實(shí)例講解
在本篇文章中，小編給大家分享了關(guān)于js隱式轉(zhuǎn)換的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們參考學(xué)習(xí)下。2018-09-09
微信小程序全局?jǐn)?shù)據(jù)共享和分包圖文詳解
全局?jǐn)?shù)據(jù)共享是為了解決組件之間數(shù)據(jù)共享的問題,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局?jǐn)?shù)據(jù)共享和分包的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文件動(dòng)態(tài)順序載入的方法,實(shí)例分析了基于Mootools框架實(shí)現(xiàn)動(dòng)態(tài)載入的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
寫任何編程代碼，不同的開發(fā)者都會(huì)有不同的見解。但參考一下總是好的，下面是來自Javascript Toolbox發(fā)布的14條最佳JS代碼編寫技巧，Sofish翻譯(1,2)。2011-01-01
微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形
three.js是一個(gè)可以使用javascript繪制3d圖形的庫，它對(duì)WebGL的api進(jìn)行封裝，使開發(fā)更加方便，就像jQuery對(duì)DOM的api進(jìn)行封裝一樣。這篇文章主要介紹了微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形,需要的朋友可以參考下2019-06-06
Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)
本篇文章主要介紹了Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01