requireJS ve jQuery

SORU

26 Aralık 2010, Pazar

requireJS ve jQuery

RequireJS kullanmak istiyorum ve jQuery kullanıyorum. En son jQuery sürümü kullanıyorum beri requireJS ve jQuery kombine sürüm kullanmak istemiyorum. Bana requireJS ile çalışmak için en iyi yolu nedir?

CEVAP

29 Aralık 2010, ÇARŞAMBA

Bu da tam benim sorum. Ben de eski bir DV ama aynı zamanda daha fazla "" javascript kütüphaneleri. geleneksel kullanmanız gerekir Bunun için en iyi tekniği nedir? (Eğer bir sakıncası yok ise. daha geniş yapmak için sorunuzu düzenleyin olabilirim.) Buradan şunu öğrendim.

RequireJS yazar James Burke, advantages of the combined RequireJS jQuery file açıkladı. İki şey olsun.

Bir modül, jquery, kullanılabilir ve jQuery nesne. Bu güvenli

// My module depends on jQuery but what if $ was overwritten?
define(["jquery"], function($) {
  // $ is guaranteed to be jQuery now */
})

jQuery zaten require() define() herhangi bir malzeme önce yüklenir. Tüm modülleri jQuery hazır olduğunu garanti etmektedir. Hatta bir WordPress kullanmak temelde kodlu ilk sabit yük için olduğundan require/order.js eklenti gerekmez.

Beni, #2 çok yararlı değildir. En gerçek uygulamalar varbirçok.js dosyalarıgerekirdoğru sırada yük-acı ama gerçek. Ya Underscore.js Birleşik RequireJS Sammy ihtiyacınız en kısa sürede jQuery dosyası yardımcı olmuyor.

Benim çözüm basit RequireJS geleneksel benim komut "düzen" eklentisi kullanarak yük sarma yazmaktır

Örnek

Benim uygulama olduğunu varsayalım bu bileşenler (bağımlılık).

Benim appgreatapp
- greatapp bir özel bağlıdırbir WordPress kullanmak(kullanmalıyım eski sürüm)
- greatapp bağlıdırmy_sammy(Kullanmalıyım SammyJS ayrıca tüm eklentileri). Busırada olmalıdır
  1. my_sammy bağlıdırbir WordPress kullanmak(SammyJS jQuery plugin var)
  2. my_sammy bağlıdırsammy.js
  3. my_sammy bağlıdırsammy.json.js
  4. my_sammy bağlıdırsammy.storage.js
  5. my_sammy bağlıdırsammy.mustache.js

Aklımda, .js ile biten her şeyden önce bir "" senaryoyu. geleneksel .js olmadan her şeyi RequireJS bir eklenti. Anahtar: yüksek seviye malzeme (, my_sammy greatapp) modülleri, ve daha derin bir düzeyde, geri .js geleneksel Dosya düşüyor.

Çizme

Bir booter başlatmak için nasıl RequireJS anlatmaya başlıyor.

<html>
  <head>
    <script data-main="js/boot.js" src="js/require.js"></script>
  </head>
</html>

js/boot.js ben uygulamayı başlatmak için nasıl sadece config koyup.

require( // The "paths" maps module names to actual places to fetch the file.
         // I made modules with simple names (jquery, sammy) that will do the hard work.
         { paths: { jquery: "require_jquery"
                  , sammy : "require_sammy"
                  }
         }

         // Next is the root module to run, which depends on everything else.
       , [ "greatapp" ]

         // Finally, start my app in whatever way it uses.
       , function(greatapp) { greatapp.start(); }
       );

Ana Uygulama

greatapp.js normal görünümlü bir modül var.

define(["jquery", "sammy"], function($, Sammy) {
  // At this point, jQuery and SammyJS are loaded successfully.
  // By depending on "jquery", the "require_jquery.js" file will run; same for sammy.
  // Those require_* files also pass jQuery and Sammy to here, so no more globals!

  var start = function() {
    $(document).ready(function() {
      $("body").html("Hello world!");
    })
  }

  return {"start":start};
}

RequireJS geleneksel dosyalar etrafında sarma modülü

require_jquery.js:

define(["/custom/path/to/my/jquery.js?1.4.2"], function() {
  // Raw jQuery does not return anything, so return it explicitly here.
  return jQuery;
})

require_sammy.js:

// These must be in order, so use the "order!" plugin.
define([ "order!jquery"
       , "order!/path/to/custom/sammy/sammy-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.json-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.storage-0.6.2-min.js"
       , "order!/path/to/custom/sammy/plugins/sammy.mustache-0.6.2-min.js"
       ]

       , function($) {
           // Raw sammy does not return anything, so return it explicitly here.
           return $.sammy;
         }
      );

Bunu Paylaş: