javascript - JavaScript のコード構成に関する一般的に受け入れられているベストプラクティス

Question

jQuery のような JavaScript フレームワークがクライアント側の Web アプリケーションをよりリッチで機能的にするにつれて、私は 1 つの問題に気付き始めました...

これをどのように整理していますか？

すべてのハンドラーを 1 つの場所に配置し、すべてのイベントの関数を記述しますか?
すべての機能をラップする関数/クラスを作成しますか?
狂ったように書いて、それがうまくいくことを願っていますか？
あきらめて、新しいキャリアを手に入れますか？

jQuery について触れましたが、実際には一般的な JavaScript コードです。行ごとに行が積み重なっていくにつれて、スクリプトファイルの管理や探しているファイルの検索が難しくなっていることがわかりました。おそらく私が見つけた最大の問題は、同じことを行う方法が非常に多く、どれが現在一般的に受け入れられているベストプラクティスであるかを知るのが難しいことです。

.jsファイルをアプリケーションの他の部分と同じようにきれいに保つための一般的な推奨事項はありますか? それともこれはIDEの問題ですか？より良いオプションはありますか？

編集

この質問は、ファイルの編成ではなく、コードの編成に関するものでした。ファイルをマージしたり、コンテンツを分割したりする良い例がいくつかあります。

私の質問は、実際のコードを整理するための現在一般的に受け入れられているベストプラクティスの方法は何ですか? ページ要素と対話し、互いに競合しない再利用可能なコードを作成するためのあなたの方法、または推奨される方法は何ですか?

一部の人々は名前空間をリストしていますが、これは良い考えです。ページ上の要素をより具体的に処理し、コードを整理して整然とした状態に保つ他の方法は何ですか?

score 184 · Accepted Answer

JavaScript に名前空間が組み込まれていればもっといいのですが、Dustin Diaz がここで説明しているようなことを整理すると、非常に役立つことがわかりました。

var DED = (function() {

    var private_var;

    function private_method()
    {
        // do stuff here
    }

    return {
        method_1 : function()
            {
                // do stuff here
            },
        method_2 : function()
            {
                // do stuff here
            }
    };
})();

さまざまな「名前空間」と、場合によっては個々のクラスを別々のファイルに入れます。通常、私は 1 つのファイルから始めて、クラスまたは名前空間がそれを保証するのに十分な大きさになると、それを独自のファイルに分割します。ツールを使用してすべてのファイルを本番用に結合することも優れたアイデアです。

score 89 · Accepted Answer

HTML に JavaScript を含めないようにしています。すべてのコードはクラスにカプセル化され、各クラスは独自のファイルにあります。開発用に、各 js ファイルを含めるために個別の <script> タグを使用していますが、HTTP 要求のオーバーヘッドを削減するために、実稼働用には 1 つの大きなパッケージにマージされます。

通常、アプリケーションごとに 1 つの「メイン」js ファイルを用意します。したがって、「調査」アプリケーションを作成する場合は、「survey.js」という js ファイルを作成します。これには、jQuery コードへのエントリポイントが含まれます。インスタンス化中に jQuery 参照を作成し、それらをパラメーターとしてオブジェクトに渡します。これは、javascript クラスが「純粋」であり、CSS ID またはクラス名への参照が含まれていないことを意味します。

// file: survey.js
$(document).ready(function() {
  var jS = $('#surveycontainer');
  var jB = $('#dimscreencontainer');
  var d = new DimScreen({container: jB});
  var s = new Survey({container: jS, DimScreen: d});
  s.show();
});

また、命名規則は読みやすさにとって重要であることがわかりました。例: すべての jQuery インスタンスの先頭に「j」を追加します。

上記の例では、DimScreen というクラスがあります。(これにより、画面が暗くなり、警告ボックスがポップアップすると仮定します。) 画面を覆うように拡大して警告ボックスを追加できる div 要素が必要なので、jQuery オブジェクトを渡します。jQuery にはプラグインの概念がありますが、制限があるように見えました (たとえば、インスタンスは永続的ではなく、アクセスできません)。実際の利点はありません。したがって、DimScreen クラスは、たまたま jQuery を使用する標準の JavaScript クラスになります。

// file: dimscreen.js
function DimScreen(opts) { 
   this.jB = opts.container;
   // ...
}; // need the semi-colon for minimizing!


DimScreen.prototype.draw = function(msg) {
  var me = this;
  me.jB.addClass('fullscreen').append('<div>'+msg+'</div>');
  //...
};

このアプローチを使用して、かなり複雑なアプリケーションをいくつか構築しました。

score 39 · Accepted Answer

開発用にスクリプトを個別のファイルに分割し、それらをすべてまとめてYUI Compressorなどを実行する「リリース」バージョンを作成できます。

score 27 · Accepted Answer

以前の投稿に触発されて、 WysiHat (changelog で言及されている RTE) で配布されているRakefileとベンダーディレクトリのコピーを作成し、 JSLintによるコードチェックとYUI Compressorによる縮小を含むようにいくつかの変更を加えました。

Sprockets (WysiHat から) を使用して複数の JavaScript を 1 つのファイルにマージし、マージされたファイルの構文を JSLint でチェックし、配布前に YUI Compressor で縮小するという考え方です。

前提条件

Java ランタイム
ルビーとレーキの宝石
JARをクラスパスに入れる方法を知っておく必要があります

今やります

Rhinoをダウンロードし、JAR ("js.jar") をクラスパスに配置します。
YUI Compressorをダウンロードし、JAR (build/yuicompressor-xyz.jar) をクラスパスに配置します。
WysiHatをダウンロードし、"vendor" ディレクトリを JavaScript プロジェクトのルートにコピーします。
Rhino 用の JSLint をダウンロードし、「vendor」ディレクトリ内に配置します。

JavaScript プロジェクトのルートディレクトリに「Rakefile」という名前のファイルを作成し、次の内容を追加します。

require 'rake'

ROOT            = File.expand_path(File.dirname(__FILE__))
OUTPUT_MERGED   = "final.js"
OUTPUT_MINIFIED = "final.min.js"

task :default => :check

desc "Merges the JavaScript sources."
task :merge do
  require File.join(ROOT, "vendor", "sprockets")

  environment  = Sprockets::Environment.new(".")
  preprocessor = Sprockets::Preprocessor.new(environment)

  %w(main.js).each do |filename|
    pathname = environment.find(filename)
    preprocessor.require(pathname.source_file)
  end

  output = preprocessor.output_file
  File.open(File.join(ROOT, OUTPUT_MERGED), 'w') { |f| f.write(output) }
end

desc "Check the JavaScript source with JSLint."
task :check => [:merge] do
  jslint_path = File.join(ROOT, "vendor", "jslint.js")

  sh 'java', 'org.mozilla.javascript.tools.shell.Main',
    jslint_path, OUTPUT_MERGED
end

desc "Minifies the JavaScript source."
task :minify => [:merge] do
  sh 'java', 'com.yahoo.platform.yui.compressor.Bootstrap', '-v',
    OUTPUT_MERGED, '-o', OUTPUT_MINIFIED
end

すべてを正しく行った場合、コンソールで次のコマンドを使用できるはずです。

rake merge-- 異なる JavaScript ファイルを 1 つにマージするには
rake check-- コードの構文をチェックします (これはデフォルトのタスクなので、単純に入力できますrake) 。
rake minify-- JS コードの縮小版を準備する

ソースのマージについて

requireSprockets を使用すると、他の JavaScript ファイルを含める (または) ことができる JavaScript プリプロセッサです。次の構文を使用して、初期ファイル (「main.js」という名前ですが、Rakefile で変更できます) から他のスクリプトを含めます。

(function() {
//= require "subdir/jsfile.js"
//= require "anotherfile.js"

    // some code that depends on included files
    // note that all included files can be in the same private scope
})();

その後...

WysiHat で提供されている Rakefile を見て、自動化された単体テストをセットアップしてください。いい従業員：）

そして今、答えのために

これは元の質問にうまく答えていません。申し訳ありませんが、他の誰かが自分の混乱を整理するのに役立つことを願っているので、ここに投稿しました.

この問題に対する私のアプローチは、できる限り多くのオブジェクト指向モデリングを行い、実装を異なるファイルに分割することです。その場合、ハンドラーはできるだけ短くする必要があります。シングルトンの例Listもいい例です。

そして名前空間...まあ、それらはより深いオブジェクト構造によって模倣できます。

if (typeof org === 'undefined') {
    var org = {};
}

if (!org.hasOwnProperty('example')) {
    org.example = {};
}

org.example.AnotherObject = function () {
    // constructor body
};

私はイミテーションの大ファンではありませんが、グローバルスコープから移動したいオブジェクトが多数ある場合に役立ちます。

score 18 · Accepted Answer

コード編成には、規則と文書化標準の採用が必要です
。1. 物理ファイルの名前空間コード。

Exc = {};

2. これらの名前空間のクラスをグループ化します。
3. 実世界のオブジェクトを表現するためのプロトタイプまたは関連する関数またはクラスを設定します。

Exc = {};
Exc.ui = {};
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};
Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    ...
};

4. コードを改善するための規則を設定します。たとえば、すべての内部関数またはメソッドをオブジェクトタイプのクラス属性にグループ化します。

Exc.ui.domTips = function (dom, tips) {
    this.dom = gift;
    this.tips = tips;
    this.internal = {
        widthEstimates: function (tips) {
            ...
        }
        formatTips: function () {
            ...
        }
    };
    ...
};

5. 名前空間、クラス、メソッド、および変数のドキュメントを作成します。必要に応じて、コードの一部についても説明します (一部の FI と For は、通常、コードの重要なロジックを実装します)。

/**
  * Namespace <i> Example </i> created to group other namespaces of the "Example".  
  */
Exc = {};
/**
  * Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
  */
Exc.ui = {};

/**
  * Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
  * @ Param {String} mask - mask validation of input data.
  */
Exc.ui.maskedInput = function (mask) {
    this.mask = mask;
    ...
};

/**
  * Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
  * @ Param {String} id - id of the HTML element.
  * @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
  */
  Exc.ui.domTips = function (id, tips) {
    this.domID = id;
    this.tips = tips;
    ...
};

これらはほんの一部のヒントですが、コードを整理するのに大いに役立ちました。成功するには規律が必要であることを忘れないでください。

score 13 · Accepted Answer

優れた OO 設計原則と設計パターンに従うことは、コードの保守と理解を容易にするのに大いに役立ちます。しかし、私が最近発見した最高のものの 1 つは、シグナルとスロット、別名パブリッシュ/サブスクライブです。簡単な jQuery の実装については、 http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.htmlをご覧ください。

このアイデアは、GUI 開発のために他の言語でよく使用されます。コードのどこかで重大なことが発生すると、他のオブジェクトの他のメソッドがサブスクライブする可能性のあるグローバル合成イベントを発行します。これにより、オブジェクトの優れた分離が得られます。

Dojo (およびプロトタイプ?) には、この手法のバージョンが組み込まれていると思います。

シグナルとスロットとは?も参照してください。

score 12 · Accepted Answer

以前の仕事で、 Javascript モジュールパターンを Ext JS アプリケーションに適用することに成功しました。これにより、適切にカプセル化されたコードを作成する簡単な方法が提供されました。

score 11 · Accepted Answer

Dojo には最初からモジュールシステムがありました。実際、これは Dojo の基礎であり、すべてをまとめる接着剤であると考えられています。

モジュールを使用する Dojo は、以下の目的を達成します。

Dojo コードとカスタムコードの名前空間 ( dojo.declare()) — グローバル空間を汚染せず、他のライブラリーやユーザーの非 Dojo 対応コードと共存します。
名前によるモジュールの同期的または非同期的なロード ( dojo.require())。
モジュールの依存関係を分析して単一のファイルまたは相互に依存するファイルのグループ (いわゆるレイヤー) を作成し、Web アプリケーションに必要なものだけを含めるカスタムビルド。カスタムビルドには、Dojo モジュールと顧客提供のモジュールも含めることができます。
Dojo およびユーザーのコードへの透過的な CDN ベースのアクセス。AOL と Google はどちらもこの方法で Dojo を実行していますが、一部の顧客はカスタム Web アプリケーションでも同様に実行しています。

score 9 · Accepted Answer

JavasciptMVCをチェックしてください。

あなたはできる：

コードをモデル、ビュー、コントローラーの各レイヤーに分割します。
すべてのコードを単一の本番ファイルに圧縮します
コードの自動生成
単体テストを作成して実行する
そしてもっとたくさん...

何よりも、jQueryを使用しているため、他のjQueryプラグインも利用できます。

score 9 · Accepted Answer

MVC フレームワークについて誰も言及していないことに驚いています。私はBackbone.jsを使用してコードをモジュール化したり分離したりしてきましたが、これは非常に貴重です。

このような種類のフレームワークは数多くありますが、そのほとんどは非常に小さいものです。私の個人的な意見では、派手な UI 用に数行以上の jQuery を作成する場合や、リッチな Ajax アプリケーションが必要な場合は、MVC フレームワークを使用すると作業がはるかに簡単になります。

score 9 · Accepted Answer

私の上司は、モジュラーコード (C 言語) を書いた時代のことを今でも話しており、最近のコードがいかにくだらないかについて不平を言っています。プログラマーはどのフレームワークでもアセンブリを記述できると言われています。コード編成を克服するための戦略が常にあります。基本的な問題は、java スクリプトをおもちゃのように扱い、まったく学ぼうとしない人たちにあります。

私の場合、適切な init_screen() を使用して、UI テーマまたはアプリケーション画面ベースで js ファイルを記述します。適切な ID 命名規則を使用して、ルート要素レベルで名前空間の競合がないことを確認します。目立たない window.load() では、最上位の ID に基づいて物事を結び付けます。

すべてのプライベートメソッドを非表示にするために、Java スクリプトのクロージャとパターンを厳密に使用しています。これを行った後、競合するプロパティ/関数定義/変数定義の問題に直面することはありませんでした。ただし、チームで作業する場合、同じ厳密さを強制することはしばしば困難です。

score 8 · Accepted Answer

「狂ったように書いて、それがうまくいくことを願っていますか?」、たった 2 人の開発者によって開発および維持されたこのようなプロジェクトを見たことがあります。これは、大量の JavaScript コードを含む巨大なアプリケーションです。その上、考えられるすべての可能な jquery 関数にはさまざまなショートカットがありました。コードをプラグインとして整理することを提案しました。これは、クラス、モジュール、名前空間、および宇宙全体に相当する jquery であるためです。しかし、事態はさらに悪化し、プロジェクトで使用される 3 行のコードのすべての組み合わせを置き換えるプラグインを作成し始めました。個人的には、jQuery は悪魔だと思います。大量の JavaScript を使用するプロジェクトでは使用すべきではありません。私は、40 個のチェーンされた jQuery 関数を 1 行で読むよりも、100 行の JavaScript を読みたいと思います (I' 冗談じゃない）。一般に信じられていることとは反対に、JavaScript コードを名前空間やクラスに相当するものに整理するのは非常に簡単です。それが、YUI と Dojo が行うことです。必要に応じて、自分で簡単に巻くことができます。YUI のアプローチははるかに優れており、効率的です。しかし、有用なものを書きたい場合は通常、YUI の命名規則を補うために、スニペットをサポートする優れたエディターが必要です。

score 7 · Accepted Answer

画面上で何度もインスタンス化する必要がないものすべてに対してシングルトンを作成し、それ以外のすべてのクラスを作成します。そして、それらはすべて同じファイルの同じ名前空間に配置されます。すべてにコメントが付けられ、UML 状態図で設計されています。javascript コードは html をクリアしているため、インライン javascript はありません。また、ブラウザー間の問題を最小限に抑えるために jquery を使用する傾向があります。

score 6 · Accepted Answer

私の最後のプロジェクト-Viajeros.com-では、いくつかの手法を組み合わせて使用しました。Webアプリを整理する方法がわかりません。Viajerosは、明確に定義されたセクションを持つ旅行者向けのソーシャルネットワーキングサイトであるため、エリアごとにコードを簡単に分離できます。

サイトセクションに従って、名前空間シミュレーションとモジュールの遅延読み込みを使用します。ページをロードするたびに、「vjr」オブジェクトを宣言し、常に一連の共通関数（vjr.base.js）をロードします。次に、各HTMLページは、必要なモジュールを簡単に決定します。

vjr.Required = ["vjr.gallery", "vjr.comments", "vjr.favorites"];

Vjr.base.jsは、サーバーからそれぞれをgzipで圧縮して実行します。

vjr.include(vjr.Required);
vjr.include = function(moduleList) {
  if (!moduleList) return false;
  for (var i = 0; i < moduleList.length; i++) {
    if (moduleList[i]) {
      $.ajax({
        type: "GET", url: vjr.module2fileName(moduleList[i]), dataType: "script"
      });
    }
  }
};

すべての「モジュール」には次の構造があります。

vjr.comments = {}

vjr.comments.submitComment = function() { // do stuff }
vjr.comments.validateComment = function() { // do stuff }

// Handlers
vjr.comments.setUpUI = function() {
    // Assign handlers to screen elements
}

vjr.comments.init = function () {
  // initialize stuff
    vjr.comments.setUpUI();
}

$(document).ready(vjr.comments.init);

私の限られたJavascriptの知識を考えると、これを管理するためのより良い方法があるはずですが、今まではそれは私たちにとって素晴らしい働きをしています。

score 6 · Accepted Answer

OO + MVC の優れた原則は、複雑な JavaScript アプリの管理に大いに役立ちます。

基本的に、私は自分のアプリと JavaScript を次の使い慣れたデザインに整理しています (これは、デスクトッププログラミングの時代から Web 2.0 までずっと存在します)。

JS オブジェクト指向と MVC

画像の数値の説明:

アプリケーションのビューを表すウィジェット。これは、ウィジェットをスパゲッティコードに変換するのではなく、MVC が達成しようとする適切な分離の結果として、拡張可能で適切に分離されている必要があります (Javascript の大きなブロックを HTML に直接配置する Web アプリと同等です)。各ウィジェットは、他のウィジェットによって生成されたイベントをリッスンすることにより、他のウィジェットを介して通信し、管理不能なコードにつながる可能性のあるウィジェット間の強い結合を減らします (script タグ内のグローバル関数を指す onclick をあらゆる場所に追加した日のことを覚えていますか? うーん...)
ウィジェットに入力し、サーバーとやり取りするデータを表すオブジェクトモデル。データをそのモデルにカプセル化することにより、アプリケーションはデータ形式にとらわれなくなります。例: Javascript では当然のことながら、これらのオブジェクトモデルはほとんどが JSON にシリアル化および逆シリアル化されますが、サーバーが通信に XML を使用している場合、変更する必要があるのはシリアル化/逆シリアル化レイヤーを変更することだけであり、必ずしもすべてのウィジェットクラスを変更する必要はありません。 .
ビジネスロジックとサーバーへの通信を管理するコントローラークラス + 場合によってはキャッシュレイヤー。この層は、サーバーへの通信プロトコルを制御し、必要なデータをオブジェクトモデルに入れます。
クラスは、対応する名前空間にきちんとラップされています。Javascript でグローバル名前空間がいかに厄介であるかは、誰もが知っていると思います。

以前は、ファイルを独自の js に分割し、一般的な方法を使用して Javascript でオブジェクト指向の原則を作成していました。私がすぐに発見した問題は、JS OO を記述する方法は複数あり、必ずしもすべてのチームメンバーが同じアプローチを採用しているわけではないということです。チームが大きくなるにつれて (私の場合は 15 人以上)、オブジェクト指向 Javascript の標準的なアプローチがないため、これは複雑になります。同時に、私は自分自身のフレームワークを書きたくないし、私が解決したよりも賢い人たちだと確信している作業のいくつかを繰り返したくありません.

jQuery は Javascript フレームワークとして非常に優れており、気に入っていますが、プロジェクトが大きくなるにつれて、特に OO プラクティスの標準化を容易にするために、Web アプリに追加の構造が明らかに必要になります。私自身、何度か実験した結果、YUI3 Base and Widget ( http://yuilibrary.com/yui/docs/widget/およびhttp://yuilibrary.com/yui/docs/base/index.html ) インフラストラクチャが提供することがわかりました。まさに私が必要とするもの。私がそれらを使用する理由はほとんどありません。

名前空間のサポートを提供します。OO とコードのきちんとした編成の真の必要性
クラスとオブジェクトの概念をサポートします
クラスにインスタンス変数を追加するための標準化手段を提供します
クラス拡張にもきちんと対応
コンストラクタとデストラクタを提供します
レンダリングとイベントバインディングを提供します
ベースウィジェットフレームワークがあります
各ウィジェットは、標準のイベントベースのモデルを使用して相互に通信できるようになりました
最も重要なことは、すべてのエンジニアに Javascript 開発の OO 標準を提供することです。

多くの意見に反して、必ずしも jQuery と YUI3 のどちらかを選択する必要はありません。この2つは平和に共存できます。YUI3 は私の複雑な Web アプリに必要な OO テンプレートを提供しますが、jQuery は今でも私のチームに、私たち全員が愛し、慣れ親しんでいる使いやすい JS 抽象化を提供します。

YUI3 を使用して、Base を Model として拡張するクラス、Widget を View として拡張するクラスを分離することで MVC パターンを作成できました。もちろん、必要なロジックとサーバー側の呼び出しを行う Controller クラスもあります。

ウィジェットは、イベントベースのモデルを使用して相互に通信し、イベントをリッスンして、定義済みのインターフェイスに基づいて必要なタスクを実行できます。簡単に言えば、OO + MVC 構造を JS に入れることは、私にとって喜びです。

免責事項として、私は Yahoo! で働いていません。そして、元の質問によって提起された同じ問題に対処しようとしているアーキテクトにすぎません。誰かが同等の OO フレームワークを見つけたら、これもうまくいくと思います。原則として、この質問は他のテクノロジーにも当てはまります。OO Principles + MVC を考案してプログラミングの日々をより管理しやすくしてくれたすべての人々に感謝します。

score 6 · Accepted Answer

Jquery 中心の NameSpace の方法でコードを整理すると、次のようになります...そして、Prototype や Ext などの他の Javascript API と衝突することもありません。

<script src="jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

var AcmeJQ = jQuery.noConflict(true);
var Acme = {fn: function(){}};

(function($){

    Acme.sayHi = function()
    {
        console.log('Hello');
    };

    Acme.sayBye = function()
    {
        console.log('Good Bye');
    };
})(AcmeJQ);

// Usage
//          Acme.sayHi();
// or
// <a href="#" onclick="Acme.sayHi();">Say Hello</a>


</script>

お役に立てれば。

score 5 · Accepted Answer

I use Dojo's package management (dojo.require and dojo.provide) and class system (dojo.declare which also allows for simple multiple inheritance) to modularize all of my classes/widgets into separate files. Not only dose this keep your code organized, but it also lets you do lazy/just in time loading of classes/widgets.

score 3 · Accepted Answer

3

継承パターンを使用して、大規模な jQuery アプリケーションを編成します。

于 2011-03-27T22:04:42.120 に答える

score 3 · Accepted Answer

数日前、37Signalsの担当者がひねりを加えた RTE コントロールをリリースしました。彼らは、一種のプリプロセッサコマンドを使用して JavaScript ファイルをバンドルするライブラリを作成しました。

それ以来、JS ファイルを分離し、最終的にそれらを 1 つにマージするために使用しています。そうすれば、懸念事項を分離することができ、最終的にパイプを通過するファイルは 1 つだけになります (gzip で圧縮されます)。

テンプレートで、開発モードであるかどうかを確認し、個別のファイルを含めます。本番環境の場合は、最終的なファイルを含めます (自分で「ビルド」する必要があります)。

score 2 · Accepted Answer

JavaScript 組織の場合、次を使用しています

すべての JavaScript のフォルダー
ページレベルの JavaScript は、ページと同じ名前の独自のファイルを取得します。ProductDetail.aspx は ProductDetail.js になります。
ライブラリファイルのjavascriptフォルダー内にlibフォルダーがあります
関連するライブラリ関数を、アプリケーション全体で使用する lib フォルダーに配置します。
Ajax は、javascript フォルダーの外に移動して独自のフォルダーを取得する唯一の javascript です。次に、クライアントとサーバーの 2 つのサブフォルダーを追加します。
クライアントフォルダーはすべての .js ファイルを取得し、サーバーフォルダーはすべてのサーバー側ファイルを取得します。

score 2 · Accepted Answer

これは、おそらく DDD (ドメイン駆動設計) に関係していると思います。私が取り組んでいるアプリケーションは、正式な API を欠いていますが、サーバー側のコード (クラス/ファイル名など) を介してそのようなヒントを提供します。それを踏まえて、問題のドメイン全体のコンテナーとして最上位のオブジェクトを作成しました。次に、必要な場所に名前空間を追加しました。

var App;
(function()
{
    App = new Domain( 'test' );

    function Domain( id )
    {
        this.id = id;
        this.echo = function echo( s )
        {
            alert( s );
        }
        return this;
    }
})();

// separate file
(function(Domain)
{
    Domain.Console = new Console();

    function Console()
    {
        this.Log = function Log( s )
        {
            console.log( s );
        }
        return this;
    }
})(App);

// implementation
App.Console.Log('foo');

score 2 · Accepted Answer

モデル、ビュー、およびコントローラーを使用できるスクリプトのセットであるjquery mx (javascriptMVC で使用) を使用できます。私はプロジェクトでそれを使用し、圧縮のために最小のスクリプトサイズで構造化された JavaScript を作成するのを助けました。これはコントローラの例です:

$.Controller.extend('Todos',{
  ".todo mouseover" : function( el, ev ) {
   el.css("backgroundColor","red")
  },
  ".todo mouseout" : function( el, ev ) {
   el.css("backgroundColor","")
  },
  ".create click" : function() {
   this.find("ol").append("<li class='todo'>New Todo</li>"); 
  }
})

new Todos($('#todos'));

ビューとモデル部分に関心がない場合は、jquerymxのコントローラー側のみを使用することもできます。

score 2 · Accepted Answer

こんな小物を使っています。JS テンプレートと HTML テンプレートの両方に「include」ディレクティブを提供します。それは混乱を完全に排除します。

https://github.com/gaperton/include.js/

$.include({
    html: "my_template.html" // include template from file...
})
.define( function( _ ){ // define module...
    _.exports = function widget( $this, a_data, a_events ){ // exporting function...
        _.html.renderTo( $this, a_data ); // which expands template inside of $this.

        $this.find( "#ok").click( a_events.on_click ); // throw event up to the caller...
        $this.find( "#refresh").click( function(){
            widget( $this, a_data, a_events ); // ...and update ourself. Yep, in that easy way.
        });
    }
});

score 1 · Accepted Answer

あなたの質問は、昨年末に私を悩ませたものです。違い-プライベートメソッドとパブリックメソッドについて聞いたことがない新しい開発者にコードを渡す。シンプルなものを作らなければなりませんでした。

最終結果は、オブジェクトリテラルをjQueryに変換する小さな（約1KB）フレームワークでした。構文は視覚的にスキャンしやすく、jsが非常に大きくなった場合は、再利用可能なクエリを記述して、使用されているセレクター、ロードされたファイル、依存関数などを見つけることができます。

ここに小さなフレームワークを投稿するのは実用的ではないので、例を挙げてブログ投稿を書きました（私の最初。それは冒険でした！）。ぜひご覧ください。

数分でチェックできる他の人たちのために、フィードバックをいただければ幸いです。

オブジェクトクエリの例でtoSource（）をサポートしているため、FireFoxをお勧めします。

乾杯！

アダム

score 0 · Accepted Answer

サーバー側の言語が何であるかについては言及していません。または、より適切には、サーバー側で使用しているフレームワーク（ある場合）。

IME、私はサーバー側で物事を整理し、それをすべてWebページに振り向けます。フレームワークには、すべてのページがロードする必要のあるJSだけでなく、生成されたマークアップで機能するJSフラグメントも整理するタスクが与えられます。通常は複数回発行したくないこのようなフラグメントは、そのコードがその問題を処理するためにフレームワークに抽象化される理由です。:-)

独自のJSを発行する必要があるエンドページの場合、通常、生成されたマークアップに論理構造があることがわかります。そのようなローカライズされたJSは、多くの場合、そのような構造の開始および/または終了時に組み立てることができます。

これはどれも効率的なJavaScriptの作成を妨げるものではないことに注意してください！:-)

score 0 · Accepted Answer

必要なコードをオンデマンドで遅延ロードします。Google はgoogle.loaderでこのようなことを行います

score 0 · Accepted Answer

Ben Nolan の行動に着想を得たカスタムスクリプトを使用して (悲しいことに、これへの現在のリンクはもう見つかりません)、ほとんどのイベントハンドラーを格納しています。これらのイベントハンドラーは、要素 className や Id などによってトリガーされます。例：

Behaviour.register({ 
    'a.delete-post': function(element) {
        element.observe('click', function(event) { ... });
    },

    'a.anotherlink': function(element) {
        element.observe('click', function(event) { ... });
    }

});

グローバルな動作を含むものを除いて、ほとんどの Javascript ライブラリをオンザフライで含めるのが好きです。これにはZend Framework の headScript() プレースホルダーヘルパーを使用しますが、JavaScript を使用して、たとえば Ajileで他のスクリプトをその場でロードすることもできます。

javascript - JavaScript のコード構成に関する一般的に受け入れられているベスト プラクティス

28 に答える 28

Related

Reference

javascript - JavaScript のコード構成に関する一般的に受け入れられているベストプラクティス