Nasıl tüm web sitesi üzerinde büyük JS/jQuery olarak kullanılabilecek kod temeli düzenler misin? Orada çok iyi kaynakları nasıl organize adet kodunuzu, ama gerçekten bir şey hakkında nasıl Çek hep birlikte ve uyum her parça yerleştirin: yan geniş kod örgüt, birden fazla sayfa kullanarak aynı kod, KURU kalmak ile gevşek bağlantı, vb.

Nasıl başa çıkıyorum altındadır. Hiç yakışmıyor bence çünkü rahat böyle kodumu düzenlemek oldum ve ölçekleme sorunları/idame yol açabilir, ama çok iyi bilmiyorum.

Biliyorum, herkes kendi kümesinin şartları ve yok anahtar teslim çözümler, ama seve seve dinlerim bazı görüşlerin ne kadar yanlış yaptığımı, NEDEN yaptığımı yanlış ve öneriler üzerine yazmayı daha sürdürülebilir kod.

Ne ben gerçekten anlamaya çalışıyorum

1. Nasıl bu sorunun üstesinden musunuz birden fazla yerde kullanmak lazım birden fazla sayfa?

2. Nasıl sayfa özel organize ediyorsun kodu? Her sayfa namespacing. genel nesne iyi bir fikir mi?1.

3. Sana baştan ne yapmalıyım sürekli olmadığın olun yeniden yazma kuruluşunuz sizin app gibi desenler büyüdükçe ve daha büyük? Muhtemelen benim 4 kullanıyorum yineleme bunu yazarken.2.

Her sayfa ana application.js dosya alır. Her ek sayfa daha var application.pagename.js dosya. Sunucu tarafı mantığı dosyaları (ilk görmek için kontrol eklemek için kullanın eğer bir tane bile sayfası var - bazı sayfaları gerek JS) yok, ve daha sonra bunları sırayla ınit.

Benim ana sayfa gibi görünüyor:

<script src="js/application.js"></script>
<script src="js/application.index.js"></script>
<script>
    MyApp.init();
    MyApp.index.init();
</script>

URL benim Kongre /sayfa/alt sayfa/ıd/. Yaklaşık 10 sayfa ve alt sayfalar her sayfaya kendi mantık gerektiren bütün bir yığın var. bu yazı son örneğe bakın.

Benim kod çoğu zaten ya jQuery UI widget veya jQuery plugins içine tasarlanmıştı, bu dosyalardaki kod u'i ihtiyaç olduğunu söyleyebilirim()'ing ve initing widget.

RequireJS gerekli Aletler çekmek için kullanıyorum.

// application.js
var MyApp = {
    init: function(){
        var self = this;

        // these widgets are available on every single page
        // notice the call to jquery.deparam.js - i'll use this later to init subpage logic.
        require(['js/widget1.js', 'js/widget2.js', 'js/widget3.js', 'js/jquery.deparam.js'], function(){

            // deparam the query string.  I'll use this later.
            self.querystring = $.deparam.querystring();

            // init widgets once the document is ready
            $(function(){
                $("#widget1").widget1();
                $("#widget2").widget2();

                // make these bindings available immediately as well.
                self.rebindable();
            });
        });
    },

    // I use jQuery UI Dialog extensively as a window manager, and each dialog is loaded
    // via an AJAX request.  I'll call this method after each AJAX request to
    // rebind some key widgets.
    rebindable: function(){
        $("#widget3").widget3();
    }
};

// application.index.js
// home page specific stuff.  this file is only included on the home page.
MyApp.index = {

    // my convention is that init is automatically called after the script
    // is included in a page, outside of a doc.ready statement.
    init: function(){
        var self = this;

        require(['js/widget4.js'], function(){
            $(function(){
                self.widget4( $("#foo") );
            });
        });
    },

    // passing elements to each method allows me to call this init code
    // outside of the index page.  I can require() this file, and only init
    // widget4, and even use a different element.
    widget4: function( element ){
        var config = {
            something: "custom to the home page"
        };

        element.widget4( config );
    }
};


// application.foo.js
// page "foo" stuff
MyApp.foo = {

    init: function(){
        var self = this;

        // this page happens to use the same widget3 and configuration present 
        // in MyApp.index.  this is where things can get sloppy and unmaintainable
        // really quickly.
        require(['js/application.index.js'], function(){
            $(function(){
                MyApp.index.widget3( $("#bar") );
            });
        });

        // page "foo" has three subpages (or actions) and require
        // their own logic.  url convention:  /foo/subpage1/
        // init whichever page we're on...
        switch( self.querystring.subpage ){
            case "subpage1":
                self.subpage1.init();
                break;
            case "subpage2":
                self.subpage2.init();
                break;
            case "subpage3":
                self.subpage3.init();
                break;
        }
    },

    subpage1: function(){
        init: function(){
            var self = this;

            // once the DOM is ready init dialog.
            $(function(){
                self.dialog( $("#openDialog") );
            });
        },

        dialog: function( element ){
            element.bind("click", function(){
                $('<div></div>').dialog({
                    open: function(){

                        // see what i'm doing here?
                        MyApp.rebindable();

                        // maybe more bindings specific to this
                        // dialog here
                    }
                });
            });
        }
    },

    subpage2: function(){
        init: function(){
        }
    },

    subpage3: function(){
        init: function(){
        }
    }
};

Bana belirli sorulara cevap yardımcı olmak için, lütfen bana JavaScriptMVCyaklaşık bir küçük's özellikleri: konuşma izin

Denetleyicisibir WordPress kullanmak araçlarınızı, Kur / enkaz bakımı geliştirmek, esneklik.

Görünümekler istemci tarafında şablonlar app içine inşa edilebilir.

Modelbildiri hizmeti / katman eğer sunucunuz değişirse ve JS değişiklikleri en aza yerelleştirme veri.

Stealbağımlılık yönetimi, sıkıştırma ve kod temizleme yapar. Hatta tüm sayfalarda tüm kodları alın, paylaşılan bağımlılıkları anlamaya ve optimal bir yük içine komut dosyaları birleştirmek olacaktır.

FuncUnituygulamalarınızı test mümkün olduğunca kolay hale getirir.

DocumentJS... belgeler kodunuzu

.

Şimdi özel bir soru:

Nasıl mantık birden fazla yerde kullanılan ile başa çıkmak için?

StealJS bağımlılık yönetimi sistemi benim sayfasına ihtiyacım var işlevsellik yüklemek için kullanıyorum. Bağımlılık yönetimi belirli bir boyuttaki uygulamalar kesinlikle gerekli. RequireJS eğer kolayca inşa etmek mümkün değildir, Eğer iyi bir seçimdir.

Belirli bir kod sayfası nasıl organize ediyorsun

Sayfa belirli bir kod mümkün olduğunca küçük olmalıdır. Genellikle yükleme bağımlılıkları ve bir içerir"". MainController Ana kumanda itaat işlev / bu sayfanın iş gereksinimleri için sayfa yapılandırır. Genellikle bir şey gibi namespaced:

App.Controllers.Main

nasıl aynı desenleri yazmayı bırak

İyi, istikrarlı desenleri olan bir çerçeve kullanarak, kalkınma için öneririm. Ayrıca, modülleri mümkün olduğunca / plugins / Widget olarak küçük (ve test edilebilir). Bu parçalar çok daha az değiştirmek için muhtemelen yapacak.

...Sonunda.

Arasındaki en büyük mücadele, gerginlik gibi görünüyor:

• paylaşılan işlevsellik
• birden fazla sayfa
• zamanında yükleme süreleri

Çok sağlam bağımlılık yönetim aracı seçmek olduğunu süper kritik. StealJS çok uygun yükleme süreleri elde yardımcı olabilir, ancak sayfaların büyük numaranızı nedeniyle JavaScriptMVC standart klasörü örgütten kaçmış olurdu.

RequireJS daha esnektir, ama bir sürü dosya yüklemek zorunda kalacaksın. Sadece bu yavaş olacak, bu çok organize olmayan büyük JS dosyaları çok oluşturmak kazanmaya başlamak için gidiyor.

Yükleme süreleri ile mutlu sana ait değil dosyalarına kod sıkmak için neden vermiyorlar gibi hissediyorum, geçerli çözüm işe yarayacak gibi görünüyor.

Sürdürülebilir kalkınma sırrı ne kadar kolay sistem/çerçeve kaygıları izole etmek için izin verir bence. Önemli küçük parçalar Olası halinde app ayrılmak. Ayrıca, bu parçaların test edilmesi gerekir. İnsanlar sayfaları işlevlerini düşünerek yan izlenir. Ama gerçekten gelişim ölçeği için gerçekten küçük parçalar halinde app bölün, bu parçaları kolayca yükleyin, ve her nasılsa hala üretimde hızlı çalıştırmak için uygulama sağlayan bir şey lazım.