依存関係を反転原則としてJavaScript

StackOverflow https://stackoverflow.com/questions/5349003

質問

自分で言うのも何ですが、で示 依存関係を反転原則 JavaScriptのjQuery?

るごとにこれらの2つのポイント：

A.高レベルのモジュールに影響を及ぼす可能性があり低レベルのモジュールです。の両方によるべきである抽象化.

B.抽象化は依存します。詳細はお持ち.

うに抽象化や高低レベルのモジュール?

この人の助けに私の理解です。

役に立ちましたか？

解決

私は、ディップを適用するJavaScriptのとほぼ同じような方法でこれまでもプログラミング言語がいを認識することがポイントでの役割鴨文字を入力すそういえこの...

ということか連絡する方法を教えてくださいサーバーの一部のデータです。適用せず、DIPこのような:

$.get("/address/to/data", function (data) {
    $("#thingy1").text(data.property1);
    $("#thingy2").text(data.property2);
});

ディップ、代わりにコードを書い

fillFromServer("/address/to/data", thingyView);

の抽象化 fillFromServer ができ の特定の場合に使用したい場合は、jQueryのAjax 実施してい

function fillFromServer(url, view) {
    $.get(url, function (data) {
        view.setValues(data);
    });
}

の抽象化 view 実装可能 特定のビューに基づく要素Id thingy1 や thingy2 として

var thingyView = {
    setValues: function (data) {
        $("#thingy1").text(data.property1);
        $("#thingy2").text(data.property2);
    }
};

原則として:

  • fillFromServer 所属低レベルのモジュールの取り扱いその中でもとくに低レベルの相互作用のサーバーに。いください"と言っていたら、 settingsUpdater オブジェクトするという高いレベルのモジュールでは fillFromServer 抽象化---なので、この場合されてjQuery.
  • 同様に、 fillFromServer に依存しない内容のDOM要素とそのIdを行ってお仕事代わりにによって違いますので、それぞれを抽象化の view, は、その目的は任意の型を持つ setValues 方法。(これは何ですか"鴨文字を入力す")

原則Ｂ

このサービスを見やすいJavaScript、ダック-ド特に、のようなもの view ないから（に依存)か viewInterface タイプです。ができているとは言え、特定のインスタンスは、 thingyView, であ 詳細 ることによって"の抽象化 view.

現実的には"によっては"この呼び出し側かのような方法を呼び出す必要があるこの呼び出し側は 意識 の適切な言えます。通常のオブジェクト指向言語で見やすいものにする依存性 thingyView 明示的に抽象化そのものです。この言語を抽象化するたインターフェース(例えば、 IView クライアントまで、フルのC#または Viewable Java、明示的に依存することがで承class ThingyView : IView または class ThingyView implements Viewable).この感適用しています。

なぜこの冷?もう一つの日のためのデータをサーバへのtextboxes Id text1 や text2 の代わりに <span />s Id thingy1 や thingy2.さらに、このコードと呼ばれるものも多く、ベンチマーキングが重要な性能が失われつつあったのに使用jQuery.私は単にそれを"実施"とは view 抽象はこのように:

var textViewNoJQuery = {
   setValues: function (data) {
        document.getElementById("text1").value = data.property1;
        document.getElementById("text2").value = data.property2;
   }
};

その入またこの特定のインスタンスの抽象化の私には fillFromServer 抽象:

fillFromServer("/address/to/data", textViewNoJQuery);

この要 no の変更 fillFromServer コードで頼みの抽象化の view と setValues 方法の詳細にDOMを対象としたアクセスします。だけでなく、満足できるの再利用コードを示したものであるとしてきれいに分離し、我々の懸念がたく未来-証コード。

他のヒント

編集：

そのことを示しているのが、使用のディップ原JavaScriptおよび 未完了 jQueryの一例です。ただし、以下の説明を容易に行うことができまするjQuery.見jQueryえを行います。

最良の方法でおすすめのアダプターのパターン"--とも呼ばれる"ラッパ".

アダプターは基本的にこのラッピングオブジェクトまたはモジュールなのでパッキン-ガスケット 一貫したインタ その 被扶養者.そのように、依存のクラス(通常は 高レベルの クラスで簡単に交換モジュールを同一の型でなくてはなりません。

たとえば、高レベルの supra)モジュール人により地球/マッピングモジュールです。

能を解析す。場合当社の権のモジュールをすでに利用中のGoogleMapsその管理を決定し、その安くLeafletMaps--望まない書き換え毎のメソッドの呼び出しから gMap.showMap(user, latLong) へ leaflet.render(apiSecret,latLong, user),et al.その一環として行われた悪夢ているポート用から一つの枠組みに他なります。

何をしたい:このように"ラッパー"を提供すると同 供インタ の超モジュールとい毎 低レベルのモジュール （ インフラ モジュール)です。

ここでは異なり簡単な例:

var infra1 = (function(){
    function alertMessage(message){
        alert(message);
    }

    return {
        notify: alertMessage
    };
})();

var infra2 = (function(){
    function logMessage(message){
        console.log(message);
    }

    return {
        notify: logMessage
    };
})();


var Supra = function(writer){
    var notifier = writer;
    function writeMessage(msg){
        notifier.notify(msg);
    }

    this.writeNotification = writeMessage;
};


var supra;

supra = new Supra(infra1);
supra.writeNotification('This is a message');

supra = new Supra(infra2);
supra.writeNotification('This is a message');

知いずれのタイプの低レベルのモジュールを書く"を使用しています"（この場合において infra1 や infra2しない書き換えの実施、高いレベルのモジュール Supra.このディップを活かした異なる二つのソフトウェアの設計原理:"IoC"(インバージョン管理"DI"(依存性インジェクション）

の似ただの写真を以下に示します。

enter image description here 各電源に依存して、 インタ 特定の種類のものが必要なプラグインです。

jQueryの記述:

このパターンを容易に行うことができます、ご利用の枠組みなどのjQuery.例えば、簡単なド-クエリ。利用できまッきゆったりカップリングでまと決めスイッチの枠組みは頼りにネイティブDOM問合せ方法、メンテナンスが容易に行なえます:

var jQ = (function($){

    return {
        getElement: $
    };
})(jQuery);

var nativeModule = (function(){

    return {
        getElement: document.querySelector
    };
})();


var SupraDOMQuery = function(api){
    var helper = api, thus = this;

    function queryDOM(selector){
        el = helper.getElement(selector);
        return thus;
    }

    this.get = queryDOM;
};


var DOM;

DOM = new SupraDOMQuery(jQ);
DOM.get('#id.class');

DOM = new SupraDOMQuery(nativeModule);
DOM.get('#id.class');

明らかに、この例では、必要な規模の機能するための実践が、あなたにとってどんな年でしたを取得します。

基本的には違い、アダプタ、ファサードは幾分高まっていると考えているようにします。にファサードは、いただいているだろう単一のモジュールのロッドやルアーを使用することAPIまたは他のモジュールはアダプタを作成し、一貫したファサードAPIのそれぞれのモジュールは、限りこの技術を未然に防ぎタイト-カップリングです。

のJavaScriptの設計パターンの書籍のアダプターのパターンその具体的には少し涼しく感じるはずの"jQueryアダプター"が 学習JavaScriptのデザインパターン による Addy Osmani 刊行 茵 -- こちらの.しかし、今まで知見 Pro JavaScriptのデザインパターン による ダスティディアスロスHarmes 刊行 Apress -- チェックしてみて.しかし、私を理解することが重要コンテキストをプレゼンDIP関jQuery.

ということで明確化物:)

が見つかり、いくつかの有用なイラストここを。

Dependency inversion principle in JavaScript jQuery

There's no any connection between DI and jQuery. DI is all about the structure and assembling application from compoents. jQuery is a handy wrapper around DOM, nothing more, it has no any structure or components.

You can use DI to assembly Your JavaScript Application, but it would looks much the same no matter do You use jQuery or not.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top