前端裝飾器,AOP的使用

lewinlee 發(fā)布于2019-08-26 10:10 / 2835人閱讀

摘要：中的裝飾在前端編程中，我們可以采用裝飾器，來實現編程。裝飾器使用我們先建立一個簡單的類，這個類的作用，就是在執(zhí)行的時候，打印出。至此，一個簡單的裝飾器范例已經完成。

什么是裝飾器？ 了解AOP

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

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

我們簡單的舉個例子來說明AOP。

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

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

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

JavaScript中的AOP:裝飾Decorator

在前端JS編程中，我們可以采用Decorator裝飾器，來實現AOP編程。大家也經常在React中，使用React-Redux的裝飾器，來輔助我們建立HOC高階函數，連接Redux的Store。

在進行實戰(zhàn)之前，我們需要明確一個點就是：裝飾器對類的行為的改變，是代碼編譯時發(fā)生的，而不是在運行時。

裝飾器使用

class index {
  say () {
    console.log("say hello!")
  }
}

我們先建立一個簡單的類，這個類的作用，就是在執(zhí)行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編譯后...。通過編譯后，我們執(zhí)行以下代碼:

var id = new index()
id.say()

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

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

至此，一個簡單的裝飾器范例已經完成。大家可以通過這種方式修改自己的代碼，使自己的代碼更加解耦。

參考文章

ECMAScript 6 入門:http://es6.ruanyifeng.com/#do...

https://blog.csdn.net/yanquan...

[[原文地址]](https://www.yodfz.com/detail/...

GPU云服務器云服務器裝飾器裝飾器模式多個裝飾器多重裝飾器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105719.html

5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

摘要：下裝飾者的實現了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來實現裝飾者模式原函數拍照片定義函數裝飾函數加濾鏡用裝飾函數裝飾原函數這樣我們就實現了抽離拍照與濾鏡邏輯，如果以后需要自動上傳功能，也可以通過函數來添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式當我們拍了一張照片準備發(fā)朋友...

chunquedong 2019-08-23 18:16 評論0 收藏0
面向切面編程與裝飾器

摘要：面向切面編程嗯，百度百科一下為的縮寫，意為面向切面編程，通過預編譯方式和運行期動態(tài)代理實現程序功能的統一維護的一種技術。面向切面編程～～～～嗯，百度百科一下～～～～ AOP 為 Aspect Oriented Programming 的縮寫，意為：面向切面編程，通過預編譯方式和運行期動態(tài)代理實現程序功能的統一維護的一種技術。AOP 是 OOP 的延續(xù)，是軟件開發(fā)中的一個熱點，也...

lunaticf 2019-08-26 10:40 評論0 收藏0
學學AOP之裝飾者模式

摘要：但是，這樣做的后果就是，我們會不斷的改變本體，就像把鳳姐送去做整形手術一樣。在中，我們叫做引用裝飾。所以，這里引入的裝飾模式裝飾親切，熟悉，完美。實例講解裝飾上面那個例子，只能算是裝飾模式的一個不起眼的角落。裝飾者，英文名叫decorator. 所謂的裝飾,從字面可以很容易的理解出，就是給土肥圓，化個妝，華麗的轉身為白富美，但本體還是土肥圓。說人話.咳咳~ 在js里面一切都是對...

nihao 2019-08-19 17:28 評論0 收藏0
ES7-Decorator-裝飾者模式

摘要：裝飾者要實現這些相同的方法繼承自裝飾器對象創(chuàng)建具體的裝飾器，也是接收作對參數接下來我們要為每一個功能創(chuàng)建一個裝飾者對象，重寫父級方法，添加我們想要的功能。裝飾模式僅僅包裝現有的模塊，使之更加華麗，并不會影響原有接口的功能 —— 好比你給手機添加一個外殼罷了，并不影響手機原有的通話、充電等功能；使用 ES7 的 decorator ES7 中增加了一個 decorator 屬性...

zhangxiangliang 2019-08-26 13:54 評論0 收藏0