RequireJs - Xác định vs Yêu cầu

Question

Đối với các mô-đun, tôi không trả lại một đối tượng mà tôi đã sử dụng yêu cầu thay vì xác định. Ví dụ nói rằng tôi có jQuery Plugin sau (jquery.my-plugin.js):

require(['jquery'], function($) { 
    $.fn.myPlugin = function(options) { 
     ... 
    }; 
}); 

Bây giờ nếu tôi nói như sau trong mô-đun khác:

require(['jquery', 'jquery.my-plugin'], function($) { 
    $('#element').myPlugin(); 
}); 

tôi đã tìm thấy này doesn' t làm việc vì myPlugin chưa được đăng ký. Tuy nhiên nếu tôi thay đổi yêu cầu để xác định trong mô-đun jquery.my-plugin của tôi thì nó hoạt động tốt.

Tôi đánh giá cao nếu ai đó có thể giải thích lý do tại sao tôi phải làm điều này. Tôi thích hiểu điều gì đó đầy đủ trước khi tôi tiếp tục và sử dụng nó. Cảm ơn

Answer 1

Về cơ bản, khi bạn sử dụng require, bạn đang nói "tôi muốn điều này, nhưng tôi cũng muốn tất cả các phụ thuộc của nó". Vì vậy, trong ví dụ dưới đây, chúng tôi đang yêu cầu A, nhưng yêu cầu sẽ tìm kiếm tất cả các phụ thuộc và đảm bảo chúng được tải trước khi tiếp tục.

require(['a'], function(a) { 
    // b, c, d, e will be loaded 
}); 

// File A 
define(['b','c','d','e'], function() { 
    return this; 
}); 

Nguyên tắc chung của ngón tay cái là bạn sử dụng define khi bạn muốn xác định một mô-đun sẽ được tái sử dụng bởi ứng dụng của bạn và bạn sử dụng require chỉ đơn giản là tải một phụ thuộc.

Answer 2

Dưới đây là đoạn code mà nên bên jquery.my-plugin.js mà định nghĩa một module gọi là 'jquery.my-plugin' có thể được sử dụng như một phụ thuộc ở nơi khác.

define(['jquery'], function($) { //jquery is a dependency to the jquery.my-plugin module 
    $.fn.myPlugin = function(options) { //adds a function to the *global* jQuery object, $ (global since jQuery does not follow AMD) 
     ... 
    }; 
}); 

Dưới đây là một phần của mã nơi bạn muốn đính kèm chức năng plugin của bạn đến đối tượng jQuery toàn cầu và sau đó sử dụng nó ...

require(['jquery.my-plugin'], function() { // jquery.my-plugin is loaded which attaches the plugin to the global JQuery object as shown above, then this function fires 

    //the only reason $ is visible here is because it's global. If it was a module, you would need to include it as a dependency in the above require statement 
    $('#element').myPlugin(); //the $ refers to the global object that has the plugin attached 
});