9

とりわけ、使用されているフレームワークを処理するハンドルjavascriptクラスを開発したいと思います。

例えば：

myClass.addFramework('jQuery'); // just an example

それは正常に動作し、私のクラスはフレームワークを追加します-しかし、その中にjQueryコードがある場合、domの準備ができた後にフレームワークがロードされるため、動作しません。したがって、デフォルトのjQueryスニペットはjQuery(document).ready(function(){});動作しません。 'はまだ定義されていません。

残りのDOMのロードを開始する前に、すべてのaddFrameworkメソッドを実行する必要がある「修正」をスクリプト化できる解決策はありますか？

4

5 に答える 5

3

タグの作成中に onload イベントを使用する必要がありますscript。次のように使用できます。

myClass.addFramework('jQuery', function () {
    // do stuff after jquery loaded.
});

次のように実装できます。

myClass.addFramework = function (name, onload) {
    var _script = document.createElement('script');
    _script.onload = function () {
        onload();
    }
    _script.onreadystatechange = function () {
        if (this.readyState == 'complete') onload();
    }
    _script.src = myClass.FRAMEWORK_BASE + '/' + name + '.js';
    document.getElementsByTagName('head')[0].appendChild(_script);
};
于 2012-05-04T11:50:16.933 に答える
2

カスタム イベントの使用はどうですか? このようなもの：

var CustomEvent = function() {
    this.eventName = arguments[0];
    var eventAction = null;
    this.subscribe = function(fn) {
        eventAction = fn; // you can customize this to hold array of handlers
    }; 
    this.fire = function(sender, eventArgs) {
        if (eventAction != null) {
            eventAction(sender, eventArgs);
        } else {
            alert('No ' + mEventName + ' handler!');
        }
    };
};

これで、次のように定義できます。

var myEvent = new CustomEvent("Framework Loaded");
myEvent.subscribe(function(sender, eventArgs) {
    alert('Framework loaded! Hurray!');
    // jQuery goes here
});

jQueryなどのフレームワークをロードした後、これを行うだけです：

myEvent.fire(null, { framework: 'jQuery' });

(コードはおそらく XHR ハンドラーのどこかに配置する必要があります)。

$(document).ready(...)また、DOM がロードされた後に発火させると、jQuery のラッパーを忘れることができます。

于 2012-04-26T09:49:08.113 に答える
1

あなたのクラスには jQuery 依存関係があるように見えますが、理想的にはその依存関係を持ってはなりません。

それにもかかわらず、jQuery を動的にロードする簡単な方法を探している場合は、これが役立つかもしれません。

function onReady(){
    // My Custom Ready state. lets go wild here.
}

if (typeof jQuery === undefined || jQuery.fn.jquery !== '1.7.2') {

    var jScript = document.createElement('script');
    jScript.setAttribute("type", "text/javascript");
    jScript.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")

    //Run onReady() once jQuery and document have loaded
    jScript.onload = function () { //Add on load Event delegate
        //JQuery is Loaded!! so you can do whatever you want with it to deligate.
        $(document).ready(onReady)
    }; 
    jScript.onreadystatechange = function () { //Same thing but for IE
        if (this.readyState == 'complete' || this.readyState == 'loaded')(function () {
            //JQuery is Loaded!! so you can do whatever you want with it to deligate.
            $(document).ready(onReady)
        });
    } 

    // Append Script to the Head
    document.getElementsByTagName("head")[0].appendChild(script_tag);

} else {
    // JQuery Exists so lets just use it
    $(document).ready(onReady);
}
于 2012-04-28T23:28:46.837 に答える
0

JQuery の document.ready 関数は、基本的にこれを行います。

window.onload = function ()
{
Javascript code goes here
}

外部ライブラリに依存せず、ドキュメントが読み込まれたときに Javascript を実行します。

また、 require.jsも参照してください。

于 2012-04-26T09:23:17.057 に答える
0

この小さなライブラリを使用して、ロード後にスクリプトを実行できます: Yepnope javascript loader

また、ajax 呼び出しを介してスクリプトをダウンロードすることもできます。そして、コールバックが成功すると、それをドキュメントに追加し、スクリプトのコードを実行します。しかし、このアプローチはすでに Yepnope ライブラリで使用されています。

于 2012-04-26T09:24:57.610 に答える