шаблон буквального объекта javascript с несколькими экземплярами

Question

Я разработал небольшой виджет JavaScript, чтобы превратить некоторые вложенные блоки <ul> в браузер в стиле проводника Windows.Недавно я узнал об объектном литеральном шаблоне и решил попробовать, поэтому организация моего кода выглядит примерно так:

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 () {
    myExplorer.init();
}

Кстати, все это прекрасно работает.Проблема в том, что я хочу, чтобы на одной странице было больше одного из этих виджетов в стиле проводника.Я попытался передать различные настройки:

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

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

}

Но это просто перезаписывает значения конфигурации для первого экземпляра, что фактически нарушает его.Я начинаю понимать, что шаблон буквального объекта - не тот путь, но я не уверен, что это такое.Кто-нибудь может предложить какие-нибудь указатели?

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() {

    };
}

Создайте столько объектов этого виджета, сколько необходимо, используя

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

Answer 2

Как насчет этого?

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 3

Используйте следующий код для достижения этой цели, помните о «публичном 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 4

Когда вы вызываете $.extend() следующим образом, он объединяет свойства второго объекта с первым:

$.extend(myExplorer.config, settings);

Вместо этого создайте новый объект, который является результатом слияния, оставляя первый объект (значения по умолчанию) нетронутым, как это:

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

То, что это делает, по-прежнему объединяет переданные объекты с первым, но первый - это новый объект ({}), поэтому мы не влияем ни на один из остальных, затем просто используем this.settings (или другой имя, чтобы сделать его абсолютно ясным) внутри вашего объекта.

Answer 5

Насколько я понимаю, вы пытаетесь создать новый экземпляр объекта, который был определен с использованием литеральной нотации объекта.объектные литералы могут быть созданы с помощью метода Object.create.Вот код, который объясняет, как создать экземпляр объекта из буквенной нотации объекта.

            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();