如何在HTML中通過RequireJS調用已定義的函數？

這是關於main.js我猜，但我已經嘗試了我在網上找到的所有例子，他們只是沒有工作。如何在HTML中通過RequireJS調用已定義的函數？

我目前：三個模塊（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.jsrequire回調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必須在全球空間。

另一個問題是RequireJS是異步的。因此，即使您重寫了代碼，故意讓模塊two將其value泄漏到全局空間，但代碼無法可靠運行。一般而言，您無法知道您的require電話何時會完成，相對於body的onload將被解僱。

你可以通過讓「膠水代碼」加載你需要的東西來解決這個問題。設置<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

如何在HTML中通過RequireJS調用已定義的函數？

回答

相關問題