どのように定義された関数をRequireJSでhtmlで呼び出すのですか？

これはmain.jsに関するものですが、私はオンラインで見つかったすべての例を試してみましたが、うまく動作しませんでした。どのように定義された関数をRequireJSでhtmlで呼び出すのですか？

私は現在持っている：3つのモジュール（one.js、two.js、three.js）、main.js、index.htmlをとrequire.js

one.jsのようないくつかの参照ファイル：

define("one",['./two', './three'], function(two, three) { 
    var one = 1; 
    return { 
    value: function(e){ 
     return one; 
    } 
    } 
});

を

two.js：

define("two",['./one', './three'], function(one, three) { 
    var two = 2; 
    return { 
    value: function(){ 
     return two; 
    } 
    }  
});

main.js：

require(["one", "two", "three"], function (one, two, three) { 

});

マイHTML：

<html> 
    <head> 
     <title>My App</title> 
     <script data-main="scripts/main" src="scripts/require.js"></script> 
    </head> 
    // the function from two.js having the same name as another in one.js needs to be called here. 
    <body onload="value();"> 
     <h1>My App</h1> 
    </body> 
</html>

出典

2016-10-12 zhanmu

onload関数を呼び出すには、main.jsでrequireコールバックinvockingと同じ概念です。あなただけのrequire内の関数を呼び出す必要のコールバック：

require(["one", "two", "three"], function (one, two, three) { 
    one.value(); 
});

すべてrequireのコールバックパラメータはdefineによって作成された関数への参照です。内部の同じメソッド間に矛盾はありません。

出典

2016-10-12 08:34:35 terales

あなたはそれをやろうとしているようにすることはできません。あなたのコール：

require(["one", "two", "three"], function (one, two, three) { });

あなたのモジュールをロードしますが、その値はコールバックのパラメータで利用可能になります。 グローバルスペースには何もエクスポートされません。<body onload="value();">を動作させるには、valueがグローバル・スペースになければなりません。

もう1つの問題は、RequireJSが非同期であることです。だから意図的にモジュールtwoがvalueをグローバルスペースにリークさせるようにコードを書き直したとしても、のコードは確実に動作しません。一般に、bodyのonloadが発射されるときに、requireのコールが完了するときを知ることはできません。

「グルーコード」に必要なものをロードすることで、この問題を回避することができます。 <body onload="onBodyLoaded()">を設定していscriptありbody前：これは私のコードであれば

function onBodyLoaded() { 
    require(["two"], function (two) { 
     two.value(); 
    }); 
}

は、私が実際にonload属性を使用していないと思いますが、代わりにようなもので、本体の後scriptを持っているでしょう：

(function() { 
    document.body.addEventListener("load", function onBodyLoaded() { 
     require(["two"], function (two) { 
      two.value(); 
     }); 
    }); 
}());

またはdomReady pluginを使用します。 bodyのloadイベントを聞いているのと全く同じではありませんが、十分に良いかもしれません。

出典

2016-10-12 10:48:58 Louis

どのように定義された関数をRequireJSでhtmlで呼び出すのですか？

答えて

関連する問題