小編給大家分享一下JavaScript實(shí)現(xiàn)AOP的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)皋蘭,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

什么是AOP？

AOP(面向切面編程)的主要作用是把一些跟核心業(yè)務(wù)邏輯模塊無關(guān)的功能抽離出來，這些跟業(yè)務(wù)邏輯無關(guān)的功能通常包括日志統(tǒng)計(jì)、安全控制、異常處理等。把這些功能抽離出來之后， 再通過“動態(tài)織入”的方式摻入業(yè)務(wù)邏輯模塊中。

AOP能給我們帶來什么好處？

AOP的好處首先是可以保持業(yè)務(wù)邏輯模塊的純凈和高內(nèi)聚性，其次是可以很方便地復(fù)用日志統(tǒng)計(jì)等功能模塊。

JavaScript實(shí)現(xiàn)AOP的思路？

通常，在 JavaScript 中實(shí)現(xiàn) AOP，都是指把一個函數(shù)“動態(tài)織入”到另外一個函數(shù)之中，具體的實(shí)現(xiàn)技術(shù)有很多，下面我用擴(kuò)展 Function.prototype 來做到這一點(diǎn)。請看下面代碼：

Function.prototype.before = function (beforefn) {
  var _self = this; //保存原函數(shù)引用
  return function () { //返回包含了原函數(shù)和新函數(shù)的"代理函數(shù)"
   beforefn.apply(this, arguments); //執(zhí)行新函數(shù)，修正this
   return _self.apply(this, arguments); //執(zhí)行原函數(shù)
  }
 };
 Function.prototype.after = function (afterfn) {
  var _self = this;
  return function () {
   var ret = _self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 var func = function () {
  console.log("2")
 }
 func = func.before(function () {
  console.log("1");
 }).after(function () {
  console.log("3");
 } )
 func();

執(zhí)行結(jié)果如下：

我把負(fù)責(zé)打印數(shù)字1和打印數(shù)字3的兩個函數(shù)通過AOP的方式動態(tài)植入func函數(shù)。通過執(zhí)行上面的代碼，我們看到控制臺順利地返回了執(zhí)行結(jié)果1、2、3。

這種使用AOP的方式來給函數(shù)添加職責(zé)，也是JavaScript語言中的一種非常特別的巧妙的裝飾者模式實(shí)現(xiàn)，下面我們來試試Function.prototype.before的威力，請看下面代碼：

Function.prototype.before = function (beforefn) {
  var __self = this; // 保存原函數(shù)的引用
  return function () { // 返回包含了原函數(shù)和新函數(shù)的"代理"函數(shù)
   beforefn.apply(this, arguments); // 執(zhí)行新函數(shù)，且保證 this 不被劫持，新函數(shù)接受的參數(shù) // 也會被原封不動地傳入原函數(shù)，新函數(shù)在原函數(shù)之前執(zhí)行
   return __self.apply(this, arguments); // 執(zhí)行原函數(shù)并返回原函數(shù)的執(zhí)行結(jié)果， 2 // 并且保證 this 不被劫持
  }
 }
 Function.prototype.after = function (afterfn) {
  var __self = this;
  return function () {
   var ret = __self.apply(this, arguments);
   afterfn.apply(this, arguments);
   return ret;
  }
 };
 document.getElementById = document.getElementById.before(function(){ alert (1);
 });
 var button = document.getElementById( 'button' );

執(zhí)行結(jié)果：

我們給document.getElementById()做了一些裝飾，以后我們每次調(diào)用這個方法之前都會先執(zhí)行alert("1")這條語句，但是請注意我們這條語句并不是寫在了document.getElementById()這個方法的源碼中，而只是在他的外部給他加了裝飾，這樣帶來好處就是我們可以在不改變原方法的源碼的情況下為他添加一些新的行為。國際慣例，舉個栗子：

我的同事寫了一個函數(shù)可以輸出當(dāng)前時間，而我現(xiàn)在的需求是輸出當(dāng)前天氣之后再輸出當(dāng)前時間，下面有兩種解決思路：

（1）傳統(tǒng)解決辦法： 拿同事的函數(shù)過來，找到他輸出時間的代碼，在這些代碼之前加入輸出當(dāng)前天氣的代碼

（2）裝飾者模式解決辦法：拿同事的函數(shù)過來，不用看他的源碼，直接給他的函數(shù)裝飾一下，裝飾的東西也就是輸出當(dāng)前天氣的代碼。

兩種方法都解決了問題，但是他們的出發(fā)點(diǎn)是完全不同的：

（1）方法是改造原函數(shù)的內(nèi)部，我們就需要去理解源代碼，然后做修改。

（2）方法是給原函數(shù)添加了一層外套，我們根本不用管原本函數(shù)的內(nèi)部實(shí)現(xiàn)。

現(xiàn)在又有了新的需求：在輸出當(dāng)前時間之前，先輸出當(dāng)前溫度

（1）方法，我們在第一個需求已經(jīng)把同事的代碼改的面目全非了，現(xiàn)在又要重新理解函數(shù)內(nèi)部，并加以修改（刪除輸出當(dāng)前天氣的代碼，然后加入輸出當(dāng)前溫度的代碼）。

（2）方法，同事原本的函數(shù)是沒有變的，我們現(xiàn)在給同事的函數(shù)換一件套（輸出當(dāng)前溫度）就可以了。

以上是“JavaScript實(shí)現(xiàn)AOP的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：JavaScript實(shí)現(xiàn)AOP的方法
轉(zhuǎn)載來于：http://www.rwnh.cn/article46/gpojhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、品牌網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、定制開發(fā)、虛擬主機(jī)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)