¿Cómo funciona RequireJS con múltiples páginas y vistas parciales?

Estoy investigando RequireJS, pero no estoy seguro de algunas cosas.

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 por ejemplo?

Actualización : he agregado un ejemplo de uso de RequireJS con componentes HTML modulares. Ejemplo de herramienta de comstackción incluido – https://github.com/simonsmith/modular-html-requirejs

También escribí un artículo de blog sobre esto – http://simonsmith.io/modular-html-components-with-requirejs/


El enfoque de simplemente usar main.js para todo es probablemente más apropiado para una aplicación de una sola página .

La forma en que he manejado esta situación es solo incluir JS común en todo el sitio en el archivo main.js :

En cada página:

  

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

  

page1.js

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

El ejemplo anterior es solo una de las dos formas de manejarlo. Tenga en cuenta la diferencia entre cargar un archivo JavaScript simple y un módulo .

Una regla de oro que sigo es mantener todos los módulos reutilizables (o Clases si es más fácil conceptualizarlos) dentro de una define con sus propias dependencias, etc. y luego usar require para tomar esos módulos, usar 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 que es un complemento independiente para RequireJS . Utilice esta función en lugar de una función lista en 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 ver otro ejemplo de aplicación de varias páginas en el repository RequireJS

Recientemente realicé el ejercicio de configurar RequrieJS con optimización automática de comstackció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 era Hacer que RequireJS funcionara bien con ASP.NET MVC .

Usando la gran información que ya tengo, puse mi propio ejemplo ASP.NET MVC RequireJS en 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 RequireViewPage personalizada que expone los métodos para pasar los datos de configuración a RequrieJS, así como a las dependencias de requisitos específicos de la página de referencia.

Por lo tanto, su _Layout.cshtml se parecerá mucho a lo que esperaría con:

  ... @RenderModuleConfig()    ... 

Vistas y parciales

Para cablear las vistas (y en mi caso, los modelos de vista de nocaut), se ha agregado un fragmento de script adicional al final de _Layout.cshtml de la siguiente manera

  ... @RenderSection("scripts", required: false)   

Esto asegurará que para cualquier dependencia de vista, el módulo principal se haya cargado (suponiendo que las dependencias para main se hayan definido en main.js y luego permita visualizar las dependencias específicas a través de atributos de datos.

 
...
...
...

Para una explicación completa del diseño y las opciones, vea el archivo README en GitHub