定義

??如果希望動態給某個類添加一些屬性或者方法，但是你又不希望這個類派生的物件受到影響，那么裝飾器模式就可以給你帶來這樣的體驗，

它的定義就是在不改變原物件的基礎上，通過對其進行包裝拓展，使得原有物件可以動態具有更多功能，從而滿足用戶的更復雜需求，

舉個例子，一部手機，你可以買各種花里胡哨的手機殼等，這些手機殼其實就起到了裝飾的作用，對手機本身的功能沒有影響，

那么裝飾器模式的特點就來了：

1. 不影響原有功能
2. 可同時裝飾多個

js模擬裝飾模式

向一個現有物件添加新的功能，同時又不改變其結構，

如我在跑步，但是我想一邊跑步一邊聽歌，我們通常很快速的下寫如下代碼

/*
 如跑步時我想聽音樂
*/
function run() {
  console.log('joel run')
}

// 一般改成如下：
function run() {
  console.log('joel run')
  // 聽音樂代碼 ...
}
// 或者把聽音樂抽成一個方法
function music() {
  console.log('聽歌')
}
function run() {
  console.log('joel run')
  music()
}
// 以上都違反來關閉原則

上面的代碼都需要在原有的代碼上面做調整，這樣違反了關閉原則，按照裝飾模式的定義，我們可以用裝飾器模式擴展我們的跑步方法，

如下把上面的代碼改成符合裝飾模式思想

/***************************** 1、最簡單的裝飾 **************************/
// 1.1 入口套一層函式
function decoratorRun (fn) {
  fn()
  music()
}

decoratorRun(run)

// 1.2 中間變數保存參考
function run () {
  console.log('joel run')
}
function music() {
  console.log('聽歌')
}
let _run = run;
run = function () {
  _run()
  music()
}
run()
// 上面兩種都是固定了呼叫的位置不太靈活，并沒有當成一個工具函式來使用

/***************************** 2、工具函式 **************************/
// 裝飾fn函式，利用閉包特點
const decoratorRun1 = function (fn, afterFn) {
  return function (...args) {
    const res = fn.apply(this, args)
    afterFn.apply(this, args );
    return res;
  }
}
function run() {
  console.log('joel run')
}
function music(name) {
  console.log(`我正在聽${name}，很好聽，`)
}
const runAndMusic = decoratorRun1(run,music);
runAndMusic('孤勇者');

/************************* 3、原型鏈， 把入口掛載到Function原型上*********/
Function.prototype.before = function (beforeFn) {
  const _self = this;
  return function (...args) {
    beforeFn.apply(this, args);
    return _self.apply(this, args);
  }
}

Function.prototype.after = function (afterFn) {
  const _self = this;
  return function (...args) {
    const result = _self.apply(this, args);
    afterFn.apply(this, args);
    return result;
  }
}
function run() {
  console.log('joel run')
}
function music(name) {
  console.log(`我正在聽${name}，很好聽，`)
}
const runAndMusic1 = run.after(music)
runAndMusic1('孤勇者')

/***************************** 4、es7+ 裝飾器寫法 **************************/
@testable
class MyTestableClass {
  // ...
}

function testable(target) {
  target.isTestable = true;
}

MyTestableClass.isTestable // true

js 中的裝飾器

在最新版本的es next 中，引入了 Decorator （裝飾器的語法），從語言語法層面幫助我們快速的擴展我們的類（class）的功能，

function testAble(isTestable) {
    return function(target) {
        target.isTestable = isTestable;
    }
}

@testAble(true)
class MyTestClass {}
MyTestClass.isTestable; // true

@testAble(false)
class MyTestClass1 {}
MyTestClass1.isTestable; // false

你要知道的AOP概念

在上面模擬裝飾器的時候，把函式掛載到Function原型上，有那么一點點AOP的思路，

AOP為Aspect Oriented Programming的縮寫，指面向切面編程，通過預編譯方式和運行期間動態代理實作程式功能的統一維護的一種技術，

AOP 是一種編程范式，通俗的可以理解為這種在運行時，編譯時，類和方法加載時，動態地將代碼切入到類的指定方法、指定位置上的編程思想就是面向切面的編程，

如上圖從橫向角度來分析，業務1-3都需要日志，安全、其他等這種與業務無關的代碼邏輯，這個時候我們把這種代碼抽離出來，在動態的插入的技術就是面向切面編程，

AOP主要把業務邏輯無關的功能進行抽離，這些與業務邏輯無關的內容如日志列印、資料統計、例外處理、權限控制等各個部分進行隔離，在通過動態注入的方式注入到業務代碼中，這樣做既保證了業務內部高內聚，模塊之間低耦合，方便管理與業務無關的模塊，有利于未來的可操作性和可維護性，

面向切面編程（AOP）是一種通過橫切關注點（Cross-cutting Concerns）分離來增強代碼模塊性的方法，它能夠在不修改業務主體代碼的情況下，對它添加額外的行為，

優點是：這樣的做法，對原有代碼毫無入侵性

AOP場景

AOP采取橫向思考的思維，橫向抽取機制，取代了傳統縱向繼承體系重復性代碼的撰寫方式（例如性能監視、事務管理、安全檢查、快取、日志記錄等），

在軟體系統設計的時候，我們需要把一個大的系統按照業務功能進行拆分，做到高內聚、低耦合，

但是呢，拆分之后會產生一些通用性的東西，比如日志，安全，事務，性能統計等，這些非功能性需求，

1. 記錄日志
2. 監控方法運行時間 （監控性能）
3. 權限控制
4. 快取優化 （第一次呼叫查詢資料庫，將查詢結果放入記憶體物件， 第二次呼叫， 直接從記憶體物件回傳，不需要查詢資料庫 ）
5. 事務管理 （呼叫方法前開啟事務， 呼叫方法后提交或者回滾、關閉事務 ）

AOP、裝飾器模式

?AOP 與裝飾器都是解決一樣的問題，隔離業務邏輯無關的代碼快，

裝飾器是一個很著名的設計模式，經常被用于有切面需求的場景，較為如有日志、性能測驗、事務處理等，在 JavaScript 中，我們可以通過裝飾者模式來實作 AOP，但是兩者并不是一個維度的概念， AOP 是一種編程范式，而裝飾者是一種設計模式， 

小結

1. 裝飾者模式非常適合給業務代碼附加非業務相關功能
2. 裝飾者模式非常適合無痛擴展別人的代碼
3. 裝飾器模式還真的可以讓代碼變得優雅

標籤：JavaScript

上一篇：前端常見的十種布局

下一篇：萬字血書Vue—Vue的核心概念