web-dev-qa-db-ja.com

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

JQueryのようなJavaScriptフレームワークがクラ​​イアント側のWebアプリケーションをより豊かで機能的にするので、1つの問題に気づき始めました...

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

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

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

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

編集

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

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

一部の人々はnamespacesを挙げていますが、これは良い考えです。ページ上の要素をより具体的に処理し、コードを整理して整頓しておく他の方法は何ですか？

javascriptjquerydesign-patternsarchitectureformatting
553
Hugoware

Javascriptにネームスペースが組み込まれていればもっといいと思いますが、Dustin Diazのようなものを整理することで here が役立つと思います。

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つのファイルから始め、クラスまたは名前空間がそれを保証するのに十分な大きさになると、それを独自のファイルに分離します。ツールを使用してすべてのファイルを制作用に結合することも優れたアイデアです。

180
polarbear

HTMLにjavascriptを含めないようにします。すべてのコードはクラスにカプセル化され、各クラスは独自のファイルにあります。開発のために、各jsファイルを含めるための個別の<script>タグがありますが、それらはHTTPリクエストのオーバーヘッドを削減するために、本番用の単一の大きなパッケージにマージされます。

通常、アプリケーションごとに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>');
  //...
};

このアプローチを使用して、かなり複雑なアプリケーションを作成しました。

87
Jason Moore

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

39
Greg

以前の投稿に触発されて、Rakefileおよびvendorディレクトリのコピーを配布しました WysiHat （changelogで言及されたRTE）と JSLint および YUI Compressor による縮小=。

アイデアは Sprockets （WysiHatから）を使用して複数のJavaScriptを1つのファイルにマージし、マージしたファイルの構文をチェックすることですJSLintおよび配布前にYUI Compressorで縮小します。

前提条件

  • Javaランタイム
  • ルビーとレーキ宝石
  • JARを Classpath に配置する方法を知っている必要があります。

Now do

  1. Rhino をダウンロードし、JAR（ "js.jar"）をクラスパスに配置します
  2. YUI Compressor をダウンロードし、JAR（build/yuicompressor-xyz.jar）をクラスパスに配置します
  3. WysiHat をダウンロードし、「vendor」ディレクトリをJavaScriptプロジェクトのルートにコピーします
  4. JSLint for Rhino をダウンロードし、「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-コードの構文を確認します（これはdefaultタスクなので、単にrakeと入力できます）
  • rake minify-JSコードの縮小バージョンを準備します

ソースマージについて

JavaScriptプリプロセッサであるSprocketsを使用して、他のJavaScriptファイルを含める（またはrequire）ことができます。次の構文を使用して、初期ファイル（「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 singletonを使用した例もニースで​​す。

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

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

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

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

私は模倣の大ファンではありませんが、これはグローバルスコープの外に移動したいオブジェクトがたくさんある場合に役立ちます。

27
Damir Zekić

コード編成では、規則とドキュメント標準の採用が必要です。
1。物理ファイルの名前空間コード。

Exc = {};


2。これらの名前空間javascriptのグループクラス。
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とFors、通常はコードの重要なロジックを実装します）。

/**
  * 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;
    ...
};


これらはいくつかのヒントにすぎませんが、それはコードの編成に大いに役立ちました。成功するには規律が必要だということを忘れないでください！

18
Nery Jr

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

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

Dojo（およびPrototype？）には、この手法の組み込みバージョンがあると思います。

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

13
meouw

前の仕事で Javascript Module Pattern をExt JSアプリケーションに正常に適用することができました。うまくカプセル化されたコードを作成する簡単な方法を提供しました。

12
Alan

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

モジュールDojoを使用すると、次の目的を達成できます。

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

私の上司は、まだモジュラーコード（C言語）を書いたときのことを語っており、最近のコードがどれほどくだらないかと文句を言っています！プログラマーは任意のフレームワークでアセンブリを作成できると言われています。コード編成を克服するための戦略が常にあります。基本的な問題は、Javaスクリプトをおもちゃとして扱い、決して学ぼうとしない人にあります。

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

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

9
questzen

JavasciptMVC を確認してください。

あなたはできる ：

  • コードをモデル、ビュー、コントローラーレイヤーに分割します。

  • すべてのコードを単一の本番ファイルに圧縮します

  • コードを自動生成する

  • 単体テストを作成して実行する

  • その他多数...

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

9
andyuk

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

これらの種類のフレームワークは非常に多くあり、それらのほとんども非常に小さいものです。私の個人的な意見では、派手なUI向けのjQueryを2、3行以上書く場合、またはリッチなAjaxアプリケーションが必要な場合、MVCフレームワークがあなたの人生をはるかに楽にします。

9
Chetan

「おかしなように書いて、うまくいくことを願っていますか？」、たった2人の開発者によって開発され、保守されているこのようなプロジェクトを見てきました。さらに、考えられるすべてのjquery関数に異なるショートカットがありました。コードをプラグインとして整理することをお勧めします。これは、クラス、モジュール、ネームスペース、およびユニバース全体に相当するjqueryであるためです。しかし事態はさらに悪化し、プロジェクトで使用される3行のコードのすべての組み合わせを置き換えるプラグインの作成を開始しました。個人的にjQueryは悪魔だと思います。JavaScriptを大量に使用するプロジェクトでは使用しないでください。怠け者になり、コードの編成を一切考えないようになります。 40行のjQuery関数を持つ1行よりも100行のJavaScriptを読みたいです（冗談ではありません）。一般的な考えに反して、名前空間とクラスに相当するJavaScriptコードを非常に簡単に整理できます。それがYUIとDojoの仕事です。必要に応じて簡単にロールバックできます。 YUIのアプローチははるかに優れており、効率的です。しかし、有用なものを書きたい場合は、通常、YUI命名規則を補うためにスニペットをサポートするNiceエディターが必要です。

8
Vasil

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

7
Nikola Stjelja

OO + MVCの優れたプリンシパルは、複雑なjavascriptアプリを管理する上で間違いなく大きな役割を果たすでしょう。

基本的に、次の使い慣れたデザインに合わせてアプリとjavascriptを整理しています（これは、デスクトッププログラミングの時代からWeb 2.0まで遡ります）

JS OO and MVC

画像上の数値の説明：

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

以前は、ファイルを独自のjsに分離し、一般的な方法を使用してOO原則を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 ）インフラストラクチャはまさに必要なものを提供します。それらを使用する理由はほとんどありません。

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

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

YUI3を使用して、ベースをモデルとして拡張するクラス、ウィジェットをビューとして拡張するクラス、および必要なロジックとサーバー側の呼び出しを行っているコントローラークラスがあるコースを分離することにより、MVCパターンを作成できました。

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

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

6
momo

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>

お役に立てれば。

6
Darryl

私の最後のプロジェクト-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の知識が限られていることを考えると、これを管理するためのより良い方法がなければならないことはわかっていますが、今まではうまく機能しています。

6
Danita

Dojoのパッケージ管理（dojo.requireおよびdojo.provide）とクラスシステム（dojo.declareは単純な多重継承も可能）を使用して、すべてのクラス/ウィジェットをモジュール化します。別のファイルに。これにより、コードの整理が維持されるだけでなく、クラス/ウィジェットの遅延/ジャストインタイムロードが可能になります。

5
Justin Johnson

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

3
Chetan

偽のクラスを作成し、意味のある別の関数にスローできるものはすべて実行されるようにします。また、コメントをたくさん書いて、スパゲッティコードを書くのではなく、すべてをセクションにまとめてください。たとえば、私の理想を描いたナンセンスなコード。明らかに、実際には、基本的にそれらの機能を含む多くのライブラリも作成しています。

$(function(){
    //Preload header images
    $('a.rollover').preload();

    //Create new datagrid
    var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});

var datagrid = {
    init: function(w, url, style){
        //Rendering code goes here for style / width
        //code etc

        //Fetch data in
        $.get(url, {}, function(data){
            data = data.split('\n');
            for(var i=0; i < data.length; i++){
                //fetching data
            }
        })
    },
    refresh: function(deep){
        //more functions etc.
    }
};
3
Dmitri Farkov

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

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

テンプレートで、開発モードになっているかどうかを確認し、個別のファイルを含めます。本番の場合は、最後のファイル（自分で「ビルド」する必要があります）を含めます。

3
changelog

これはおそらく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');
2
ken

JavaScript組織では、次を使用しています

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

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の コントローラーのみ 側を使用することもできます。

2
rolnn

私はこの小さなものを使用しています。 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.
        });
    }
});
2
gaperton

あなたの質問は、昨年末に私を悩ませたものです。違い-プライベートメソッドとパブリックメソッドを聞いたことがない新しい開発者にコードを渡すこと。単純なものを構築する必要がありました。

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

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

数分で確認できる他のユーザーには、フィードバックをお待ちしています！

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

乾杯！

アダム

1
Adam

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

0
Brig Lamoreaux

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

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

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

このいずれも、効率的なJavaScriptを書くことを妨げないことに注意してください！ :-)

0
staticsan

私は、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を使用して他のスクリプトをオンザフライで読み込む with Ajile 。

0
Aron Rotteveel