4

我迷失了require.js。定义似乎总是在 require.js 示例页面中返回一些东西。

如何将以下内容转换为 require.js 样式编码？

$("button_1").click(function(event) {
    alert("button 1 has been clicked");
});

因为它returns什么都没有。

4

4 回答 4

7

我认为您缺少必需的部分。当您使用 AMD 时，您需要先“导入”其他模块，然后才能使用 em。看看下面的例子，它应该足以让你继续前进。通过使用 requrejs+jquery 下载：

索引.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="path/to/requirejs_jquery" data-main="path/to/main.js" ></script>
</head>
<body>
  <button id="button_1">sup</button>
</body>
</html>

主.js

require(["jquery"],function($){ //import the jquery script 
  $(function(){
    $("#button_1").click(function(){
      alert("#button_1 got a click")
    })
  })
})

您还提到了定义，那就是当您想要声明一个新模块时，您可以稍后将其“导入”到您的项目中。所以让我们扩展升位并创建一个名为“my”的文件夹并将其放在主脚本旁边

我的/module.js

define(function(){
  return {
    foo: function(){alert("bar")},
    barz: function(){return "hey from barz"}
  }
})

现在我们可以简单地将它包含在主文件（或其他模块）中，如下所示：

main.js

require(["jquery", "my/module"],function($, module){ //import the jquery script 
  $(function(){
    $("#button_1").click(function(){
      alert("#button_1 got a click")
      console.log(module,"sup")
    })
  })
})
于 2013-02-08T17:13:32.347 回答
3

$("button_1").click(function(event) {});什么都不返回，因为您没有指定是否需要元素的id或class。

如果你想要元素的id：

例子： <input id="button_1" type="button" />

$("#button_1").click(function(event) {
    alert("button 1 has been clicked");
});

如果你想要元素的class：

例子： <input class="button_1" type="button" />

$(".button_1").click(function(event) {
    alert("button 1 has been clicked");
});
于 2013-02-08T17:01:19.367 回答
1

我对您的问题的解释是：您想了解 require.js 和 AMD，并希望从一个精简到最低限度的示例开始。

我创建了这个 jsfiddle来说明您的 button_1 示例，并让您通过查看控制台和检查器的网络选项卡来玩弄 require.js 行为。

在 require.js 的核心是 main.js 文件，您可以在其中定义加载依赖项。我选择了一个简化的 shim 结构来定义依赖项：

requirejs.config({
    shim: {                // the shim structure controls your load dependencies
        'jquery': [],
        'sample1.amd': ['jquery'],    // the key denotes the module name, the value array lists the dependenc(y|ies)
        'sample2.amd': ['jquery']    // the key denotes the module name, the value array lists the dependenc(y|ies)
    },
    waitSeconds: 30            // maximum time to wait for the modules to load
});

require(
    [
        'jquery',
        'sample1.amd',
        'sample2.amd'
    ],
    function(
        $    // $ is the local instance of the defined module 'jquery' (see 1st plugin in dependency array above)
    ) {
        console.log("jQuery, sample1.amd.js and sample2.amd.js loaded through AMD");
    }
);

您将通过指定以下内容来加载 main.js 文件（以及在 main.js 中定义的所有文件）：

<script src="/path-to/require-jquery.js" data-main="/path-to/main.js" ></script>

您的按钮单击定义包含在 sample1.amd.js 中。出于演示目的，我还在sample2.amd.js 中包装了相同的按钮单击定义。这就是为什么在演示中，当您单击按钮时，您会在控制台中看到 2 条日志消息。

当您检查网络选项卡中的加载行为时，您还可以注意到使用 require.js 可能获得的积极性能影响：sample1.amd.js 和 sample2.amd.js并行加载- 无论依赖关系如何，require。 Node.js 总是会尽可能早地加载模块，只有它们的执行会根据它们的依赖关系排队。

这是我的 jsfiddle的链接。希望这能让你开始使用 require.js

于 2013-02-13T11:46:21.760 回答
1

在 RequireJS 站点上有一个很好的解释如何设置 RequireJS 和 jQuery 。下载组合的 jQuery 和 RequireJS 文件是最简单的。这不是绝对必要的，因为您应该能够正常包含 jQuery 并使用 AMD 加载其他所有内容，但我自己还没有彻底测试过。我使用组合的 jQuery + RequireJS 文件，因为一旦掌握了它就非常简单。

在您想要做的最简单的情况下（例如，如果您有一个想要作为 jQuery 的依赖项运行的主脚本），您只需要包含require.js在您的 HTML 文件中，如下所示：

<script data-main="path/to/yourScript.js" src="path/to/require.js"></script>

确保将您的脚本包含在 script 标签的 data-main 属性中。然后，在 中yourScript.js，您将像这样包装您的代码：

/* yourScript.js */
require(['jquery'], function($) {
    // Use jQuery normally.
    $("#button_1").click(function(event) {
        alert("button 1 has been clicked");
    });        
});

现在，这是最简单的命令式示例，根本没有真正使用 AMD 范例或动态依赖项。但它可以作为一个粗略的工作示例。现在，如果您想将$("button_1").click函数包装在 AMD 模块中，您可以创建一个button1.js文件并将其包装在define()调用中：

/* button1.js */
define(['jquery'], function($) {
    // The following code will be run when this module is loaded.
    $("#button_1").click(function(event) {
         alert("button 1 has been clicked");
    });
    return {name: "button1 module!"}; 
    // Above, I'm just illustrating that AMD modules usually 
    // return an object or a function to pass to the anonymous 
    // function that's called when they're loaded by a dependency.
});

/* yourScript.js */
require(['jquery', 'button1'], function($, button1) {
    alert(button1.name); // This will alert with "button1 module"
});

带回家的一点是，两者都define()采用require()一组依赖项（它们只是 .js 文件名，可以选择不带 .js）和一个函数作为参数。然后他们将执行在这些文件中找到的代码，将返回的值作为参数传递给他们的函数参数。这有点过于简化了加载和依赖方案，但它应该足以让您入门。

我在这里写了一个实时的工作示例：https ://c9.io/aphazel/requirejs-simple-example

PS，您可能想使用$('#button_1')或$('.button_1'):)

于 2013-02-14T16:29:27.120 回答