Modül kalıplı Javascript projelerimi profesyonel olarak nasıl yapılandırabilirim?

Question

Revealing Module Pattern hakkında okudum ve bunu seviyorum. Fakat 'usta-nesnesinin onlarca alt-nesneye ve belki de yüzlerce fonksiyona sahip olduğu büyük projeler. Tüm bu kodu bir anonim işlev kapanmasına yerleştirmek istemezdim.

Büyük modül desen projeleri nasıl yönetiliyor?

Answer 1

Modüllerinizi farklı dosyalara ayırmak için büyütme kullanabilirsiniz. Bir üretim sürümü için hazır olduğunuzda, bu dosyaları bir veya birkaç dosyaya birleştirebilirsiniz.

File1 modülü M.n

var M = M || {}; 
M.n = M.n || {}; 

(function (self) { 
    self.doSomething = function() { 
     console.log("something"); 
    }; 
})(M.n); 

File2 özgürce bu modüllerin üyelerini kullanabilirsiniz "ana" komut Şimdi modül M.n.p

var M = M || {}; 
M.n = M.n || {}; 
M.n.p = M.n.p || {}; 

(function (self) { 
    self.doSomethingElse = function() { 
     console.log("something else"); 
    }; 
})(M.n.p); 

tanımlar tanımlar.

M.n.doSomething(); 
M.n.p.doSomethingElse(); 

modüllerini tanımlama biraz sıkıcı olabilir, ancak bunu otomatik hale getirmek için bir şeyler kamçılamak gerekir. Geçmişte, bu küçük betiği daha kolay hale getirmek için kullandım, ama kendinizinkini yaratmakta özgürsünüz. Bağımlılık yönetiminde tutarlı dosya isimlendirmesiyle bile pişman olabilirsiniz. nedense farklı bir takma ad altında bir değişken eklemek istiyorsanız

namespace("M.n.p", function (self) { 
    self.doSomethingElse = function() { 
     console.log("something else"); 
    }; 
}); 

, sen ad işlevine geçebilir ve bir şekilde işleve geçirilecek:

var namespace = function(path, context, args) { 
    var finalLink = namespace._generateChain(path, window); 
    context.apply(finalLink, [finalLink].concat(args)); 
}; 

namespace._generateChain = function(path, root) { 
    var segments = path.split('.'), 
     cursor = root, 
     segment; 

    for (var i = 0; i < segments.length; ++i) { 
    segment = segments[i]; 
    cursor = cursor[segment] = cursor[segment] || {}; 
    } 

    return cursor; 
}; 

kullanmak için argüman.

namespace("M.n.p", function (self, $) { 
    self.doSomethingElse = function() { 
     $("p").text("something else"); 
    }; 
}, jQuery); 

Answer 2

Öğeleri düzenlemek için RequireJS kullanın. Paylaşılan mantık için, paylaşılan yöntemler global olarak erişilebilir bir ad alanında depolanmalı veya require() ile erişilmelidir. Uygulama kodu için çok fazla gereksinim() çağrısı yapmaktan hoşlanmıyorum, bu yüzden parçalar içerisine modülleri dahil etmeyi ve içerme tanımlaması yoluyla her birinin belirli bir ad alanına eklemesini sağladım.

//Core.js 
define(function(){ 
    return { 
    ns: 'global namespace' 
    }; 
}); 

//newMethod.js 
define(['core'], function(ns){ 
    ns.newMethod = function(){ console.log('my new method '); } 
}); 

//Application code 
require(['newMethod'], function(namespace) { 
    console.log(namespace.ns); //global namespace 
    namespace.newMethod(); //'my new method' 
});