मैं पेशेवर रूप से अपने मॉड्यूल-पैटर्न जावास्क्रिप्ट परियोजनाओं को कैसे बना सकता हूं?

Question

मैंने Revealing Module Pattern के बारे में पढ़ा है और मुझे यह पसंद है। लेकिन बड़ी परियोजनाओं के बारे में क्या है जहां 'मास्टर-ऑब्जेक्ट' में उप-ऑब्जेक्ट्स और शायद सैकड़ों फ़ंक्शन हैं। मैं उस कोड को एक अज्ञात फ़ंक्शन क्लोजर में रखने के लिए नहीं बनना चाहता हूं।

तो बड़े मॉड्यूल पैटर्न परियोजनाओं को कैसे प्रबंधित किया जाता है?

Answer 1

आप विभिन्न मॉड्यूल में अपने मॉड्यूल को अलग करने के लिए वृद्धि का उपयोग कर सकते हैं। एक बार जब आप उत्पादन रिलीज के लिए तैयार हो जाते हैं, तो आप उन फ़ाइलों को एक या कई फाइलों में जोड़ सकते हैं।

File1 मॉड्यूल M.n

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

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

File2 अपने "मुख्य" लिपि में परिभाषित करता है मॉड्यूल 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); 

अब आप स्वतंत्र रूप से इन मॉड्यूल के सदस्यों का उपयोग कर सकते परिभाषित करता है।

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

मॉड्यूल को परिभाषित करना एक छोटे से थकाऊ हो सकता है, लेकिन आप इसे स्वचालित करने के लिए कुछ कोड़ा में सक्षम होना चाहिए। अतीत में, मैंने इसे आसान बनाने में मदद के लिए इस छोटी सी लिपि का उपयोग किया है, लेकिन खुद को बनाने के लिए स्वतंत्र महसूस करें। आप निरंतर फ़ाइल नामकरण के साथ निर्भरता प्रबंधन में भी सेंकने में सक्षम हो सकते हैं।

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; 
}; 

का उपयोग करें:

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

किसी कारण से आप एक अलग उर्फ ​​तहत एक चर शामिल करना चाहते हैं, तो आप यह नाम स्थान कार्य करने के लिए पारित कर सकते हैं और यह एक के रूप में कार्य करने के लिए पारित हो जाएगा तर्क।

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

Answer 2

चीजों को व्यवस्थित करने के लिए RequireJS का उपयोग करें। साझा तर्क के लिए, साझा विधियों को विश्व स्तर पर सुलभ नेमस्पेस पर संग्रहीत किया जाना चाहिए, या आवश्यकता के माध्यम से एक्सेस किया जाना चाहिए()। मुझे एप्लिकेशन कोड के लिए कई आवश्यकताएं() कॉल करने की इच्छा नहीं थी, इसलिए मैं भाग में मॉड्यूल शामिल करता हूं और प्रत्येक को समावेशन परिभाषित करके किसी विशेष नेमस्पेस से संलग्न करता है।

//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' 
});