JavaScript を使用したデザインパターンの実装例にはどのようなものがありますか?

https://stackoverflow.com/questions/24642

09-06-2019
|

質問

私は JavaScript を使用するある程度のスキルを持ったプログラマーですが、専門家ではありません。これを使用するとかなり強力なことができることはわかっていますが、かなり基本的な DOM 操作以外にはあまり見たことがありません。JavaScript を使用したファクトリーメソッド、シングルトンなどの従来のデザインパターンの概念の例をいくつか提供してもらえないかと考えています。これらのパターンは Web 上でどのような場合に使用されますか?

解決

Jonathan Rauch が既に推奨している Pro JavaScript Design Patterns から学んだお気に入りの JavaScript パターンを追加したかっただけです。

これは名前空間シングルトンパターンです。基本的に、シングルトンを介して名前空間を作成すると、メソッドと変数を外部から使用できないようにすることができます。非表示/公開メソッドはクロージャ内で定義されているため、実際には非表示になります。

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();

他のヒント

Nickolay 氏はこれについて触れましたが、大きな違いがある言語間ではデザインパターンに一貫性がありません。私は以前に、デザインパターンは言語に欠けている機能の兆候であることが多いと読んだことがあります (そして同意します)。

完璧な例として、「Factory」パターンは一部の言語ではまったく不要です。私が考えている例としては Ruby があります (オブジェクト構築は Class インスタンスのメソッドにすぎないため)。

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

当初開発された言語とは異なる言語にデザインパターンを適用する場合は、それが本当に必要なのか、利用可能な新しい言語機能を使用して改善できる方法は何かを必ず検討してください。デザインパターンは単なるガイドです。意図する用途にそのパターンが本当に必要かどうか、または自分の場合により良い方法で採用できるかどうかを常に検討する必要があります。

いいことあるよ無料アディ・オスマニによる Javascript デザインパターンを紹介するオンラインブック: 初心者向けの必須 JavaScript デザインパターン、第 1 巻

@jamting:

JavaScript のシングルトン設計パターン

何てことだ。言葉が出ない。

OP へ:もちろん、ある意味ではそれが可能ですが、一部のパターンは、慣れていると Java のように目に見えません。たとえば、singleton は単にオブジェクトになります。

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

ウィキペディアには例があります工場 JSで。

最近使用しましたバーニーのより良いアニメーションのクラスを広範囲に活用する戦略デザインパターン。バーニーは、戦略パターンを使用する必要がある理由については見事に説明していますが、残念ながら、コードがどのように機能するかを正確に説明していません。もう一度、デザインパターンのリファレンスを使用するときは、animator.js 内のコードとコメントを見て、ストラテジーパターンの使用方法の良い例を確認してください。

例：

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()

この実践は JavaScript では何と呼ばれますか?

これが自己呼び出しデザインパターンです。私は Javascript を始めるまで、一度も見たことがありませんでした。

できるのではないかと思います。シングルトンの例を次に示します。

JavaScript のシングルトン設計パターン

もちろんできます。このテーマに関する本は次のとおりです。
プロの JavaScript デザインパターン
Factory パターンの例を次に示します。
Javascriptのファクトリーパターン

C# と JavaScript の両方のデザインパターンについてグループでディスカッションしながら勉強したことをここに追加したいと思います。会議中に私にとって印象的だったのは、C# 担当者が JavaScript でコードを作成し、JavaScript 担当者も同じことを行ったことです。会議を終えた後は、家でさらに勉強して、ここでブログを書くようにしています。http://tech.wowkhmer.com/category/Design-Patterns.aspx C# と JavaScript の両方に対応します。

聞く Javascript のデザインパターンについて語る Justin Diaz に。この講演も、上で言及した彼の著書「Pro Javascript Techniques」に基づいています。Google I/O での講演は約 45 分です

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

JavaScript を使用したデザイン パターンの実装例にはどのようなものがありますか?

JavaScript を使用したデザインパターンの実装例にはどのようなものがありますか?