javascript 基本 RequireJS 帮助 - 如何调用/定义函数？也使用 onclick 和 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18619245/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Basic RequireJS Help - How do I call / define a function? Using onclick and jquery as well
提问by Katie
Help!
帮助！
I'm super confused guys... I have no idea what I'm doing
我是超级困惑的家伙......我不知道我在做什么
I've been looking at RequireJS and AMD tutorials & examples all day yesterday and today and got to this point, however I think I still have a fundamental misunderstanding as to what a module is.
我昨天和今天一整天都在看 RequireJS 和 AMD 教程和示例，直到这一点，但是我认为我仍然对模块是什么有根本的误解。
- I have a bunch of functions that get called "onClick" from my HTML elements...
- How do I define my functionswith RequireJS so that I can callthem? So confused :/ Also I don't understand
- how to get my onLoadfunction to get called (in my case its $(function(), but how to I kick this off in RequireJS?)
- 我有一堆从我的 HTML 元素中被称为“onClick”的函数......
- 如何使用 RequireJS定义我的函数以便我可以调用它们？很困惑：/我也不明白
- 如何让我的onLoad函数被调用（在我的例子中是$(function()，但我如何在 RequireJS 中启动它？）
I am using Node v0.10.12
我正在使用 Node v0.10.12
<html>
...
<head>
<script data-main="" src="libraries/require.js"></script>
...
<script>
...
//I really need all these javascript files for every function defined on this page...
require(['simulatorConfiguration.js',
'modelConfiguration.js',
'libraries/jquery-1.10.2.min.js',
'libraries/jquery.lightbox_me.js',
'libraries/jquery-migrate-1.2.1.js',
'libraries/raphael-min.js'], function(start) {
$(function() {
loadPage(); //<--- CALL LOAD PAGE, but it can't find the function
//do some jquery stuff
});
});
//function that get's called on body onload!
define('loadPage', function loadPage()
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
});
define('hideAllDivs', function hideAllDivs()
{
//some UI stuff...
});
define('createModelMenu', function createModelMenu()
{
//some jquery stuff...
});
define('createTestMenu', function createTestMenu(model_key)
{
var javascriptLoc = "models/" + models[model_key].modelDir + "/testConfiguration.js";
require([javascriptLoc], function(util) {
showModelInformation(model_key);
//some Jquery stuff...
});
});
define('showModelInformation', function showModelInformation(model_key)
{
hideAllDivs();
//some jquery stuff
});
define('showTest', function showTest(test_key)
{
hideAllDivs();
//some RaphaelJS stuff...
});
define('takeControl', function takeControl()
{
//some UI stuff
});
define('giveUpControl', function giveUpControl()
{
//some UI stuff...
});
</script>
</head>
<body>
...
<li><a href="#" id="AoD" onclick="showTests(this.id)">Audio On Demand</a></li>
...
<input type="submit" value="Yes, Release Control" onclick="giveUpControl()">
....
<input type="submit" value="Take Control" onclick="takeControl()">
....
</body>
Do I need to do something like:
我是否需要执行以下操作：
//function that get's called on body onload!
define('loadPage', function loadPage()
{
return function(loadPage)
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
}
});
//and call it with loadPage.loadPage(); ?
or maybe something like:
或者可能是这样的：
//function that get's called on body onload!
define('loadPage', function loadPage()
{
return function()
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
}
});
or
或者
function(loadPage)?
I did look at these similar questions:
我确实看过这些类似的问题：
- Calling methods in RequireJs modules from HTML elements such as onclick handlers
- How do I use jquery ui with requirejs
- How can I include jQueryUI in my modular backbone.js app using RequireJS?
- 从 HTML 元素（例如 onclick 处理程序）调用 RequireJs 模块中的方法
- 我如何在 requirejs 中使用 jquery ui
- 如何使用 RequireJS 在我的模块化主干.js 应用程序中包含 jQueryUI？
These were helpful too, but still not there yet:
这些也很有帮助，但仍然没有：
- http://hippieitgeek.blogspot.se/2013/07/load-jquery-ui-with-requirejs.html
- http://www.requirejs.org/jqueryui-amd/example/webapp/app.html
- https://github.com/jrburke/jqueryui-amd
- http://hippieitgeek.blogspot.se/2013/07/load-jquery-ui-with-requirejs.html
- http://www.requirejs.org/jqueryui-amd/example/webapp/app.html
- https://github.com/jrburke/jqueryui-amd
I tried separating the functions into another file, so I have "index.html" and "Logic.js"... here is the gist:
我尝试将函数分离到另一个文件中，所以我有“index.html”和“Logic.js”……这里是要点：
=========================================
========================================
SOLUTION
解决方案
采纳答案by Chris
The minimum code you need to (a) create and (b) load a module looks something like this:
(a) 创建和 (b) 加载模块所需的最少代码如下所示：
// (a) Create two modules, 'hideAllDivs' and 'loadPage'.
define ('hideAllDivs', [], function () {
return function() {
};
});
define('loadPage', ['hideAllDivs'], function(hideAllDivs)
{
return function()
{
hideAllDivs();
//more jquery stuff...
createModelMenu();
//more jquery stuff...
};
});
// (b) Load the loadPage module and call it.
require(['jquery-blah-blah', 'loadPage', 'anotherModule'], function($, loadPage, anotherModule) {
$(function() {
loadPage();
});
});
Highly recommended reading: http://requirejs.org/docs/api.html#define
