2011-05-31 18 views
6

¿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 {}; 
      } 
     } 
}); 

Respuesta

9

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(); 
     }); 
    }); 
}); 
+0

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

+0

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

+0

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

3

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'); 
    } 
    }; 
}); 
Cuestiones relacionadas