RequireJS ile tembel yükleme nasıl yapılır?

Question

Backbone, RequireJS ve Handlebars kullanarak bir rakipsiz web uygulaması oluşturuyoruz ve iyiyim, sadece merak ediyorum. Şu anda, bizim modellerin her sorta şuna benzer:

define(['Backbone', 'js/thing/a', 'js/thing/b', 'js/lib/bob'], function(a, b, bob) { 
    return Backbone.Router.extend({ 
    // stuff here 
    }); 
}); 

nerede şey/her ikisi vb Gidon şablonları, örneğin kendi bağımlılıkları var b, şey/Şimdi ne olacak olduğuna benim ana içinde .js, 'en üst düzey' yönlendiricilerin tümü yüklenir ve başlatılır; Her bir üst düzey yönlendiricinin, her birinin kendi bağımlılıklarına (şablonlar, yardımcılar, araçlar, vb.) sahip olduğu bir dizi bağımlılık (model, görünüm vb.) vardır. Temel olarak, büyük bir ağaç yapısı.

Buradaki sorun, tüm ağacın sayfa yüklemesinde çözülüp yüklendiğidir. Sanırım en azından optimizatörden geçecek ve büyük bir tek dosyayla (temelde bir modülerleştirme çerçevesine indirgemek için RequireJS'i azaltacağız). Ancak, 'istek üzerine' görünümler ve şablonlar gibi şeyler yükleyip yükleyemeyeceğinizi merak ediyorum. "Basitleştirilmiş CommonJS sarma" Orada

here açıkladı, bu yüzden denedim:

define(function(require) { 
    Backbone = require('Backbone'); 
    return Backbone.Router.extend({ 
    doStuff: function() { 
     var MyView = require('js/myView'); 
     new MyView().render(); 
    } 
    }); 
}); 

Ancak Chrome'un ağ denetçisi bakarak, öyle görünüyor ki RequireJS - her nasılsa, hatta tetikler rotayı tetiklemeden doStuff işleyici - hala myView bağımlılığını yükler. Sorular:

• Bu gerçekten mümkün mü? RequireJS'de require() numaralı çağrıya gerçekte doStuff rotasını tetiklemeden arama yapan siyah magnet'ler var mı?
• Bu 'talep üzerine', RequireJS modüllerinin ve kaynaklarının tembel yüklenmesi hakkında teorik olarak doğru bir yol mu?
• Bu notu kullanırsanız, r.js optimize edici hala bildirildiği gibi çalışıyor mu?

Answer 1

Bu aslında mümkün mü? RequireJS'de doStuff rotasını gerçekten tetiklemeden aranan() çağrıları arayan siyah magicks var mı?

Eğer require için başvurular ayıklamak için 'şeker' sözdizimi it uses Function.prototype.toString and a regex kullanmak ve sonra işlevini çalıştırmadan önce bağımlılıklar olarak listeler zaman. Temel olarak, ilk argüman olarak bir dizi deps ile tanımlamanın normal tarzı haline gelir.

Bu nedenle, aranacak çağrılarınızın nerede olduğu umrumda değil ve bu nedenle koşullu ifadelerin yok sayılmasının nedeni de budur (aynı zamanda require çağrılarının neden bir değişkeni değil, bir değişkeni kullanması gerektiğini de açıklar).

Bu, 'istek üzerine', RequireJS modüllerinin ve kaynaklarının tembel yüklenmesi hakkında teorik olarak doğru bir yol mu?

Şeker sözdizimini kullanmak, gördüğünüz gibi koşullu yüklemeye izin vermeyecektir. Eğer o zaman bu gösteriden sonra eğer

define(function(require) { 
    var module1 = require('module1'); 

    // This will only load if the condition is true 
    if (true) { 
     require(['module2'], function(module2) { 

     }); 
    } 

    return {}; 
}); 

Sadece olumsuz başka iç içe işlev ama: kafamın üst kapalı aklınıza gelebilecek tek yolu-PS bir dizi ve bir geri arama ile bir require çağrıyı kullanmaktır geçerli bir yoldur.

Bu notu kullanırsanız, r.js optimize edici hala reklamı yapılan şekilde çalışıyor mu?

Eğer 'şeker' sözdizimini kullanıyorsanız, evet, iyimser işe yarayacaktır. Bir örnek:

modülleri/Once şöyle r.js tarafından derlenen

define(function(require) { 
    var $ = require('jquery'); 
    var _ = require('underscore'); 

    return { 
     bla: true 
    } 
}); 

test.js: Eğer şartlı şeyler yükleyebilirsiniz Sonuç olarak

define('modules/test', ['require', 'jquery', 'underscore'], function(require) { 
    var $ = require('jquery'); 
    var _ = require('underscore'); 

    return { 
     bla: true 
    } 
}); 

ancak belirtildiği gibi Eğer projeyi r.js ile optimize etmeyi planlıyorsanız, o zaman şeker sözdizimini kullanmakta büyük bir yük yoktur.

Answer 2

Ayrıca require-lazy'u da incelemek isteyebilirsiniz.

Bir çalışma zamanı bileşeni ve bir oluşturma zamanı bileşeni vardır. Gerçek modül get() ile yüklenecek ve kullanılabilir yapılacaktır, mymodule bir promise olduğunu önceki çerçevede

define(["lazy!mymodule"], function(mymodule) { 
    ... 
}); 

: çalışma zamanı bileşeni tembel olarak bir modül (lazy! eklentisi dikkat edin) istemesine olanak tanır then() geri arama:

mymodule.get().then(function(m) { 
    // here m is the real mymodule 
}); 

gerektir-tembel r.js entegrasyonu sayesinde otomatik JavaScript dosyalarının "paketleri" oluşturun. Ayrıca paketler için otomatik olarak önbellek bozmayı da işler. Bir fikir edinmek için birkaç örnek var. Ayrıca Grunt ve Bower entegrasyonu da vardır.