34

我正在使用require.js将项目从“旧”浏览器样式模块结构更改为“新”浏览器或服务器端javascript模块结构。

在客户端上，我使用的是异地托管的 jQuery，所以我从他们在README的“使用优先级配置”技术中给出的示例开始：

<title>My Page</title>
<script src="scripts/require.js"></script>
<script>
require({
    baseUrl: 'scripts',
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
        jqueryui: ...,
        ...
        ... // bunch more paths here
    },
    priority: ['jquery']
}, [ 'main' ]);
</script>

这实际上工作正常。但我想将功能从 main 导出到 HTML 网页本身。例如：

<a class="button" href="#" onclick="MyApi.foo();">
    <img src="foo.png" alt="foo" />Click for: <b>Foo!</b>
</a>

在适应 AMD 模块模式之前，我通过在全局空间中创建字典对象来公开各种文件的功能：

// main.js

var MyApi = {};

jQuery(document).ready(function($) {
    // ...unexported code goes here...

    // export function via MyApi
    MyApi.foo = function() {
        alert("Foo!");
    };
});

但我不知道 require.js 中的正确方法是什么。是否可以将 HTML morerequire语句放入<script>标签内，然后命名模块以便可以在网页内使用？或者这是否应该始终在 main.js 中动态完成，例如$('#foobutton').click(...)？

4

4 回答 4

32

使用 AMD 的一个好处是不再需要命名空间。尝试使用 RequireJS 再次创建它们将违背 AMD 提倡的模式。

关于使用main.js，只有当您有一个单页应用程序并且您的所有代码都从一个地方引用时，这才是真正合适的。您可以根据需要随意调用其他模块来 require 和加载其他模块。

使用上面的示例，您可以这样处理：

foo.js

define(['jquery'], function($) {

    // Some set up 
    // code here

    // Return module with methods
    return {
        bar: function() {

        }
    }


});

page.js

require(['foo'], function(foo) {

    // jQuery loaded by foo module so free to use it
    $('.button').on('click', function(e) {
        foo.bar();
        e.preventDefault();
    });

});

然后在您的页面中使用 require 请求 page.js 文件。

使用上面的示例：

require({
    // config stuff here
}, [ 'page' ]);

或将其加载到更下方的页面中：

<script>
    require(['page']);
</script>

一些额外的点

  • 使用上面的模式，page.js 可以很容易地需要许多其他模块来加载其他与页面相关的功能。

  • 在将成员附加到全局命名空间之前，您现在将该代码拆分为可以在任何页面上重复使用的单独模块。所有这些都不依赖于全局对象。

  • 使用 require 这种方式将事件附加到您的 DOM 元素很可能依赖于RequireJS 提供的 DOM Ready 模块

于 2012-04-29T22:44:04.213 回答
16

您还可以在 javascript 的窗口类上设置引用。

在应用程序模块的底部window.MyApi = MyApi;

<a class="button" href="#" onclick="MyApi.foo();"></a>

于 2012-06-11T00:16:20.207 回答
3

把onclick=""你的标记放进去感觉很脏——把展示和内容混在一起。我建议您添加一个<script>块并将其放入其中，一旦进入回调，并在必要时require放入另一个内部，然后以正常方式连接您的事件处理程序： . 如果您可以做到这一点足够通用以使其适用于多个页面，那么将其放在一个被缩小、组合和缓存的外部文件中。但通常这些事情最终都是特定于页面的，因此页面底部的标签是避免另一个外部资源请求的好解决方案。$(document).ready()$('#node').click(...)<script>

于 2012-04-29T07:35:26.887 回答
2

另一种解决方案就是使用这样的代码（当然requirejs必须添加到页面中）：

<input type="button" onclick="(function() { require('mymodule').do_work() })()"/>
于 2016-03-02T07:41:26.230 回答