Cómo estructurar varias páginas con RequireJS

¿Cómo estructurar varias páginas con RequireJS? Es, al igual que la muestra siguiente, que declarar cada clase en app.js es lo correcto. ¿Tiene cada archivo html para declarar el <script data-main="src/main" src="src/require.js"></script>?Cómo estructurar varias páginas con RequireJS

Lo que quiero evitar es cargar todo el script cuando un usuario llega a la primera página de un sitio.

main.js que definen todas las dependencias externas:

require(
    { 
     baseUrl:'/src' 
    }, 
    [ 
     "require", 
     "order!http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", 
     "order!http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js", 
     "order!http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js", 
     "order!http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js" 
    ], 
    function (require) { 
     require(["app"], function (app) { 
      app.start(); 
     }); 
    } 
);

app.js archivo de definición de cada componente:

define([ "product/ProductSearchView", 
     "product/ProductCollection" 
     ], function (ProductSearchView, 
         ProductCollection) { 
     return { 
      start: function() { 
        var products = new ProductCollection(); 
        var searchView = new ProductSearchView({ collection: products }); 
        products.fetch(); 
        return {}; 
      } 
     } 
});

Fuente

2011-05-31 yves amsellem

Puede requerir archivos dentro de su módulo existente. Así que decir cuando alguien hace clic en un enlace que podría desencadenar una función que hace lo siguiente:

// If you have a require in your other module 
// The other module will execute its own logic 
require(["module/one"], function(One) { 
    $("a").click(function() { 
     require(["new/module"]); 
    }); 
}); 

// If you have a define in your other module 
// You will need to add the variable to the require 
// so you can access its methods and properties 
require(["module/one"], function(One) { 
    $("a").click(function() { 
     require(["new/module"], function(NewModule) { 
      NewModule.doSomething(); 
     }); 
    }); 
});

Fuente

2011-06-08 16:42:01 dbme

¿Se debe nombrar el 'nuevo/módulo'? Si no es así, ¿cómo usar, digamos, su método 'clean()'? –

Ah, ¿y 'require' tiene que estar en otro' require' o puede aparecer en un bloque 'define'? –

Puedes ponerle un nombre si quieres, en ese caso querrás crear una definición en el nuevo/módulo. Actualmente lo estoy usando sin el nombre porque solo ejecutará su propia lógica. – dbme

Este es un ejemplo completo de cómo funciona todo esto; require.js y order.js están en el mismo directorio que los archivos JS de la aplicación.

<html> 
    <head> 
    <script data-main="js/test" src="js/require.js"></script> 
    </head> 
    <body> 
    <button>Clickme</button> 
    </body> 
</html>

Test.js (en la carpeta js)

require(
    { 
    baseUrl:'/js' 
    }, 
    [ 
    "order!//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", 
    "order!//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" 
    ], 
    function() { 
    require(["app"], function (app) { 
     app.start(); 
    }); 
    } 
);

app.js (en la carpeta js) con una carga bajo demanda de Employee.js:

define([], function() { 
    return { 
    start: function() { 
     $('button').button(); 
     $('button').click(function() { 
     require(['Employee'], function(Employee) { 
      var john = new Employee('John', 'Smith'); 
      console.log(john); 
      john.wep(); 
     }); 
     }); 

     return {}; 
    } 
    } 
});

empleados. js (en la carpeta js):

define('Employee', function() { 
    return function Employee(first, last) { 
    this.first = first; 
    this.last = last; 
    this.wep = function() { 
     console.log('wee'); 
    } 
    }; 
});

Fuente

2011-06-15 15:55:47

Cómo estructurar varias páginas con RequireJS

Respuesta

Cuestiones relacionadas