Estou mudando um projeto de uma estrutura de módulo de estilo "antigo" para um navegador "novo"ou-server-side-javascript estrutura do módulo comrequire.js.

No cliente estou usando um jQuery hospedado externamente, então eu comecei pelo exemplo que eles dão no"use prioridade config" técnica do README:

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

Isso está realmente funcionando bem. Mas eu gostaria de exportar a funcionalidade da página principal para a própria HTML. Por exemplo:

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

Antes de me encaixar no padrão do módulo AMD, expus a funcionalidade de meus vários arquivos criando um objeto de dicionário no espaço global:

<code>// main.js

var MyApi = {};

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

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

Mas eu não sei qual é a abordagem correta em require.js. Está tudo bem para colocar no HTML maisrequire declarações dentro de<script> tags e, em seguida, nomeiam os módulos para que possam ser usados ​​na página da Web? Ou isso sempre deve ser feito dinamicamente dentro de main.js, como$('#foobutton').click(...)?