ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript での AOP プログラミング

Javascript での AOP プログラミング

伊谢尔伦
伊谢尔伦オリジナル
2016-11-23 11:14:141036ブラウズ

アヒルパンチ

まずはAOPプログラミングの話はやめて、アヒルパンチプログラミングから始めましょう。

ウィキペディアでアヒルパンチを検索すると、モンキーパッチという項目が見つかるはずです。説明によると、モンキーパッチという言葉は、作戦中にひそかにコードを変更するという意味のゲリラパッチに由来しており、ゲリラという言葉はゴリラと同じ発音で、後者は猿に似た意味(前者は「ゴリラ」の意味)、とのこと。ついにフォーモンキーパッチに進化しました。

ダックパンチについて聞いたことがない人は、ダックタイピングについて聞いたことがあるかもしれません。よくある例を挙げると、アヒルの見分け方です:

When I see a Bird that walks like a duck and swims like a duck and quacks like a duck. I call that Bird a duck.

そうだ、見つけたらアヒルのように鳴き、アヒルのように泳ぐ動物がいるなら、それはアヒルです。

このテストは少し明白で無意味に思えるかもしれませんが、非常に実用的です。 そして、それはプログラミングにおけるある種の問題、つまり Javascript または同様の動的言語の場合、「インターフェイス」または「基本クラス」をどのように実装するかという問題を解決するために使用できます。私たちはそれらの過去をまったく気にする必要はありません。メソッドのタイプやパラメーターがそれらを使用するときに必要なものであるかどうかだけを気にします。このアヒルパンチは実際にはアヒルのタイピングから派生したものです:

アヒルのように歩き、アヒルのように話すなら、それはアヒルですよね? got to justPunch that duck until it returns what you Expect.

アヒルにロバのように鳴かせたい場合はどうすればいいですか? ロバのように鳴くまで殴ってください... これは非常に鮮やかなジョークを思い出させます。

米国と香港、中国本土の3か所の警察の力を試すために、国連は3つの森林に3匹のウサギを置き、3人の警察官のうち誰が最初にウサギを見つけられるかを確認しました。タスク: ウサギを見つけてください。 (中略…) 最後に、ある国の警察官は4人だけで一日麻雀をしていましたが、夕方になるとそれぞれが警棒を持って森に入って行きました、5分も経たないうちに叫び声が聞こえてきました。彼はタバコを吸いながら話したり笑ったりしながら出てきました、そして彼の後ろには鼻を打撲して顔が腫れ上がったクマがいて、「私を殴るのはやめてください、私はただのウサギです。」 ..."

アヒルパンチは少し激しいですが、それでも効果的なパンチです。方法。コードの実装とは、元のコードに必要な機能を適合させることを意味します。たとえば、Paul Irish のブログにあるこの例:

var quack = someObject.quack;
 
if (typeof quack == "function" && quck.length == arguLength)
{
    // This thing can quack
}

同時に、アヒルパンチモードを反転することもできますが、次のようになります:

/**
    我们都知道jQuery的`$.css`方法可以通过使用颜色的名称给元素进行颜色赋值。
    但jQuery内置的颜色并非是那么丰富,如果我们想添加我们自定义的颜色名称应该怎么办?比如我们想添加`Burnt Sienna`这个颜色
*/
 
(function($){
     
    // 把原方法暂存起来:
    var _oldcss = $.fn.css;
 
    // 重写原方法:
    $.fn.css = function(prop,value){
 
        // 把自定义的颜色写进分支判断里,特殊情况特殊处理
        if (/^background-?color$/i.test(prop) && value.toLowerCase() === 'burnt sienna') {
           return _oldcss.call(this,prop,'#EA7E5D');
 
        // 一般情况一般处理,调用原方法
        } else {
           return _oldcss.apply(this,arguments);
        }
    };
})(jQuery);
 
// 使用方法:
jQuery(document.body).css('backgroundColor','burnt sienna')

しかし、これには問題があります。元のメソッドは次のようにする必要があります。変更されました。これは、拡張にはオープン、変更にはクローズする必要がある「オープン-クローズ」原則に違反します。この問題を解決するにはどうすればよいでしょうか? AOP プログラミングを使用します。

AOP

Getting Started

AOPはアスペクト指向プログラミングの略で、明らかにオブジェクト指向プログラミングに関連しています。アスペクトは「側面」または「側面」と翻訳できるため、AOP はアスペクト指向プログラミングです。

スライスってどうやって理解していますか?

オブジェクト指向プログラミングでは、定義するクラスは通常ドメインモデルであり、クラスが持つメソッドは通常、純粋なビジネスロジックに関連しています。例:

(function($){
 
    var _old = $.fn.method;
 
    $.fn.method = function(arg1,arg2){
 
        if ( ... condition ... ) {
           return  ....
        } else {           // do the default
           return _old.apply(this,arguments);
        }
    };
})(jQuery);

しかし、通常、実際の状況はより複雑です。たとえば、支払い方法に認証検出を追加したり、統計用のログを送信したり、フォールトトレラントなコードを送信したりする必要があります。コードは次のようになります:

Class Person
{
    private int money;
    public void pay(int price)
    {
         this.money = this.money - price;  
    }
}

さらに恐ろしいのは、他のメソッドにも同様のコードを追加する必要があるため、コードの保守性と可読性が大きな問題になることです。私たちは、これらの散在しているが一般的な非ビジネス コードを収集し、それらをよりフレンドリーに使用および管理したいと考えています。これがアスペクト プログラミングです。アスペクト プログラミングは、リモート コードの変更を回避することに基づいてコードの再利用を実現します。さまざまなオブジェクトを水平方向に切り取り、内部メソッドの変換に焦点を当てるようなものです。オブジェクト指向プログラミングでは、全体的なアーキテクチャ設計により多くの注意が払われます。

気づき

  在上一节中介绍的duck punch与切面编程类似,都是在改造原方法的同时保证原方法功能。但就像结尾说的一样,直接修改原方法的模式有悖于面向对象最佳实践的原则。

  Javascript可以采用装饰者模式(给原对象添加额外的职责但避免修改原对象)实现AOP编程。注意在这里强调的是实现,我进一步想强调的是,切面编程只是一种思想,而装饰者模式只是实践这种思想的一种手段而已,比如在Java中又可以采用代理模式等。切面编程在Java中发挥的余地更多,也更标准,本想把Java的实现模式也搬来这篇文章中,但不才Java水平有限,对Java的实现不是非常理解。在这里就只展示Javascript的实现。

  AOP中有一些概念需要介绍一下,虽然我们不一定要严格执行

joint-point:原业务方法;

advice:拦截方式

point-cut:拦截方法

  关于这三个概念我们可以串起来可以这么理解:

  当我们使用AOP改造一个原业务方法(joint-point)时,比如加入日志发送功能(point-cut),我们要考虑在什么情况下(advice)发送日志,是在业务方法触发之前还是之后;还是在抛出异常的时候,还是由日志发送是否成功再决定是否执行业务方法。

  比如gihub上的meld这个开源项目,就是一个很典型的AOP类库,我们看看它的API:

// 假设我们有一个对象myObject, 并且该对象有一个doSomething方法:
 
var myObject = {
    doSomething: function(a, b) {
        return a + b;
    }
};
 
// 现在我们想拓展它,在执行那个方法之后打印出刚刚执行的结果:
 
var remover = meld.after(myObject, 'doSomething', function(result) {
    console.log('myObject.doSomething returned: ' + result);
});
 
// 试试执行看:
 
myObject.doSomething(1, 2); // Logs: "myObject.doSomething returned: 3"
 
// 这个时候我们想移除刚刚的修改:
 
remover.remove();

由此可以看出,AOP接口通常需要三个参数,被修改的对象,被修改对象的方法(joint-point),以及触发的时机(adivce),还有触发的动作(point-cut)。上面说了那么多的概念,现在可能要让各位失望了,Javascript的实现原理其实非常简单

function doAfter(target, method, afterFunc){
    var func = target[method];
    return function(){
        var res = func.apply(this, arguments);
        afterFunc.apply(this, arguments);
        return res;  
    };
}

当然,如果想看到更完备的解决方案和代码可以参考上面所说的meld项目

 结束语

  这一篇一定让你失望了,代码简单又寥寥无几。本篇主要在于介绍有关duck和AOP的这几类思想,我想编程的乐趣不仅仅在于落实在编码上,更在于整个架构的设计。提高代码的可维护性和可拓展性会比高深莫测的代码更重要。

  其实上面

 参考文献:

How to Fulfill Your Own Feature Request -or- Duck Punching With jQuery!

Duck Punching JavaScript - Metaprogramming with Prototype

Does JavaScript have the interface type (such as Java’s ‘interface’)?

AOP技术基础


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。