javascriptを構造化して整理しておく（OOプログラマとして）

Question

最近、javascript、HTML5、chrome拡張機能、jQuery、そしてそのすべてのものを使って遊んでいます。私はかなりこれまでJavaScriptの可能性に感銘を受けています。私が苦労しているのは、自分のコードを構造化して整理することだけです。私がそれを知る前に、機能はすべての場所に散らばっています。私はいつもオブジェクト指向のプログラミング（C++とC＃）でプログラミングをしてきましたが、私は自分自身が物事をきちんと保つことができないと感じています。私は常に静的なutil関数の束で終わるように感じる、私はCで '考える'でした＃。

私はJavaScriptのオブジェクトに関するいくつかの情報を探していましたが、seems to come down to wrapping functions in functions.これはコードベースを構造化する良い方法ですか？表面には、少しハックしたようです。あるいは、OOの考え方のために物事をきちんと保つ他の方法はありますか？

Answer 1

一つ。任意のファイルのソースコードを見て、OOPプログラマとして自宅で感じるはずです。 http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_canvasgraphics.js.source.html

Answer 2

私はこれを個人的に使ったことはありませんが、この質問に何度も参照されているbackbone.jsを見てきました。参照してくださいに：OOPのプログラマは、あなたは、Java/C＃の背景から来る場合は特にして精通しているであろうという方法で構造のGoogleの閉鎖ライブラリhttp://closure-library.googlecode.com/svn/docs/index.html

ありjavascriptのライブラリうち最高のOOPのhttp://documentcloud.github.com/backbone/

Answer 3

同様の要件を満たすように設計されたフレームワークを使用するとよいでしょう。 、JavaScriptがで非同期である可能かつ合理的な

• をJavaScriptでクロージャーについて覚え約varキーワードを忘れてはいけない、
• 使用のコールバック：

  しかし、あなたが本当に効率的に従うべきいくつかのものがあります性質、

Answer 4

Javascriptについて覚えておくべき重要な側面の1つは、プロトタイプ言語です。関数をオブジェクトにすることができ、オブジェクトに何かを置くことができ、多くの場合、プロセス内の関連オブジェクトに影響します。このためにオブジェクトを '拡張する'公式の方法はありません。それは私がまだ苦労することを理解している概念です。

Javascriptは、他のOOP言語と同様に、ほとんど例外なく、拡張オブジェクト（http://jsweeneydev.net84.net/blog/Javascript_Prototype.html）と同様に動作します。

大規模な調査の結果、私は、私のGameAPIで使用している拡張オブジェクトをシミュレートする非常に軽量な方法を見つけました。最初のフィールドは親オブジェクトで、2番目のフィールドは展開するオブジェクトです。

extend : function(SuperFunction, SubFunction) { 

    //'Extends' an object 

    SubFunction.prototype = new SuperFunction(); 
    SubFunction.prototype.constructor = SubFunction; 
}, 

このリンクは、いくつかの問題と誤解解消かもしれません。個人的に http://www.coolpage.com/developer/javascript/Correct%20OOP%20for%20Javascript.html

を、私は抗フレームワークになる傾向があり、そして私は、プログラマを強制するものではありません、まだフレームワークを見ていませんとにかくこの点でプログラミングスタイルを大きく変えてしまいます。もしあなたがそれを見つけたら、より多くの力を、しかしチャンスは本当に1つを必要としません。

私の最高のアドバイスは、古い方法論を強制するのではなく、Javascriptのプロトタイプのスタイルに適応しようとすることです。私はそれが難しいことを知っている。私はまだ自分自身に挑戦している。

幸運の掘り起こしのための最高。

Answer 5

私は一般に、make-an-anonymous-function-then-call-itというパターンに従います。基本的には、内部スコープを作成し、インタフェースを含む単一のオブジェクトを返します。関数スコープ内にすべて閉じ込められているので、エスケープするものはありません。ここではjQueryを使用した例です。このすべてのコードが実行した後

var FancyWidget = (function($) { 
    // jQuery is passed as an argument, not referred to directly 
    // So it can work with other frameworks that also use $ 

    // Utility functions, constants etc can be written here 
    // they won't escape the enclosing scope unless you say so 
    function message(thing) { 
     alert("Fancy widget says: " + thing); 
    } 

    // Make a simple class encapsulating your widget 
    function FancyWidget(container) { 
     container = $(container); // Wrap the container in a jQuery object 
     this.container = container; // Store it as an attribute 

     var thisObj = this; 
     container.find("#clickme").click(function() { 
      // Inside the event handler, "this" refers to the element 
      // being clicked, not your FancyWidget -- so we need to 
      // refer to thisObj instead 
      thisObj.handleClick(); 
     }); 
    } 

    // Add methods to your widget 
    FancyWidget.prototype.handleClick = function() { 
     this.container.find("#textbox").text("You clicked me!"); 
     message("Hello!"); 
    }; 

    return FancyWidget; // Return your widget class 
         // Note that this is the only thing that escapes; 
         // Everything else is inaccessible 
})(jQuery); 

今、あなたはあなたがしてインスタンス化できる一つのクラス、FancyWidget、で終わります。

このように複数のクラスを定義することもできます。代わりにreturn FancyWidgetを使用しての、あなたの代わりに、オブジェクトリテラルを返すことができます。

return { 
     FancyWidget: FancyWidget, 
     Frobnicator: Frobnicator, 

     // Nested namespaces! 
     extra: { 
      thing: thing, 
      blah: blah 
     } 
    };