js 支持 Aspect 切面編程

zhaot 發(fā)布于2019-08-19 17:07 / 1940人閱讀

摘要：在方法執(zhí)行后，再執(zhí)行函數(shù)函數(shù)在執(zhí)行時(shí)，接收的參數(shù)第一個(gè)是的返回值，之后的參數(shù)和傳給相同。的返回值源碼定義兩個(gè)出口定義一個(gè)可柯里化的函數(shù)，柯里化成函數(shù)指向基于生成的類的實(shí)例，如上例的如果該函數(shù)是第一次切面化綁定，則包裝該函數(shù)。

系列文章：讀 arale 源碼之 class 篇

使用 Aspect，可以允許你在指定方法執(zhí)行的前后插入特定函數(shù)

before object.before(methodName, callback, [context])

在 object[methodName] 方法執(zhí)行前，先執(zhí)行 callback 函數(shù).

callback 函數(shù)在執(zhí)行時(shí)，接收的參數(shù)和傳給 object[methodName] 相同。

dialog.before("show", function(a, b) {
    a; // 1
    b; // 2
});

dialog.show(1, 2)

after object.after(methodName, callback, [context])

在 object[methodName] 方法執(zhí)行后，再執(zhí)行 callback 函數(shù).

callback 函數(shù)在執(zhí)行時(shí)，接收的參數(shù)第一個(gè)是 object[methodName] 的返回值，之后的參數(shù)和傳給 object[methodName] 相同。

dialog.after("show", function(returned, a, b) {
  returned; // show 的返回值
    a; // 1
    b; // 2
});

dialog.show(1, 2);

源碼

定義兩個(gè)出口

exports.before = function(methodName, callback, context) {
    return weave.call(this, "before", methodName, callback, context);
};

exports.after = function(methodName, callback, context) {
    return weave.call(this, "after", methodName, callback, context);
};

定義一個(gè)可柯里化的函數(shù) weave，柯里化成 after、before 函數(shù)

function weave(when, methodName, callback, context) {
    var names = methodName.split(/s+/);
    var name, method;
    while (name = names.shift()) {
      // this 指向基于 Base 生成的類的實(shí)例，如上例的 dialog
    method = getMethod(this, name);
    // 如果該函數(shù)（show）是第一次切面化綁定，則包裝該函數(shù)。
    // 被包裝的函數(shù)在執(zhí)行前后都會觸發(fā)下面注冊的事件。
    if (!method.__isAspected) {
      wrap.call(this, name);
    }
    // 注冊事件：例如 after:show 、 before:show .
    this.on(when + ":" + name, callback, context);
  }
  return this;
}

如果沒有在實(shí)例中找到該方法（show），則拋出異常。

// 在實(shí)例中查找該方法，若沒有則拋出異常
function getMethod(host, methodName) {
    var method = host[methodName];
    if (!method) {
    throw new Error("Invalid method name: " + methodName);
  }
  return method;
}

定義一個(gè)包裝器函數(shù)，被包裝的函數(shù)在執(zhí)行前后（before、after）都會觸發(fā)一個(gè)特定的函數(shù)

// 包裝器，使該函數(shù)（show）支持切面化
function wrap(methodName) {
  // 保存舊的方法，this 指向該對象（dialog）
    var old = this[methodName];
    // 定義新的方法，并在舊方法之前觸發(fā) before 綁定的函數(shù)，之后觸發(fā) after 綁定的函數(shù)
    this[methodName] = function() {
    var args = Array.prototype.slice.call(arguments);
    var beforeArgs = ["before:" + methodName].concat(args);
    // 觸發(fā) before 綁定的函數(shù)，如果返回 false 則阻止原函數(shù) （show） 執(zhí)行
    if (this.trigger.apply(this, beforeArgs) === false) return;
    // 執(zhí)行舊的函數(shù)，并將返回值當(dāng)作參數(shù)傳遞給 after 函數(shù)
    var ret = old.apply(this, arguments);
    var afterArgs = ["after:" + methodName, ret].concat(args);
    // 觸發(fā) after 綁定的函數(shù)，綁定的函數(shù)的第一個(gè)參數(shù)是舊函數(shù)的返回值
    this.trigger.apply(this, afterArgs);
    return ret;
  }
  // 包裝之后打個(gè)標(biāo)記，不用再重復(fù)包裝了
  this[methodName].__isAspected = true;
}