Cách làm cho một plugin jQuery có thể tải được với requestjs

Tôi đang làm việc với Requijs + jquery và tôi đã tự hỏi liệu có cách nào thông minh để làm cho một plugin jQuery hoạt động tốt với request hay không.

Ví dụ, tôi đang sử dụng jQuery-cookie. Nếu tôi hiểu đúng, tôi có thể tạo một tệp có tên jquery-cookie.js và bên trong làm

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});
requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

Tôi tự hỏi liệu tôi có thể làm những thứ như jQuery làm không, giống như thế này:

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

hoặc nếu đây là cách duy nhất để làm cho các plugin jQuery tương thích với requestj hoặc bất kỳ amd nào

Bạn chỉ cần làm điều đó

define(["jquery"], // Require jquery
       function($){
// Put here the plugin code. 
// No need to return anything as we are augmenting the jQuery object
});

ở cuối jquery-cookie.js, HOẶC

requirejs.config( {
    "shim": {
        "jquery-cookie"  : ["jquery"]
    }
} );

ở bất kỳ đâu trước khi bạn bao gồm jquery-cookie (chẳng hạn như bất kỳ nơi nào mà data-main trỏ đến).

Khối mã cuối cùng bạn đã đăng rất tốt cho những thứ như jQuery được phân phối lại và có thể có hoặc không trong môi trường AMD. Lý tưởng nhất là mọi plugin jQuery đều đã được thiết lập sẵn.

Tôi muốn giữ cho các thư viện được bao gồm càng không bị sửa đổi càng tốt, vì vậy cấu hình shim toàn cục một lần trên mỗi trang có vẻ như là giải pháp sạch nhất đối với tôi . Bằng cách đó, nâng cấp an toàn hơn và CDN trở thành một khả năng.

Có một số lưu ý khi sử dụng cấu hình shim trong RequestJS, được chỉ ra trên http://requirejs.org/docs/api.html#config-shim . Cụ thể, "Không kết hợp tải CDN với cấu hình shim trong một bản dựng" khi bạn đang sử dụng trình tối ưu hóa.

Tôi đang tìm cách sử dụng cùng một mã plugin jQuery trên các trang web có và không có RequiJS. Tôi đã tìm thấy đoạn mã này cho các plugin jQuery tại https://github.com/umdjs/umd/blob/master/jqueryPlugin.js . Bạn bọc plugin của mình trong mã này và nó sẽ hoạt động bình thường theo cả hai cách.

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module depending on jQuery.
    define(['jquery'], factory);
} else {
    // No AMD. Register plugin with global jQuery object.
    factory(jQuery);
}
}(function ($) {

    $.fn.yourjQueryPlugin = function () {
        // Put your plugin code here
    };  

}));

Tín dụng được chuyển đến jrburke; giống như rất nhiều javascript, nó là các hàm bên trong các hàm hoạt động trên các hàm khác. Nhưng tôi nghĩ rằng tôi đã giải nén những gì nó đang làm.

Đối số hàm factorytrong dòng đầu tiên tự nó là một hàm được gọi để xác định plugin trên $đối số. Khi không có trình tải tương thích với AMD, nó được gọi trực tiếp để xác định plugin trên jQueryđối tượng chung. Đó cũng giống như thành ngữ định nghĩa plugin phổ biến:

function($)
{
  $.fn.yourjQueryPlugin = function() {
    // Plugin code here
  };
}(jQuery);

Nếu có một trình tải mô-đun, thì nó factoryđược đăng ký làm lệnh gọi lại để trình tải gọi ra sau khi tải jQuery. Bản sao được tải của jQuery là đối số. Nó tương đương với

define(['jquery'], function($) {
  $.fn.yourjQueryPlugin = function() {
     // Plugin code here
  };
})

Cũng giống như FYI cho tất cả một số plugin jquery đã sử dụng amd / request, vì vậy bạn không cần phải khai báo bất kỳ điều gì trong miếng đệm. Trên thực tế, làm như vậy có thể gây ra vấn đề cho bạn trong một số trường hợp.

Nếu bạn nhìn trong JS cookie jquery, bạn sẽ thấy các cuộc gọi xác định và yêu cầu (["jquery"]).

và trong jquery.js, bạn sẽ thấy lời gọi định nghĩa ("jquery", [], function () ...