JavaScript modülü modeli ve örnek [kapalı]

İki (veya daha fazla) farklı modülün birlikte çalışmak için nasıl bağlandığını gösteren erişilebilir örnekler bulamıyorum.

Bu yüzden, modüllerin birlikte nasıl çalıştığını açıklayan bir örnek yazmak için zamana sahip olup olmadığını sormak istiyorum.

Modüler tasarım modeline yaklaşmak için önce bu konsepti anlamanız gerekir:

Hemen Başlatılan İşlev İfadesi (IIFE):

(function() {
      // Your code goes here 
}());

İşlevleri kullanmanın iki yolu vardır. 1. İşlev bildirimi 2. İşlev ifadesi.

Burada fonksiyon ifadesi kullanılıyor.

İsim alanı nedir? Şimdi yukarıdaki kod parçasına ad alanını eklersek

var anoyn = (function() {
}());

JS'de kapatma nedir?

Bu, herhangi bir fonksiyonu herhangi bir değişken kapsamla / başka bir fonksiyonun içinde (JS'de başka bir fonksiyonun içinde bir fonksiyon ilan edebiliriz!) İlan edersek, o zaman o fonksiyon kapsamını her zaman sayacaktır. Bu, dış işlevdeki herhangi bir değişkenin her zaman okunacağı anlamına gelir. Aynı ada sahip genel değişkeni (varsa) okumaz. Bu aynı zamanda isimlendirme çatışmasından kaçınarak modüler tasarım deseni kullanma hedeflerinden biridir.

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

Şimdi ilk modüler tasarım modelimizi tanımlamak için yukarıda bahsettiğim bu üç kavramı uygulayacağız:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

Yukarıdaki kod için jsfiddle.

Amaç değişken erişilebilirliği dış dünyadan gizlemek.

Bu yardımcı olur umarım. İyi şanslar.

Bu konuya giren herkese Addy Osmani'nin ücretsiz kitabını okumasını tavsiye ederim:

Msgstr "JavaScript Tasarım Kalıplarını Öğrenme".

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Bu kitap, daha sürdürülebilir bir JavaScript yazmaya başladığımda bana çok yardımcı oldu ve hala referans olarak kullanıyorum. Farklı modül modeli uygulamalarına bir göz atın, onları gerçekten iyi açıklıyor.

Modülleri bir uygulamaya nasıl sığdıracağınızdan bahsederek yukarıdaki cevabı genişleteceğimi düşündüm. Doug crockford kitapta bunu okurdum ama javascript için yeni olmak hala biraz gizemli oldu.

Ben ac # arka plan geliyor o yüzden yararlı buluyorum bazı terminoloji ekledik.

Html

Bazı üst düzey html dosyanız olacak. Bunu proje dosyanız olarak düşünmenize yardımcı olur. Projeye eklediğiniz her javascript dosyası buna girmek istiyor, maalesef bunun için araç desteği almıyorsunuz (IDEA kullanıyorum).

Bu gibi komut dosyası etiketleri ile projeye dosya eklemeniz gerekir:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

Etiketleri daraltmak işlerin başarısız olmasına neden olur - xml gibi görünüyorken gerçekten daha çılgın kurallara sahip bir şey!

Ad alanı dosyası

MasterFile.js

myAppNamespace = {};

bu kadar. Bu, yalnızca kodumuzun geri kalanının yaşaması için tek bir global değişken eklemek içindir. Burada (veya kendi dosyalarında) iç içe geçmiş ad alanları da bildirebilirsiniz.

Modül (lar)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

Burada yaptığımız şey, uygulamamızdaki bir değişkene bir mesaj sayacı işlevi atamaktır. Biz bir işlev geri döndüren bir fonksiyon hemen yürütmek .

Kavramlar

SomeComponent üst satırında bir şey bildirdiğiniz ad alanı olarak düşünmek için yardımcı olduğunu düşünüyorum. Bunun tek uyarısı, tüm ad alanlarınızın önce başka bir dosyada görünmesi gerektiğidir - bunlar sadece uygulama değişkenimiz tarafından köklenen nesnelerdir.

Ben şu anda bu sadece küçük adımlar attım (i test edebilirsiniz böylece bir extjs app bazı normal javascript yeniden düzenleme) ama 'bu quagmire kaçınarak küçük fonksiyonel birimleri tanımlamak gibi oldukça güzel görünüyor ' .

Bu stili ayrıca, işlevleri toplayan bir nesneyi döndüren ve hemen çağırmayarak bir işlev döndürerek yapıcıları tanımlamak için de kullanabilirsiniz.

Burada https://toddmotto.com/mastering-the-module-pattern şablonu ayrıntılı bir şekilde açıklanmıştır. Modüler JavaScript ile ilgili ikinci şeyin, kodunuzu birden fazla dosyada nasıl yapılandıracağını ekleyeceğim. Birçok kişi burada AMD ile gitmenizi tavsiye edebilir, ancak deneyimlerden, çok sayıda HTTP isteği nedeniyle yavaş sayfa yanıtıyla bir noktada sonuçlanacağınızı söyleyebilirim. Çıkış yolu, JavaScript modüllerinizin (dosya başına bir tane) CommonJS standardını izleyerek tek bir dosyada önceden derlenmesidir. Buradaki örneklere bir göz atın http://dsheiko.github.io/cjsc/

Modül Kalıbı JavaScriptini burada bulabilirsiniz http://www.sga.su/module-pattern-javascript/