ví dụ đơn giản để sử dụng require.js

Question

Tôi đang cố gắng tìm hiểu cách sử dụng require.js. Vì vậy, tôi đã tạo một trang HTML với các thẻ sau trong phần thân.

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

Các ../js/shirt.js có đoạn mã sau

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

Làm thế nào tôi có thể sử dụng các cặp giá trị đơn giản trong html của tôi?

Answer 1

nội dung của tệp chính should be a require call. Ví dụ, bạn có một mô-đun values.js chứa:

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

trong tập tin chính của bạn (shirt.js), tải values.js như một sự phụ thuộc (giả sử họ đang ở trong cùng một thư mục):

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

Answer 2

Ngoài câu trả lời của Joseph, bạn cũng có thể viết các mô-đun khác phụ thuộc vào shirt (đó là nơi mà sức mạnh thực sự của RequireJS đến).

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

Rồi HTML của bạn chỉ có thể

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

Answer 3

Ngoài câu trả lời Domenic của thể bạn thích cách này bằng cách sử dụng chức năng xác định mà không sử dụng yêu cầu chức năng bên trong mô-đun.

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

Tôi thích cách này, nhưng đó chỉ là vấn đề về hương vị mà tôi đoán. (Tôi giả định rằng tất cả các tập lệnh đều nằm trong cùng một thư mục.)