मैं जावास्क्रिप्ट एप्लिकेशन को एकाधिक फ़ाइलों में कैसे विभाजित कर सकता हूं?

Question

मैंने एक फ़ाइल में सभी कोड के साथ एक जावास्क्रिप्ट एप्लिकेशन बनाया है। एप्लिकेशन काफी बढ़ गया है और मुझे लगता है कि इसे कई फाइलों में विभाजित करने का समय है, लेकिन मुझे यह समझने में मुश्किल हो रही है कि यह कैसे करें। मुझे लगता है कि समस्या यह है कि मैं अनुप्रयोग है, जो निम्नलिखित टेम्पलेट का उपयोग करता है का निर्माण करने का फैसला किया है के साथ निहित है:

var myApp = function(){ 

    //there are several global variables that all of the modules use; 
    var global1, global2, module1, module2; 

    global1 = { 
     prop1:1 
    }; 

    //There are also several functions that are shared between modules 
    function globalFunction(){ 

    } 

    var ModuleOne = function(){ 

     function doSomething(){ 
      //using the global function 
      globalFunction(); 
     } 

     return{ 
      doSomething:doSomething 
     } 
    }; 

    var ModuleTwo = function(){ 

     function doSomething(){ 
      //module 2 also needs the global function 
      globalFunction(); 

      //Use the functionality in module 1 
      //I can refactor this part to be loosely coupled/event driven 
      module1.doSomething(); 
     } 
    }; 

    module1 = new ModuleOne(); 
    module2 = new ModuleTwo(); 
}; 

यहां तक ​​कि अगर मॉड्यूल के सभी कर रहे थे शिथिल युग्मित और घटना चालित, मैं अभी भी पता नहीं कैसे मैं करूंगा साझा मॉड्यूल/चर पर प्रत्येक मॉड्यूल के निर्भरता को देखते हुए इसे एकाधिक फ़ाइलों में विभाजित करने के बारे में जाएं। क्या किसी के पास सुझाव हैं?

Answer 1

इस लेख में डिजाइन पैटर्न पर एक नज़र डालें: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth - आप एक तरह से एक से अधिक फ़ाइलों में अपने मॉड्यूल परिभाषा विभाजित कर सकते हैं जो सामान्य गुणों को साझा करने देता है लेकिन आपको वेरिएबल्स या विधियों को भी बनाने देता है जो किसी विशेष फ़ाइल के लिए निजी होते हैं।

मूल विचार है कि व्यक्ति जे एस फ़ाइलें इस तरह कोड के साथ एक ही मॉड्यूल में जोड़ने के लिए है:

var MODULE = (function (my) { 
    var privateToThisFile = "something"; 

    // add capabilities... 

    my.publicProperty = "something"; 

    return my; 
}(MODULE || {})); 

प्रत्येक जे एस फ़ाइल में कहाँ है, तो पहले से ही MODULE (एक और जे एस फ़ाइल से) परिभाषित किया गया है जिसमें आप जोड़ना अन्यथा आप इसे बनाते हैं। आप इसे सेट अप कर सकते हैं ताकि यह (ज्यादातर) कोई फर्क नहीं पड़ता कि विभिन्न फ़ाइलों को किस क्रम में शामिल किया गया है।

आलेख में कई भिन्नताएं हैं, और निश्चित रूप से आप शायद अपने स्वयं के बदलावों के साथ आ जाएंगे ...

Answer 2

एक शॉट की आवश्यकता है। http://requirejs.org/

उदाहरण:

require(["dir/file"], function() { 
    // Called when file.js loads 
}); 

Answer 3

आप MyApp वस्तु पर साझा कार्य करता है और साझा मॉड्यूल रख सकते हैं ताकि वे वैश्विक नामस्थान को दूषित नहीं है, लेकिन एक ही बंद के अंदर किया जा रहा बिना कहीं भी पहुँचा जा सकता है।

myApp.moduleOne = function() {...} 
myApp.moduleTwo = function() {...} 
myApp.globalFunction = function() {...} 

फिर, आप उन्हें किसी भी फ़ाइल में परिभाषित कर सकते हैं और किसी भी फ़ाइल में उनका उपयोग कर सकते हैं।

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

Answer 4

मेरा पसंदीदा समाधान मेरी "मुख्य" फ़ाइल के अंदर अन्य फ़ाइलों को शामिल करने के लिए सर्वर साइड स्क्रिप्टिंग का उपयोग करता है।

var myApp = function(){ 
    [% INCLUDE lib/module1.js %] 
    [% INCLUDE lib/module2.js %] 
    [% INCLUDE lib/module3.js %] 
} 

या पीएचपी: उदाहरण के लिए, पर्ल के टेम्पलेट टूलकिट का उपयोग कर

var myApp = function(){ 
    <?php 
    include 'lib/module1.js'; 
    include 'lib/module2.js'; 
    ?> 
} 

Answer 5

भ्रम में जोड़ने के लिए नहीं, लेकिन सी ++ पृष्ठभूमि से आ रहा है, मैंने नीचे वर्णित तरीके से सी ++ नेमस्पेस जैसी कुछ चीज़ बनाने की कोशिश की है। यह काम करता है, लेकिन मैं जानना चाहता हूं कि यह ओपी के लिए स्वीकार्य पैटर्न है या नहीं?

-------------------------------- फ़ाइल मुख्य।जेएस: ----------------

var namespacename = function(){} 

namespacename.mainvalue = 5; 

namespacename.maintest = function() { 
    var cm = new namespacename.game(); 
    cm.callme(); 
} 

------------------------- ------- फ़ाइल game.js: ----------------

namespacename.gamevalue = 15; 

namespacename.game = function(){ 
    this.callme = function(){ 
     console.log("callme"); 
    } 
} 

namespacename.gametest = function() { 
    console.log("gametest:gamevalue:" + this.gamevalue); 
    console.log("gametest:mainvalue:" + this.mainvalue); 
} 

--------------- ----------------- फ़ाइल index.html: --------------

<html> 
    <head> 
     <title>testbed</title> 
    </head> 

    <body onload="init();"> 
    </body> 

    <script type="text/javascript" src="main.js"></script> 
    <script type="text/javascript" src="game.js"></script> 

    <script type="text/javascript"> 

     init = function() 
     { 
      namespacename.maintest(); 
      namespacename.gametest(); 

      console.log("html main:" + namespacename.mainvalue); 
      console.log("html game:" + namespacename.gamevalue); 
     } 

    </script> 
</html>