19

私は JavaScript を使用するある程度熟練したプログラマーですが、達人ではありません。これを使って非常に強力なことができることは知っていますが、かなり基本的な DOM 操作以外はあまり見たことがありません。Factory Method、Singleton など、JavaScript を使用した従来の設計パターンの概念の例をいくつか提供していただけないでしょうか。これらのパターンは、Web でどのような場合に使用されますか?

4

10 に答える 10

8

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

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

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
    };
})();
于 2008-08-23T23:20:41.430 に答える
7

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

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

于 2008-08-23T23:03:34.780 に答える
3

@jamting：

JavaScriptのシングルトンデザインパターン

何てことだ。私は言葉がありません。

OPへ：はい、もちろん、ある意味では可能ですが、慣れているパターンの中には、Javaのように見えないものもあります。たとえば、シングルトンは単にオブジェクトになります。

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

ウィキペディアには、 JSのファクトリーの例があります。

于 2008-08-23T22:26:19.017 に答える
3

Addy Osmani による Javascript デザイン パターンを紹介する優れた無料のオンライン ブックがあります: Essential JavaScript Design Patterns For Beginners, Volume 1

于 2012-01-04T22:20:14.523 に答える
2

私は最近、 Strategy Design Patternを多用するBernie's Better Animation Classを使用しました。Bernie は、なぜ Strategy パターンを使用する必要があるかを説明していますが、残念ながらコードがどのように機能するかを正確に説明していません。また、デザイン パターンのリファレンスを使用する場合は、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()
于 2008-08-24T00:59:59.273 に答える
1

このプラクティスはJavaScriptで何と呼ばれていますか？

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

于 2010-12-22T03:03:01.673 に答える
0

私は彼らができると思う-これがシングルトンの例です：

JavaScriptのシングルトンデザインパターン

于 2008-08-23T22:02:32.633 に答える
0

確かにできます。このテーマに関する本は次のとおりです
。ProJavaScriptデザインパターン
これがファクトリパターンの例です：
Javascriptのファクトリパターン

于 2008-08-23T22:30:07.713 に答える
0

ここで、C# と JavaScript の両方のデザイン パターンについてグループで検討した内容を追加したいと思います。会議中の私にとって素晴らしいことは、C# 担当者が JavaScript でコードを記述し、JavaScript 担当者も同じことを行ったことです。会議を終えた後、私は家でもっと学び 、C# と JavaScript の両方についてhttp://tech.wowkhmer.com/category/Design-Patterns.aspxでブログを書いています。

于 2008-11-27T02:58:40.223 に答える
0

Justin Diaz が Javascript のデザイン パターンについて話しているのを聞いてください。この講演は、前述の彼の著書 Pro Javascript Techniques にも基づいています。トークはGoogle I/Oで約45分

于 2010-04-27T04:02:17.707 に答える