web-dev-qa-db-ja.com

オブジェクト指向のJavascriptのベストプラクティス?

私は、Javascriptで大きなプロジェクトをコーディングしていることに気付きました。ハッキングされたJSはすぐに読めなくなる可能性があり、このコードをクリーンにしたいので、最後の1つはかなり冒険だったことを覚えています。

さて、私はオブジェクトを使用してlibを構築していますが、JSで物事を定義するいくつかの方法があり、スコープ、メモリ管理、名前空間などの重要な結果を暗示しています。

  • varを使用するかどうか。
  • ファイル、または(function(){...})()、jqueryスタイルで物事を定義します。
  • thisを使用するかどうか。
  • function myname()またはmyname = function();を使用
  • オブジェクトの本体でメソッドを定義するか、「プロトタイプ」を使用します。
  • 等.

では、JSでOOでコーディングする際のベストプラクティスは何ですか?

ここで本当に期待される学術的説明。品質と堅牢性を扱っている限り、書籍へのリンクは大歓迎です。

編集:

いくつかの読み物を手に入れましたが、私はまだ上記の質問への回答とベストプラクティスに非常に興味があります。

251
e-satis

`var`を使用するかどうか

varステートメントで変数を導入する必要があります。そうしないと、グローバルスコープに到達します。

厳密モード("use strict";)では 宣言されていない変数の割り当てによりReferenceError がスローされることに注意してください。

現在、JavaScriptにはブロックスコープがありません。 Crockfordスクールでは、 関数本体の先頭にvarステートメントを置く を教えていますが、Dojoのスタイルガイドでは すべての変数は可能な限り小さいスコープで宣言する必要があります と読みます。 (JavaScript 1.7で導入された letステートメントと定義 はECMAScript標準の一部ではありません。)

スコープチェーン全体を検索するよりも高速であるため、定期的に使用されるオブジェクトのプロパティをローカル変数にバインドすることをお勧めします。 ( 極端なパフォーマンスと低メモリ消費のためのJavaScriptの最適化 を参照してください。)

ファイルまたは `(function(){...})()`で定義する

コードの外部のオブジェクトにアクセスする必要がない場合は、コード全体を関数式でラップできます。これはモジュールパターンと呼ばれます。これにはパフォーマンス上の利点があり、コードを高レベルで縮小および不明瞭にすることもできます。また、グローバル名前空間を汚染しないようにすることもできます。 JavaScriptでの関数のラッピング では、アスペクト指向の動作を追加することもできます。 Ben Cherryには モジュールパターンに関する詳細な記事 があります。

「this」を使用するかどうか

JavaScriptで擬似古典継承を使用する場合、thisの使用を避けることはほとんどできません。どの継承パターンを使用するかは好みの問題です。その他の場合は、Peter Michauxの 「this」のないJavaScriptウィジェット に関する記事を参照してください。

`function myname()`または `myname = function();`を使用する

function myname()は関数宣言であり、myname = function();は変数mynameに割り当てられた関数式です。後者の形式は、関数がファーストクラスのオブジェクトであることを示しており、変数の場合と同様に、それらを使用して何でもできます。それらの唯一の違いは、すべての関数宣言がスコープの最上部に引き上げられることです。これは、特定の場合に問題になることがあります。それ以外の場合は等しくなります。 function foo()は短縮形です。巻き上げの詳細については、 JavaScript Scoping and Hoisting の記事をご覧ください。

オブジェクトの本体でメソッドを定義するか、「プロトタイプ」を使用する

それはあなた次第です。 JavaScriptには、4つのオブジェクト作成パターンがあります:擬似古典、プロトタイプ、機能、およびパーツ( Crockford、2008 )。それぞれに長所と短所があります。 ビデオトークでのクロックフォード を参照するか、彼の本を入手してくださいThe Good Parts as 既に提案されていない

フレームワーク

いくつかのJavaScriptフレームワークを選択し、それらの規則とスタイルを研究し、それらに最適なプラクティスとパターンを見つけることをお勧めします。たとえば、 Dojo Toolkit は、複数の継承をサポートするオブジェクト指向のJavaScriptコードを記述するための堅牢なフレームワークを提供します。

パターン

最後に、 一般的なJavaScriptパターンとアンチパターンを調べる 専用のブログがあります。 Stack Overflowの質問JavaScriptのコーディング標準はありますか?も確認してください。

287
Török Gábor

この質問をしたので、読んだりアプリケーションに入れたりしたものを書き留めます。だから、ほとんどの答えはRTMFの変装であるので、それを読んでいる人はイライラすることはありません(私が認めなければならないとしても、提案された本は良いです)。

Varの使用法

すべての変数は、JSの上位スコープですでに宣言されていることになっています。したがって、新しい変数が必要になったときは、グローバル変数を気付かずに操作するなどの不意の事態を避けるために宣言してください。 したがって、常にvarキーワードを使用してください。

オブジェクトmakeで、変数をプライベートにします。パブリック変数のみを宣言する場合は、this.my_var = my_valueを使用して宣言します。

メソッドの宣言

JSでは、メソッドを宣言する多くの方法です。 OOプログラマーにとって、最も自然で効率的な方法は、次の構文を使用することです。

オブジェクト本体の内部

this.methodName = function(param) {

/* bla */

};

欠点があります:JSスコープがおかしいため、内部関数は "this"にアクセスできません。ダグラス・クロックフォードは、「that」という名前の従来のローカル変数を使用してこの制限を回避することを推奨しています。それで

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

行末の自動終了に依存しないでください

JSは、忘れると行の最後に;を自動的に追加しようとします。デバッグするのが面倒なエラーが発生するため、この動作に依存しないでください。

13
e-satis

最初に プロトタイプベースのプログラミング について読む必要がありますので、どのような種類の獣を扱っているかを知ってから、 MDCのJavaScriptスタイルガイド および- MDCのJavaScriptページ 。また、ツールを使用してコード品質を強制するのが最適です。 JavaScript Lint または他のバリアント。

OOのベストプラクティスは、コードの品質に集中するよりもパターンを見つけたいと思われるため、 Google検索:javascriptパターン および jQueryパターン をご覧ください。

8
Bleadof

Secrets of the JavaScript Ninja by John Resig(jQuery)をご覧ください。 「この本は、中級のJavaScript開発者を対象に、クロスブラウザJavaScriptライブラリをゼロから作成するために必要な知識を提供することを目的としています。」

ドラフトは、発行元から入手できます。 http://www.manning.com/resig/

Douglas Crockfordのホームページには、ニースJavaScriptの記事もいくつかあります。 http://www.crockford.com/

5
gregers

私はここで、私のJavaScriptにMooToolsを使用している唯一の男のように感じます。

MyObjectO指向ツール、mootools。

私は彼らがJavaScriptでOOPを好むのが大好きです。クラスの実装をjqueryとともに使用することもできるため、jqueryを捨てる必要はありません(mootoolsはすべて同様に行います)。

とにかく、最初のリンクをよく読んで、あなたの考えを見てください。2番目のリンクはmootoolsのドキュメントです。

MooTools&Inheritance

MooToolsクラス

5
Ryan Florence

以下は、ほとんどのベースをカバーする本です。

高品質のアプリケーションとライブラリのオブジェクト指向Javascript

0
Praveen Angyan