Làm thế nào để tạo một plugin jQuery có thể tải với requirejs

Question

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

Ví dụ: tôi đang sử dụng jQuery-cookie. Nếu tôi hiểu một cách chính xác tôi có thể tạo ra một tập tin gọi là 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 nếu tôi có thể làm những việc như jQuery làm, đó là 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 jQuery plugin tương thích với requirejs hoặc bất kỳ amd

Answer 1

Bạn chỉ cần làm DÙ

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

.210

vào cuối jquery-cookie.js HOẶC

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

bất cứ nơi nào trước khi bạn bao gồm jquery-cookie (như bất cứ nơi nào dữ liệu chính điểm đến, ví dụ).

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

Tôi muốn giữ các thư viện được bao gồm dưới dạng không được giả mạo nhất có thể, do đó, cấu hình shim chung một lần trên mỗi trang có vẻ như 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.

Answer 2

Có một số lưu ý khi sử dụng cấu hình shim trong RequireJS, được chỉ ra trên http://requirejs.org/docs/api.html#config-shim. Cụ thể là, "Không trộn CDN với cấu hình shim trong 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ó cả và không có RequireJS. 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 bạn trong mã này, và nó sẽ hoạt động đúng 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 chuyển đến jrburke; giống như javascript rất nhiều, chức năng của nó bên trong các chức năng hoạt động trên các chức năng khác. Nhưng tôi nghĩ rằng tôi đã giải nén những gì nó đang làm.

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

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

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

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

Answer 3

Cũng giống như một FYI cho tất cả các plugin jquery đã sử dụng amd/require vì vậy bạn không cần khai báo bất cứ điều gì trong shim. Trong 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 vào cookie jquery JS, bạn sẽ thấy xác định cuộc gọi và yêu cầu (["jquery"]).

và trong jquery.js bạn sẽ thấy một cuộc gọi đến define ("jquery", [], function() ...