成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端裝飾器,AOP的使用

lewinlee / 2844人閱讀

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

什么是裝飾器？ 了解AOP

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

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

我們簡(jiǎn)單的舉個(gè)例子來(lái)說(shuō)明AOP。

這兩個(gè)流程中，驗(yàn)證用戶是共同的邏輯功能。那么在這兒，大家可能會(huì)想到抽取這個(gè)功能的代碼，做成公共方法以便調(diào)用。

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

在一整個(gè)流程中，將驗(yàn)證用戶這個(gè)功能切出來(lái)。而其他地方需要使用，只要將東西切進(jìn)去即可。

JavaScript中的AOP:裝飾Decorator

在前端JS編程中，我們可以采用Decorator裝飾器，來(lái)實(shí)現(xiàn)AOP編程。大家也經(jīng)常在React中，使用React-Redux的裝飾器，來(lái)輔助我們建立HOC高階函數(shù)，連接Redux的Store。

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

裝飾器使用 
class index {
  say () {
    console.log("say hello!")
  }
}

我們先建立一個(gè)簡(jiǎn)單的類，這個(gè)類的作用，就是在執(zhí)行say()的時(shí)候，打印出say hello。但是，在說(shuō)話前，我們需要站起來(lái)。那怎么做？

class index {
  say () {
         console.log("站起來(lái)")
    console.log("say hello!")
  }
}

在使用裝飾器之前，我們需要侵入主流程，將代碼寫(xiě)入。而現(xiàn)在，我們有了裝飾器這一個(gè)工具。

class index {
  @up
  say () {
    console.log("say hello!")
  }
}
function up (target,name,descriptor) {
  const oldfn = target.descriptor.value
  target.descriptor.value = function () {
    console.log("站起來(lái)")
    oldfn.call(this)
  }
  return target
}

以上代碼可以通過(guò)https://babeljs.io/repl編譯后...。通過(guò)編譯后，我們執(zhí)行以下代碼:

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

這個(gè)時(shí)候你會(huì)看到如下圖:

成功的為say方法裝飾了一個(gè)站起來(lái)。

至此，一個(gè)簡(jiǎn)單的裝飾器范例已經(jīng)完成。大家可以通過(guò)這種方式修改自己的代碼，使自己的代碼更加解耦。

參考文章

ECMAScript 6 入門(mén):http://es6.ruanyifeng.com/#do...

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105719.html

相關(guān)文章

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

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

    chunquedong 評(píng)論0 收藏0

  • 面向切面編程與裝飾器

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

    lunaticf 評(píng)論0 收藏0

  • 學(xué)學(xué)AOP之裝飾者模式

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

    nihao 評(píng)論0 收藏0

  • ES7-Decorator-裝飾者模式

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

    zhangxiangliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

lewinlee

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<