जावास्क्रिप्ट मॉड्यूल बनाने के लिए बेहतर तरीका?

Question

क्या मुझे अपने जेएस मॉड्यूल पर थोड़ा सलाह मिल सकती है? मैं जेएस के साथ अच्छा हूं, लेकिन काफी गुरु की स्थिति नहीं :) क्या मैं अपने मॉड्यूल को सही तरीके से दोबारा कर रहा हूं?

मैं इस तरह js मॉड्यूल पद्धति का उपयोग कर रहा है (किसी न किसी उदाहरण के लिए, मैं सिर्फ संरचना के बारे में चिंतित हूँ):

खराब तरीका है?

/* Module Code */ 
var MapModule = (function ($) { 
    var $_address; 
    var $_mapContainer; 

    function loadApi() { 
     // do something. maybe load an API? 
    } 

    function someInternalMethod() { 
     // do other things 
    } 

    var pub = {}; 
    pub.setAddress = function (address) { 
     $_address = address; 
    }; 
    pub.getAddress = function() { 
     return $_address; 
    }; 
    pub.initialize = function() { 
     loadApi(); 
    } 
})(jQuery); 

// usage 
MapModule.initialize(); 

लेकिन यह उपयोग थोड़ा सा मैला लगता है। मुझे रचनाकार पसंद है।

बेहतर तरीका:

मैं इस तरह कुछ मॉड्यूल पुनर्संशोधित?

(function ($) { 
    this.MapModule = function() { 
     var $_address; 
     var $_mapSelector; 
     var $_mapContainer; 
     function loadApi() { 
      // do something. maybe load an API? 
     } 
     function someInternalMethod() { 
      $_mapContainer = $($_mapSelector); 
      // do stuff with the jQ object. 
     } 

     var pub = {}; 
     pub.setAddress = function (address) { 
      $_address = address; 
     }; 
     pub.getAddress = function() { 
      return $_address; 
     }; 
     pub.initialize = function (selector) { 
      $_mapSelector = selector; 
      loadApi(); 
     } 
    } 
})(jQuery); 

var map = new MapModule(); 
map.initialize('#mapcontainer'); 

उपयोग एक बहुत मेरे लिए क्लीनर लगता है यही कारण है, और यह सिर्फ ठीक काम करता है, लेकिन मैं इसके बारे में ठीक से जा रहा हूँ? एक jQ प्लगइन में तब्दील हो कि पर कोई सुझाव दिए गए तो मैं यह var map = $('mapcontainer').mapModule(); की तरह एक हस्ताक्षर के साथ उपयोग कर सकते हैं:

यह एक और कदम

ले रहा है इस मॉड्यूल एक div कि गूगल मैप्स और jQuery कार्यक्षमता लपेटता के साथ कुछ सामान करता कहो

धन्यवाद!

Answer 1

मैंने आपके स्निपेट को संशोधित किया है और वास्तव में जावास्क्रिप्ट खुलासा मॉड्यूल पैटर्न लागू किया है जो सार्वजनिक & को बंद करने का उपयोग करके निजी कार्यों को लागू करने का अवसर प्रदान करता है।

आशा यह सहायक होगा:

/* Module Code */ 
var MapModule = (function (module, $, global) { 
    var $_address; 
    var $_mapContainer; 

    // Public functions 
    function _loadApi() { 
     // Do something, maybe load an API? 
    } 
    function _someInternalMethod() { 
     // Do other things. 
    } 
    function _initialize = function() { 
     _loadApi(); 
    } 

    // Private functions 
    function _setAddress = function (address) { 
     $_address = address; 
    }; 
    function _getAddress = function() { 
     return $_address; 
    }; 

    $.extend(module, { 
     loadApi: _loadApi, 
     someInternalMethod: _someInternalMethod, 
     initialize: _initialize 
    }); 

    return module; 
})(MapModule || {},this.jQuery, this); 

// Usage 
MapModule.initialize(); 

JSFiddle

Answer 2

बस इस में आए और सोचा था कि मैं अपने दृष्टिकोण का हिस्सा हूँ ...

/////////////////////////////// 
// Module Code 
/////////////////////////////// 

var ExampleModule = (function() 
{ 
    //////////////////////////// 
    // Private Properties 
    //////////////////////////// 

    var whatever = { 
     data: 'somedata'; 
    }; 

    //////////////////////////// 
    // Private functions 
    //////////////////////////// 

    function _init() 
    { 
     _loadApi(); 
     _bindToUIEvents(); 
    } 

    function _loadApi() 
    { 
     // load an api 
    } 

    function _bindToUIEvents() 
    { 
     $('#something').on('click', function(){ 

      // Do something cool 

     }); 
    } 

    function _getWhatever() 
    { 
     return whatever; 
    } 

    ////////////////////// 
    // Public API 
    ////////////////////// 

    return{ 

     init: _init(), 

     getWhatever: function() 
     { 
      return _getWhatever(); 
     } 

    }; 

})(); 

// Usage 
ExampleModule.init;