¿Cómo funciona RequireJS con varias páginas y vistas parciales?

Estoy buscando en RequireJS pero no estoy seguro de algunas cosas.¿Cómo funciona RequireJS con varias páginas y vistas parciales?

Entiendo cómo puedo cargar todas mis dependencias con main.js. Pero, ¿necesito agregar alguna lógica para trabajar con esas dependencias en main.js?

Para mí, main.js parece un estado de documento. Y usted ingresa la lógica allí cuando el documento se ha cargado, ¿verdad?

Y para otras páginas y vistas parciales, ¿necesito crear múltiples main.js o puedo simplemente referenciar funciones cargadas en dependencias de las vistas en un <script> por ejemplo?

Fuente

2012-05-30 Johan Alkstål

Actualización - He añadido un ejemplo del uso de RequireJS con componentes HTML modulares. Construir ejemplo herramienta incluida - https://github.com/simonsmith/modular-html-requirejs

También he escrito un artículo en el blog sobre esto - http://simonsmith.io/modular-html-components-with-requirejs/

El enfoque de usar sólo main.js para todo, es probably more suited to a single page application.

La forma en que he manejado esta situación es que sólo se incluyen JS en todo el sitio común en el archivo main.js:

En cada página:

<script src="require.js" data-main="main"></script>

main.js

require.config({ 
// config options 
}); 

require(['jquery', 'common/ajaxLoader', 'common/someOtherModule'], function($, ajax, otherModule) { 
    // Modules that do stuff on every page are instantiated here 
});

page1.html

<script> 
    require(['scripts/page1']); 
</script>

page1.js

require(['jquery', 'page1Module'], function($, module){ 
    // page1 specific stuff here 
});

El ejemplo anterior es sólo uno de un par de formas de manejarlo. Nota the difference between loading a plain JavaScript file and a module.

Una regla de oro que sigo es mantener todos los módulos reutilizables (o clases si se hace más fácil conceptualizar) dentro de un define con sus propias dependencias, etc y luego usar require para agarrar esos módulos, utilizar sus métodos o interactuar con ellos de alguna manera.

El uso de este patrón casi seguro requerirá el uso del módulo domReady that is a separate plugin for RequireJS. Utilice este instead of a ready function in jQuery, por ejemplo, ya que permite que los módulos comiencen a descargarse antes de que el DOM esté listo, lo que reduce la espera de la ejecución de su código.

Editar Es posible que desee see another example of multi-page application en los RequireJS repo

Fuente

2012-05-30 13:10:02

Gracias por la respuesta muy bien escrito. Tengo una mejor comprensión de cómo usar RequireJS ahora. –

el método anterior funciona perfectamente en las páginas, pero cuando la página se carga a través de ajax llama a un div, los módulos no se están cargando ... ¿Alguna ayuda? –

Este enfoque no parece ser completamente confiable porque el código en las etiquetas de guiones en línea puede ser ejecutado antes que el código en main.js, lo que ocasiona fallas ocasionales. Ver [esta respuesta] (http://stackoverflow.com/a/14345709) a una pregunta relacionada. –

que han pasado recientemente por el ejercicio de la creación de RequrieJS con la optimización automática de acumulación en una aplicación ASP.NET MVC.Hay muchos artículos de blog útiles como Simon's que son una gran referencia. Desde una perspectiva ASP.NET, una de las más útiles que encontré en términos de configurar el optimizador RequireJS para aplicaciones ASP.NET de varias páginas fue Making RequireJS play nice with ASP.NET MVC.

Usando la gran información que ya tengo, he puesto mi propio ASP.NET MVC RequireJS example on GitHub. Gran parte de lo que se incluye es similar a los ejemplos que ya existen, sin embargo, para abordar el tema de las vistas parciales, y las dependencias de múltiples páginas requieren de un enfoque ligeramente diferente.

_Layout.cshtml

La diferencia más notable de los ejemplos existentes es la creación de una costumbre RequireViewPage que expone métodos para pasar los datos de configuración en RequrieJS así como página de referencia específicas requieren dependencias.

Así que su _Layout.cshtml se parecerá mucho a lo que se espera con:

<head> 
    ... 
    @RenderModuleConfig() 
    <script type="text/javascript" src="@Url.Script("vendor/require.js")" data-main="main"></script> 
</head> 
<body> 
    ...

& Vistas Parciales

Para cablear puntos de vista (y en mi caso modelos de vista nocaut), an additional script fragment se ha agregado a la parte inferior de _Layout.cshtml como sigue

... 
    @RenderSection("scripts", required: false) 
    <script type="text/javascript">require(['main'], function() { require(['lib/knockout/knockout.require']); });</script> 
</body>

Esta voluntad ensu es decir, para cualquier dependencia de visualización, el módulo principal se ha cargado (asumiendo que las dependencias para main se han definido en main.js y luego permite visualizar las dependencias específicas que se cablearán mediante atributos de datos.

<div data-require="@MainModule"> ... </div> 
<div data-require="@Module("address")"> ... </div> 
<div data-require="view\home\index\model"> ... </div>

Para una explicación completa del diseño y opciones, consulte las README on GitHub

Fuente

2014-02-19 14:25:03

¿Cómo funciona RequireJS con varias páginas y vistas parciales?

Respuesta

Cuestiones relacionadas