Requjs ile jQuery eklentisi nasıl yüklenebilir

Requirejs + jquery ile çalışıyorum ve bir jQuery eklentisinin Require ile iyi çalışmasını sağlamanın akıllı bir yolu olup olmadığını merak ediyordum.

Örneğin jQuery-cookie kullanıyorum. Doğru anladıysam jquery-cookie.js adında bir dosya oluşturabilirim ve do

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"]
    }
} );

jQuery'nin yaptığı gibi şeyler yapıp yapamayacağımı merak ettim, bu şöyle:

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

veya jQuery eklentilerini requirejs veya herhangi bir amd ile uyumlu hale getirmenin tek yolu buysa

Sadece EITHER yapmanız gerekir

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

jquery-cookie.js'nin sonunda VEYA

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

jquery-cookie eklemeden önce herhangi bir yere (örneğin, data-main'in işaret ettiği her yerde).

Gönderdiğiniz son kod bloğu, yeniden dağıtılan ve bir AMD ortamında olabilecek veya olmayabilecek jQuery gibi şeyler için iyidir. İdeal olarak, her jQuery eklentisi bunu zaten kurmuş olmalıdır.

Dahil edilen kitaplıkları olabildiğince karıştırılmadan tutmayı tercih ederim, bu nedenle sayfa başına bir kez global shim yapılandırması bana en temiz çözüm gibi görünüyor . Bu şekilde yükseltmeler daha güvenlidir ve CDN'ler bir olasılık haline gelir.

RequireJS'de şim yapılandırmasının kullanılmasıyla ilgili bazı uyarılar vardır, http://requirejs.org/docs/api.html#config-shim'de belirtilmiştir . Yani, optimize ediciyi kullanırken "CDN yüklemesini bir yapıda shim yapılandırması ile karıştırmayın".

Aynı jQuery eklenti kodunu RequireJS içeren ve içermeyen sitelerde kullanmanın bir yolunu arıyordum. JQuery eklentileri için bu pasajı https://github.com/umdjs/umd/blob/master/jqueryPlugin.js adresinde buldum . Eklentinizi bu koda sarın ve her iki şekilde de düzgün çalışacaktır.

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

}));

Kredi jrburke'ye gider; javascript gibi, diğer işlevler üzerinde hareket eden işlevlerin içinde işlev görür. Ama sanırım ne yaptığını çözdüm.

factoryİlk satırdaki fonksiyon argümanı , $argümandaki eklentiyi tanımlamak için çağrılan bir fonksiyondur . AMD uyumlu bir yükleyici olmadığında, eklentiyi global jQuerynesnede tanımlamak için doğrudan çağrılır . Tıpkı yaygın eklenti tanımı deyimi gibi:

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

Bir modül yükleyici varsa factory, yükleyicinin jQuery'yi yükledikten sonra çağırması için geri arama olarak kaydedilir. JQuery'nin yüklenen kopyası bağımsız değişkendir. Eşdeğeri

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

Tıpkı bazı jquery eklentileri için bir FYI'nin zaten amd / require kullanması gibi, shim'de herhangi bir şey bildirmeniz gerekmez. Aslında bunu yapmak bazı durumlarda sizin için sorunlara neden olabilir.

Jquery çerezi JS'ye bakarsanız, aramaları tanımlayın ve gerekli (["jquery"]) göreceksiniz.

ve jquery.js'de bir tanımlama çağrısı göreceksiniz ("jquery", [], function () ...