2

と呼ばれるファイルがcommon.jsあり、それはを使用して私のサイトの各ページに含まれています<script />。

私のサイトの機能が成長するにつれて、それは急速に成長します（私は願っています;私は想像します）。:)

jQueryイベントがある例を見てみましょう。

$('#that').click(function() {

    one_of_many_functions($(this));

}

今のところ、私はそれを持っていone_of_many_functions()ますcommon.js。

そのような関数が呼び出されたときにJavaScriptが自動的にファイルをロードする可能性はありますone_of_many_functions.jsが、それは存在しませんか？オートローダーのように。:)

私が見る2番目のオプションは次のようなことをすることです：

$('#that').click(function() {

    include('one_of_many_functions');

    one_of_many_functions($(this));

}

それは自動的ではありませんが、それでも-必要なファイルが含まれています。

これは可能ですか？アドバイスありがとうございます！:)

4

3 に答える 3

3

オンデマンドで外部JavaScriptを直接自動ロードすることはできません。ただし、前述の2番目のルートと同様の動的包含メカニズムを実装することは可能です。

ただし、いくつかの課題があります。新しい外部スクリプトを「含める」と、含まれている機能をすぐに使用できなくなります。スクリプトが読み込まれるまで待つ必要があります。これは、コードをいくらか断片化する必要があることを意味します。つまり、コアに含めるべきものとオンデマンドで含めることができるものについて、いくつかの決定を行う必要があります。

どのアセットがすでにロードされているかを追跡する中央オブジェクトを設定する必要があります。これがその簡単なモックアップです：

var assets = {
    assets: {},
    include: function (asset_name, callback) {
        if (typeof callback != 'function')
            callback = function () { return false; };

        if (typeof this.assets[asset_name] != 'undefined' )
            return callback();


        var html_doc = document.getElementsByTagName('head')[0];
        var st = document.createElement('script');
        st.setAttribute('language', 'javascript');
        st.setAttribute('type', 'text/javascript');
        st.setAttribute('src', asset_name);
        st.onload = function () { assets._script_loaded(asset_name, callback); };
        html_doc.appendChild(st);
    },
    _script_loaded: function (asset_name, callback) {
        this.assets[asset_name] = true;
        callback();
    }
};

assets.inlude('myfile.js', function () {
    /* do stuff that depends on myfile.js */
});
于 2011-10-10T17:23:25.503 に答える
0

確かにそれは可能ですが、これは管理が面倒になる可能性があります。このようなものを実装するには、関数のインデックスとそれに対応するソースファイルを維持する必要があります。あなたのプロジェクトが成長するにつれて、これはいくつかの理由で厄介になる可能性があります-私の心の中で突き出ている2つは次のとおりです：

A）呼び出している関数が見つからない場合にスクリプトがどこを探すべきかをスクリプトが認識できるように、インデックスオブジェクト/ルックアップメカニズムを維持するという追加の責任があります。

B）これは、成長中のプロジェクトをデバッグするときにうまくいかない可能性があるもう1つのことです。

私がこれを書き終えるまでに、他の誰かがこれについて言及することは間違いありませんが、すべてのコードを1つの.jsファイルに結合する方法を理解するために時間を費やしたほうがよいでしょう。そうすることの利点は十分に文書化されています。

于 2011-10-10T17:24:09.300 に答える
0

私は1年前にそれに近いものを作成しました。実際、それが現場で何か新しいものであるかどうかを検索して、このスレッドを見つけました。ここで私が作成したものを見ることができます：https ：//github.com/thiagomata/CanvasBox/blob/master/src/main/New.js

私のプロジェクトは、ほぼ100％OOPです。そこで、この事実を利用してソリューションに焦点を合わせました。この「クラス」を「New」という名前で作成します。これは、最初にオブジェクトをロードし、その後にオブジェクトをロードするために使用されます。

これを使用している人の例：

 var objSquare = New.Square(); // Square is loaded and after that instance is created
     objSquare.x = objBox.width / 2;
     objSquare.y = objBox.height / 2;

 var objSomeExample = New.Stuff("some parameters can be sent too");

このバージョンでは、すべてのjsファイルの位置で一部のjsonを使用していません。あなたがここで見ることができるように、マッピングはハードコアです：

New.prototype.arrMap = {
    CanvasBox: "" + window.MAIN_PATH + "CanvasBox",
    CanvasBoxBehavior: "" + window.MAIN_PATH + "CanvasBoxBehavior",
    CanvasBoxButton: "" + window.MAIN_PATH + "CanvasBoxButton",
    // (...)
};

しかし、これをより自動化してください。gulpやgruntを使用することは、私が考えていることであり、それほど難しくはありません。

このソリューションは、プロジェクトで使用するために作成されました。そのため、任意のプロジェクトで使用できるようにするには、コードにいくつかの変更が必要になる場合があります。しかし、出発点かもしれません。

お役に立てれば。

前に言ったように、これはまだ作業中の進歩です。しかし、gulpを使用して最新の状態に保つ、より独立したモジュールを作成しました。

すべての魔法のキューは次のリンクにあります：https： //github.com/thiagomata/CanvasBox/blob/master/src/coffee/main/Instance.coffee
https://github.com/thiagomata/CanvasBox/blob/master /src/node/scripts.js https://github.com/thiagomata/CanvasBox/blob/master/gulpfile.js

Instance.coffeeのこの行に特別な外観が必要です

###
# Create an instance of the object passing the argument
###
instaceObject = (->
  ClassElement = (args) ->
    window[args["0"]].apply this, args["1"]
  ->
    ClassElement:: = (window[arguments["0"]])::
    objElement = new ClassElement(arguments)
    return objElement
)()

この行により、ファイルをロードした後にオブジェクトのインスタンスを初期化できます。createメソッドで使用されるように：

create:()->
  @load()
  return instaceObject(@packageName, arguments)
于 2014-07-02T16:01:52.577 に答える