前端裝飾器,AOP的使用

什麼是裝飾器？

瞭解AOP

在學習js中的裝飾器之間，咱們須要瞭解AOP(面向切面編程)編程思想。

AOP是一種能夠經過預編譯方式和運行期動態代理實如今不修改源代碼的狀況下給程序動態統一添加功能的一種技術。AOP實際是GoF設計模式的延續，設計模式孜孜不倦追求的是調用者和被調用者之間的解耦,提升代碼的靈活性和可擴展性，AOP能夠說也是這種目標的一種實現。

咱們簡單的舉個例子來講明AOP。

這兩個流程中，驗證用戶是共同的邏輯功能。那麼在這兒，你們可能會想到抽取這個功能的代碼，作成公共方法以便調用。

可是，作成公共方法調用的話，是侵入你的主流程裏面的，很是的不雅觀，也會混淆你的控制流程。在這兒，AOP就有了用武之地。

在一整個流程中，將驗證用戶這個功能切出來。而其餘地方須要使用，只要將東西切進去便可。

JavaScript中的AOP:裝飾Decorator

在前端JS編程中，咱們能夠採用Decorator裝飾器，來實現AOP編程。你們也常常在React中，使用React-Redux的裝飾器，來輔助咱們創建HOC高階函數，鏈接Redux的Store。

在進行實戰以前，咱們須要明確一個點就是：裝飾器對類的行爲的改變，是代碼編譯時發生的，而不是在運行時。

裝飾器使用

class index {
  say () {
    console.log('say hello!')
  }
}
複製代碼

咱們先創建一個簡單的類，這個類的做用，就是在執行say()的時候，打印出say hello。可是，在說話前，咱們須要站起來。那怎麼作？

class index {
  say () {
 		console.log('站起來')
    console.log('say hello!')
  }
}
複製代碼

在使用裝飾器以前，咱們須要侵入主流程，將代碼寫入。而如今，咱們有了裝飾器這一個工具。

class index {
  @up
  say () {
    console.log('say hello!')
  }
}
function up (target,name,descriptor) {
  const oldfn = target.descriptor.value
  target.descriptor.value = function () {
    console.log('站起來')
    oldfn.call(this)
  }
  return target
}
複製代碼

以上代碼能夠經過https://babeljs.io/repl編譯後執行。經過編譯後，咱們執行如下代碼:

var id = new index()
id.say()
複製代碼

這個時候你會看到以下圖:

成功的爲say方法裝飾了一個站起來。

至此，一個簡單的裝飾器範例已經完成。你們能夠經過這種方式修改本身的代碼，使本身的代碼更加解耦。

參考文章

ECMAScript 6 入門:es6.ruanyifeng.com/#docs/decor…

blog.csdn.net/yanquan345/…

[原文地址]