prosty przykład użycia require.js

Question

Próbuję się nauczyć, jak korzystać z require.js. Zrobiłem więc stronę HTML z następującymi znacznikami w ciele.

<script type="text/javascript" data-main="../js/shirt" src="../js/require.js"></script> 
<script type="text/javascript"> 
    alert("Shirt color is " + shirt.color); 
</script> 

W ../js/shirt.js ma następujący kod

define({ 
    color: "black", 
    size : "large" 
}); 

Jak można w ten prosty par wartości w moim html?

Answer 1

zawartość głównego pliku should be a require call. na przykład, masz moduł values.js zawierającą:

define({ 
    color: "black", 
    size : "large" 
}); 

w głównym pliku (shirt.js), załaduj values.js jako zależność (zakładając, że są w tym samym katalogu):

require(['values'],function(values){ 
    //values.color 
    //values.size 
}); 

Answer 2

Oprócz odpowiedzi Josepha, można również napisać inne moduły, które zależą od shirt (w tym miejscu pojawia się prawdziwa moc RequireJS).

// shirt.js 
define({ 
    color: "black", 
    size : "large" 
}); 

// logger.js 
define(function (require) { 
    var shirt = require("./shirt"); 

    return { 
     logTheShirt: function() { 
      console.log("color: " + shirt.color + ", size: " + shirt.size); 
     } 
    }; 
}); 

// main.js 
define(function (require) { 
    var shirt = require("./shirt"); 
    var logger = require("./logger"); 

    alert("Shirt color is: " + shirt.color); 
    logger.logTheShirt(); 
}); 

Wtedy twój HTML może być tylko

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

Answer 3

Oprócz odpowiedzi Domenic jest może wolisz ten sposób korzystania z funkcji bez użycia wymagają zdefiniowania funkcji wewnątrz modułów.

// shirt.js 
define({ 
    color: "black", 
    size : "large" 
}); 

// logger.js 
define(["shirt"], function (shirt) { 
    return { 
     logTheShirt: function() { 
      console.log("color: " + shirt.color + ", size: " + shirt.size); 
     } 
    }; 
}); 

// main.js 
define(["shirt", "logger"],function (shirt, logger) {  
    alert("Shirt color is: " + shirt.color); 
    logger.logTheShirt(); 
}); 

Wolę w ten sposób, ale myślę, że to tylko kwestia gustu. (Zakładam, że wszystkie skrypty znajdują się w tym samym folderze).