Estoy cambiando un proyecto de una estructura de módulo de estilo de navegador "antigua" a una "nueva" de navegadoro-servidor-lado-javascript estructura del módulo conrequire.js.

En el cliente estoy usando un jQuery alojado fuera del sitio, así que comencé a partir del ejemplo que dan en el"usar configuración de prioridad" Técnica del 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>

Esto está funcionando realmente bien. Pero me gustaría exportar la funcionalidad de main a la propia página web HTML. Por ejemplo:

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

Antes de encajar en el patrón del módulo AMD, expuse la funcionalidad de mis diversos archivos creando un objeto de diccionario en el espacio global:

<code>// main.js

var MyApi = {};

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

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

Pero no sé cuál es el enfoque correcto en require.js. ¿Está bien poner en el HTML más?require declaraciones dentro de<script> ¿Etiquetas, y luego nombrar módulos para que puedan usarse desde la página web? O si esto siempre se hace dinámicamente dentro de main.js, como$('#foobutton').click(...)?