SORU
3 Kasım 2011, PERŞEMBE


Büyük backbone.js web uygulama organizasyon

Şu anda büyük bir web uygulaması backbone.js üzerine inşa üzerinde çalışıyorum ve kuruluş, "zombi" vb. ile çok fazla sorun yaşıyoruz kod büyük bir yeniden yapmaya karar verdim. Zaten "zombi"; ancak, en başından başla ve güzel bir yapı oluşturmak istiyorum koda organizasyon/. başa çıkmak için yardımcı işlevler bir sürü yazdım Bir nevi sıfırdan başladım çok büyük dersler ölçekli büyük backbone.js organizasyon örnekleri/bulamadım ve eğer başladım nerede bazı fikirler bulmaya çalışacağım.

Belli ki genel bir ad alanı içinde kodumu hazırladım; ama aynı zamanda bu ad oldukça temiz kalmasını istiyorum. Benim ana app.js tutar sınıf dosyaları kendilerini ayrı genel ad; kayıt sınıfı (olması örneği) kullanarak reg() işlevi ve enst() işlevi başlatır sınıfından sınıfları bir dizi. Böylece, 3 yöntemlerin yanında, Uygulamam ad yalnızca Yönlendirici, Modeli ve Görünümü vardır:

var MyApp = (function () {

    var classes = {
        Routers: {},
        Collections: {},
        Models: {},
        Views: {}
    };

    methods = {

        init: function () {
            MyApp.Router = MyApp.inst('Routers', 'App');
            MyApp.Model = MyApp.inst('Models', 'App');
            MyApp.View = MyApp.inst('Views', 'App');
            Backbone.history.start();
        },

        reg: function (type, name, C) {
            classes[type][name] = C;
        },

        inst: function (type, C, attrs) {
            return new classes[type][C](attrs || {});
        }

    };

    return methods;

}());

$(MyApp.init);

İçinde Modelleri, Koleksiyonları, Yönlendiriciler ve Görünümler, iş her zamanki gibi ama sonra gerek kayıt sınıfın sonunda dosya olabilir oluşturulmuş bir sonraki nokta (olmadan yığılan ad):

MyApp.reg('Models', 'App', Model);

Bu kodu düzenlemek için gereksiz bir yol gibi görünüyor mu? Diğerleri gerçekten çok Yönlendirici, Koleksiyonları, Modelleri ve Görünümleri ile büyük projeler organize etmek için daha iyi bir örnek var mı?

CEVAP
3 Kasım 2011, PERŞEMBE


Geçenlerde bir Omurga projesi GapVis (, *code here*13)adı üzerinde çalıştı. "Ama eğer büyük-ish ve nispeten karmaşık, - 24 görüntülemek sınıflar, 5 yönlendiriciler, vb." gerçekten çok büyük bir şey bilmiyorum Tüm yaklaşımlar alakalı olacak bilmiyorum ama bir göz alarak değer olabilir. Uzun girişten sonra benim düşünce bazıları benim yorum main app.js file görebilirsiniz. Birkaç önemli mimari bir seçenek:

  • Tüm mevcut durumuna baktığımız info - geçerli görünümü, vb tutan State tek bir model var. State ve devlet yanıt vermek için gereken her görünüm özniteliklerini ayarlayarak mı uygulama durumu değiştirmek için gereken her olayları görüntülemek için bu model dinler. Bu durumu değiştirmek ve güncelleştirme UI olay events işleyicileri asla yeniden işleme görünümü, bu devlet için render işlevleri yerine bağlama yoluyla yapılır bu görüş için de geçerlidir. Bu desen gerçekten görünümleri birbirinden ayrı tutmaya yardım - manzarası asla başka bir görünümde yöntemi.

  • Benim yönlendiricileri tedavi gibi özel görünümler - cevap UI olayları (yani yazarak bir URL) tarafından güncelleniyor devlet, ve onlar yanıt vermek durumu değişiklikleri ile güncelleme UI (yani değişen URL).

  • Bazı şeyleri söylediğin için benzer. Benim ad init bir işlevi, senin ve sabitler settings bir nesneye benzer. Ama birden fazla dosya içinde başvurmak gerekiyordu çünkü ad model ve view sınıfları çoğu da koydum.

  • Kullandığım bir kayıt sistemi için benim yönlendirici ve kabul için görüşlerimi, güzel bir şekilde tutmak için "master" sınıfları (AppRouter AppView) olması durumundan haberdar olmak her görüntüleyin. AppView iki durumda da, çocuk görünümleri için sabit kodlama dersleri sona erdi çok önemli olduğunu, ortaya çıktı.

Pek bu "şeyler yapmak için bir yol, ama benim için çalıştı." doğru olduğunu söyleyebilirim Çok yardımı oldu, umarım ben de sorun büyük projelerin görünür kaynak örnekler bulmak Omurgasını kullanarak, ve ben uydum bu en çok iş vardı.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CaliforniaMetin

    CaliforniaMe

    3 ŞUBAT 2013
  • Easy Learn Tutorial

    Easy Learn T

    10 Kasım 2012
  • makemebad35

    makemebad35

    17 NİSAN 2006