2012-06-02 13 views
31

RequireJS 2.0.1 ile biraz deneme yapıyorum. Amacım jQuery, Underscore ve Backbone'ı doğru şekilde yüklemektir. Orijinal RequireJS doc'dan, yazar J. Burke'ün (bu yeni sürümde) bir new config option called shim eklediğini keşfettim.RequireJS 2.0.1 ve shim kullanarak jQuery, Underscore ve Omurga yükleme

Sonra aşağı Bunları buraya yazdım:

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing time</title> 
     <script data-main="scripts/main" src="scripts/require.js"></script> 
    </head> 
    <body> 
     <h1>Testing time</h1> 
    </body> 
</html> 

scripts/main.js

requirejs.config({ 
    shim: { 
     'libs/jquery': { 
      exports: '$' 
     }, 
     'libs/underscore': { 
      exports: '_' 
     }, 
     'libs/backbone': { 
      deps: ['libs/underscore', 'libs/jquery'], 
      exports: 'Backbone' 
     } 
    } 
}); 


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'], 

    function (jQueryLocal, underscoreLocal, backboneLocal) { 
     console.log('local', jQueryLocal); 
     console.log('local', underscoreLocal); 
     console.log('local', backboneLocal); 
     console.log('global', $); 
     console.log('global', _); 
     console.log('global', Backbone); 
    } 
); 

Her şey oldukça iyi çalışıyor görünüyor, ama ben bir şey eksik duygu var , JQuery ve Underscore'un AMDed sürümünün olduğunu biliyorum, ancak se tup o kadar basit ki neden onları kullanmalıyım anlamıyorum.

Bu kurulum doğru mu yoksa bir şey mi eksik?

+0

'json2' nasıl? Buna da ihtiyacımız var mı? – Henry

cevap

32

Kütüphane, bir modülü bildirmek için define() numaralı telefonu aramıyorsa, yalnızca "shim" yapılandırmasını kullanmanız gerekir. jQuery bunu zaten yapar, böylece bunu shim yapılandırmasından kaldırabilirsiniz. Yukarıdaki kod, olduğu gibi çalışacaktır, ancak jQuery öğesi, shim işlemi tamamlanmadan önce jQuery define()'u arayacağı için ihmal edilir. Daha az/taşınabilir güvenilirdir

  1. : Bir modülü tanımlamak için komut çağrısı define() sahip vs pul ile

    olumsuzlukları her geliştirici dolgu yapılandırma yapmak ve kütüphane değişiklikleri izlemek gerekiyor. Kütüphane yazarının kitaplık içinde satır içi yapması durumunda, herkes faydaları daha verimli bir şekilde alır. umdjs/umd adresindeki kod şablonları, bu kod değişikliğinde yardımcı olabilir.

  2. Daha az en iyi kod yükleme: shim config, gerçek kitaplığı yüklemeden önce shim deps yükleyerek çalışır. Yani paralelden biraz daha ardışık yükleme. Tüm betiklerin paralel olarak yüklenebilmesi daha hızlıdır, bu da define() kullanıldığında mümkündür. Son dağıtım için bir yapı/optimizasyon yaparsanız ve tüm komut dosyalarını tek bir komut dosyasına birleştirirseniz, bu gerçekten dezavantaj değildir. Ne yapıyorsun

8

doğrudur, ancak bir AMD (Asenkron Modülü Tanımı) modülünü ihraç çünkü jQuery dolgu config olması gerekmez. Underscore ekledikten hemen sonra AMD/Require.js desteğini kaldırdı, bkz .: Why underscore.js removed support for AMD

Bir AMD modülünü dışa aktarmayan kütüphaneleri kullanmak için bir kolaylık olarak tasarlanmıştır. Kullandığınız kitaplık AMD'yi destekliyorsa veya 2 sürümü (AMD'yi destekleyen ve genel değişken olan birini) varsa, AMD sürümünü kullanmalısınız. AMD sürümünü ilk etapta AMD'yi kullanmanız için aynı sebeplerden dolayı kullanmalısınız. Ayrıca kütüphane kaynağında require.js (veya Almond) içerebilir ve projenize gereksiz dosya boyutu ekleyecektir.

0

JQuery, "jquery" adını amd modül tanımında eklediğinden, orijinal örnekte ("jquery" libs/jquery "olarak ayarlanmış) jQuery'den" shimming "(" jQuery ") 'den kaçınabilirsiniz.

define ("jquery", [], function() {return jQuery;});

Deneyimlerim, jquery.js'yi beklendiği gibi tanımlanan jquery amd modülünü veya orijinal örneğinde olduğu gibi "shim" elde etmek için baseurl dizinine koymanız gerektiğidir.

İlgili konular