जावास्क्रिप्ट कई उदाहरण

Question

मैं एक Windows Explorer शैली ब्राउज़र में कुछ नेस्टेड <ul> ब्लॉक चालू करने के लिए एक छोटे से Javscript विजेट का विकास किया है के साथ शाब्दिक पैटर्न आपत्ति है। मैं हाल ही में वस्तु शाब्दिक पैटर्न के बारे में सीखा है और इसे जाने देने का फैसला किया, तो मेरे कोड के संगठन कुछ इस तरह है:

$j(function() { 
    myExplorer.init(); 
} 

:

var myExplorer = { 
    init : function(settings) { 
     myExplorer.config = { 
      $wrapper : $('#explorerCategories'), 
      $contentHolder : $j('#categoryContent'), 
      loadingImg : '<img src="../images/standard/misc/ajax_loader.gif" alt="loading" class="loading" />' 
     } 
     // provide for custom configuration via init() 
     if (settings && typeof(settings) == 'object') { 
      $.extend(myExplorer.config, settings); 
     } 

     // some more code... 
    }, 

    createExpanderLink : function() { 
     // more code 
    }, 

    anotherMethod : function() { 
     // etc 
    } 
} 

तब मेरे पेज में मैं मेरे एक्सप्लोरर के साथ सेट

यह सभी तरह से ठीक काम करता है। समस्या तब होती है जब मैं एक ही पृष्ठ पर इन एक्सप्लोरर शैली विजेटों में से एक को और अधिक रखना चाहता हूं। मैं अलग सेटिंग्स में गुजर की कोशिश की:

$j(function() { 
    // first instance 
    myExplorer.init(); 

    //second instance 
    var settings = { 
     $wrapper : $('#explorerCategories2'), 
     $contentHolder : $j('#categoryContent2') 
    } 
    myExplorer.init(settings); 

} 

लेकिन इस बस पहले उदाहरण जो प्रभावी रूप से यह टूट जाता है के लिए config vales अधिलेखित कर देता है। मुझे एहसास हो रहा है कि ऑब्जेक्ट शाब्दिक पैटर्न यहां जाने का तरीका नहीं है लेकिन मुझे यकीन नहीं है कि क्या है। क्या कोई भी पॉइंटर्स पेश कर सकता है?

Answer 1

ताकि आप new कीवर्ड का उपयोग विजेट के एक से अधिक ऑब्जेक्ट का दृष्टांत कर सकते हैं, बजाय एक वस्तु शाब्दिक पर एक समारोह का उपयोग करें।

function myExplorer(settings) { 
    // init code here, this refers to the current object 
    // we're not using a global object like myWindow anymore 
    this.config = { 
     $wrapper : $('#explorerCategories'), 
     $contentHolder : $j('#categoryContent'), 
     .. 
    }; 

    // provide for custom configuration 
    if (settings && typeof(settings) == 'object') { 
     $.extend(this.config, settings); 
    } 

    this.someFunction = function() { 
     .. 
    }; 

    this.otherFunction = function() { 

    }; 
} 

Instantate के रूप में प्रयोग की जरूरत इस विजेट के कई वस्तुओं के रूप में,

var foo = new myExplorer({ .. }); 
var bar = new myExplorer({ .. }); 
... 

Answer 2

जब आप $.extend() इस तरह कहते हैं, यह पहली बार में दूसरे ऑब्जेक्ट के गुणों विलीन हो जाती है:

$.extend(myExplorer.config, settings); 

इसके बजाय, एक नई वस्तु मर्ज पहली वस्तु छोड़ने का परिणाम है कि बनाने (चूक) अछूता, इस तरह:

this.settings = $.extend({}, myExplorer.config, settings); 

क्या यह अभी भी पहले में पारित कर दिया वस्तुओं मर्ज है करता है, लेकिन पहली बार एक नई वस्तु ({}) है, इसलिए हम प्रभावित नहीं कर रहे हैं या तो दूसरों की, तो बस this.settings का उपयोग (या एक अलग नाम यह बिल्कुल स्पष्ट कर देना) अपने ऑब्जेक्ट के अंदर।

Answer 3

इस बारे में

क्या?

 
var myExplorer = function(settings) { 

    var o = { 
    init: function() { 
     this.somevalue = settings; 
    }, 

    whatever: function() { 
    } 
    }; 

    o.init(); 

    return o; 
}; 

var exp1 = myExplorer('something'); 
var exp2 = myExplorer('anything'); 

console.log(exp1.somevalue); //something 
console.log(exp2.somevalue); //anything 

Answer 4

इस लक्ष्य को हासिल करने के लिए (ताकि 'आंतरिक' समारोह दृश्य 'बाहर' हो जाएगा) निम्नलिखित कोड का उपयोग, 'सार्वजनिक API' के बारे में याद:

var myExplorer = function() { 
    var init = function(settings) { 
     var config = { 
      $wrapper : $('#explorerCategories'), 
      $contentHolder : $j('#categoryContent'), 
      loadingImg : '<img src="../images/standard/misc/ajax_loader.gif" alt="loading" class="loading" />' 
     } 
     // provide for custom configuration via init() 
     if (settings && typeof(settings) == 'object') { 
      $.extend(config, settings); 
     } 

     // some more code... 
    }, 

    var createExpanderLink = function() { 
     // more code 
    }, 

    var anotherMethod = function() { 
     // etc 
    } 

    // Public API 
    // return the functions you want to use outside of the current instance 
    return { 
     init : init, 
     createExpanderLink : createExpanderLink, 
     anotherMethod : anotherMethod 
    } 
} 
var firstExplorer = new myExplorer(); 
var secondExplorer = new myExplorer(); 
// etc 

Answer 5

मेरी समझ से आप कर रहे हैं ऑब्जेक्ट का एक नया उदाहरण बनाने की कोशिश कर रहा है जिसे ऑब्जेक्ट शाब्दिक नोटेशन का उपयोग करके परिभाषित किया गया था। ऑब्जेक्ट अक्षर को ऑब्जेक्ट.क्रेट विधि का उपयोग करके तत्काल किया जा सकता है। यहाँ कोड बताते हैं कि वस्तु शाब्दिक अंकन से एक वस्तु का दृष्टांत के लिए कैसे है।

  var objLiteral = { 
       name:"kanthan", 
       address:'', 
       deliver:function(){ 
        if(this.address){ 
         console.log("Your product has been successfully delivered at "+this.address); 
        } 
        else{ 
         console.log("please enter the address to deliver"); 
        } 
       } 
      }; 
      var cum=Object.create(objLiteral); 
      cum.address="gkm colony"; 
      objLiteral.deliver(); 
      cum.deliver(); 
      var cum1=objLiteral; 
      cum1.address="gkm colony"; 
      objLiteral.deliver(); 
      cum1.deliver();