オブジェクト指向のJavaScriptのベストプラクティス [閉まっている]


251

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

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

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

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

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

編集:

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


2
タイトルの「オブジェクト指向」を「モダン」に置き換える必要があるかもしれません。
viam0Zah 2010

43
うーん、79の賛成票、82の賛成票、91の回答に対する賛成票...しかし、これは建設的ではないため閉じられました...なぜですか?
ブレット・ロッシエ、2012年

1
私は、シンプルで自然な構文でJavaScriptにC ++ OOP機能を移植するシンプルなクラスを書きました。ここで私の答えを参照してください:stackoverflow.com/a/18239463/1115652

14
この種の質問は常にクローズされます。その理由は理解していますが、重要な質問であり、常に人気があるため(そして、私が同様の質問をするときはいつも見つけるので)、適切な場所に問い合わせてもらうことができる人がいるかどうか疑問に思います。
KPマクレガー2013年

2
@BrettRossierあなたがそれを振るわなければ、力は何が良いのですか?SOは、民主的なつつき秩序がどのように機能するかを示すライブデモです。確かに一部の心理学者はそれを調べています...

回答:


288

`var`を使うかどうか

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

ストリクトモード("use strict";)では、宣言されていない変数の割り当てがスローReferenceErrorすることを言及する価値があります。

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

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

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

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

`this`を使うかどうか

JavaScriptで疑似クラシック継承を使用する場合、の使用を避けることはほとんどできませんthis。どの継承パターンを使用するかは好みの問題です。他のケースについては、「this」なしのJavaScriptウィジェットに関するPeter Michauxの記事を確認してください。

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

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

オブジェクト本体でのメソッドの定義、または「プロトタイプ」の使用

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

フレームワーク

いくつかのJavaScriptフレームワークを入手し、それらの規則とスタイルを調べて、自分に最も適したプラクティスとパターンを見つけることをお勧めします。例えば、Dojo Toolkitは、多重継承もサポートするオブジェクト指向のJavaScriptコードを作成するための堅牢なフレームワークを提供します。

パターン

最後に、一般的なJavaScriptパターンとアンチパターン探索するためのブログがあります。また、JavaScriptのコーディング標準はありますか?スタックオーバーフロー。


1
「JavaScriptには4つのオブジェクト作成パターンがあります。疑似古典的、プロトタイプ的、機能的、および部品です」-ここで長所と短所の要約を本当に感謝します。
BadHorsie 2015年

2
letJavaScript 1.7で導入されたステートメントと定義はECMAScript標準の一部ではありません。」今ではそれはES6の一部です。
のMichałPerłakowski

13

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

Varの使用法

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

オブジェクトのmakeで、変数を変数privateにします。パブリック変数を宣言するだけの場合は、を使用this.my_var = my_valueして宣言します。

メソッドの宣言

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

オブジェクト本体の内部

this.methodName = function(param) {

/* bla */

};

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

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

自動行末に依存しない

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


8

まず読んべきプロトタイプベースあなたは親切獣のあなたが扱っているか知っているので、その後を見てとるMDCでのJavaScriptのスタイルガイドMDCのJavaScriptのページを。また、ツールを使用してコードの品質を強制することをお勧めします。JavaScript Lintまたはその他のバリアント。

OOのベストプラクティスは、コードの品質に集中するよりもパターンを見つけたいという方に聞こえるので、Google検索を見てください。JavaScriptパターンjQueryパターン


5

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

下書きは発行元から入手できます:http : //www.manning.com/resig/

ダグラス・クロックフォードはまた彼のホームページにいくつかの素晴らしいJavaScript記事を持っています:http : //www.crockford.com/


5

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

これは、の略Mの Y O bject O rientedツール、MooToolsの。

私はJavaScriptでのOOPに対する彼らの見方が本当に好きです。それらのクラス実装をjqueryと一緒に使用することもできるため、jqueryを捨てる必要はありません(mootoolsもすべて同じように行います)。

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

MooToolsと継承

MooToolsクラス


私はあなたの古い習慣に合うように言語を曲げようとすることは良いことではありません。これはCの人々のようで、#を使用してfortranのように見えるようにします。。私はあなたが言語作品(およびその最高practicesàの方法を学び、そしてそれを本当に、あまりにもお邪魔していない。しかし、それを変更しないという方法を使用しようとするべきだと思います。
電子サティス

2
MooToolsオブジェクトシステムは非常に洗練されており、コードを整理/カプセル化するのに非常に役立ちます。
awesomo 2010年

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.