javascript - 从 HTML 元素(例如 onclick 处理程序)调用 RequireJs 模块中的方法

Question

我正在将项目从“旧的”浏览器风格的模块结构更改为“新的”浏览器-或-server-side-javascript 模块结构require.js .

在客户端上，我使用的是异地托管的 jQuery，因此我从他们在 "use priority config" 中提供的示例开始自述文件的技巧:

<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里多放点行吗require <script> 中的语句标签，然后命名模块，以便可以在网页中使用它？或者这应该始终在 main.js 中动态完成，例如 $('#foobutton').click(...) ？

Answer 1

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

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

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

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 可以很容易地需要许多其他的加载其他页面相关功能的模块。

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

• 使用 require 这种方式将事件附加到您的 DOM 元素将最有可能 rely on the DOM Ready module由 RequireJS 提供