调用从HTML元素在RequireJs模块的方法如onclick处理(Calling methods

我是从一个“老”浏览器风格的模块结构改变一个项目，一个“新”浏览器的或 - 服务器端JavaScript的模块结构require.js 。

在我使用的是异地客户托管的jQuery，所以我从他们在给予的例子开始“使用优先级配置”自述的技术：

<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>

这实际上是工作的所有权利。但我想从主要出口功能的HTML网页本身。例如：

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

嵌入到AMD模块模式之前，我通过创建全局空间Dictionary对象倒是暴露的功能从我的各种文件：

// 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();
    });

});

然后在你的页面请求的page.js有需要的文件。

使用你上面的例子：

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

或在页面加载它进一步下跌：

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

一些附加分

使用上面的图案，page.js可以很容易地需要许多其他模块加载其他页面的相关功能。
凡在你将附接部件到您的全局命名空间，你现在该代码分割成任意页面上，可以重新使用单独的模块。所有没有一个全局对象的依赖。
需要使用这种方式将事件附加到你的DOM元素很可能会依赖于DOM就绪模块上的RequireJS提供

Answer 2:

您还可以设置对JavaScript的窗口类的参考。

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

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

Answer 3:

投入onclick=""您的标记里面感觉脏-混合呈现的内容。我建议你添加一个<script>块，并把require在里面，而一旦回调里面，里面另一个内部$(document).ready()然后根据需要接线了你的事件处理程序以正常方式： $('#node').click(...) 如果你能做到这一点一般不够，它是适用于多个页面，然后把它认为已经过压缩，合并，并缓存外部文件中。但通常情况下这些事情最终会被特定的页面，所以<script>在页面底部的标签是一个很好的解决方案，以避免另一个外部资源请求。

Answer 4:

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

<input type="button" onclick="(function() { require('mymodule').do_work() })()"/>

文章来源: Calling methods in RequireJs modules from HTML elements such as onclick handlers