Question

I m 将一个项目从“旧”浏览器式模块结构改为“新”浏览器-或-<>>>-server-side-javascript 模块结构,require.js。

在用户Im使用一个外部接待了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>

这实际上就是行使一切权利。但我想从主要网站向超文本网页本身出口功能。例如:

<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!");
    };
});

但是,我不知道正确做法有何要求。 j 。能否在“<代码>和”栏内添加“<>/code>>; 字母“>”;标签,然后使用名称模块,以便在网页上加以使用? 或者,这是否总是在主.js的范围内,例如$(#foobutton .click(......)?

Answer 1

使用AMD的好处之一是减少对名称空间的需求。要求JS再造,将违背AMD促进的模式。

关于使用<代码>main.js的问题,如果你有单一页数,而且你的所有代码都从一个地方提及,这才是真正适当的。你们可以自行要求并装满其他模块。

Using your example from above, you could approach it this way:

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

});

然后,请上页。 j 备案。

Using your example above:

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

或者在网页上加载:

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

<>增加

Using the pattern above, page.js could easily require many other modules to load other page related functionality.

Where before you would attach members to your global namespace, you now split that code into separate modules that can be re-used on any page. All without reliance on a global object.

Using require this way to attach events to your DOM elements will most likely rely on the DOM Ready module provided by RequireJS

Answer 2

你们还可以把 reference印的窗户分类作为参考。

申请模块底部window。 MyApi = MyApi;

<a category=“button”href=“#” onclick=“MyApi.foo();”></a>

Answer 3

将onclick="置于你的标识内感到 d脏——列报方式与内容相结合。 d 我建议添加<代码><script>栏,并将require<>/code>列入其中,一在背书内,一在另一内部$(document)ready()。如有必要,则按正常方式对事件处理器进行电解:$(#node .click(......)。如果你能够以笼统的方式这样做,使之适用于多页,那么就把它放在一个外部档案中,而外部档案是分明、合并和贴切的。但是,通常这些事情最终都是针对具体页的,因此,一个<代码><script> 标签在网页底部是避免另一个外部资源要求的良好解决办法。

Answer 4

另一种解决办法是像使用法(课程编号requirejs)。页: 1

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

友情链接