我已经开发了一个小的javscript小部件来转一些嵌套的< 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);
}
但是,这简单地覆盖了第一个实例的配置值,这有效地打破了它.我开始意识到对象文字模式不是去这里的方式,但我不知道是什么.任何人都可以提供任何指针吗？
解决方法
使用一个函数代替对象文字,所以您可以使用新的关键字实例化小部件的多个对象.
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'),..
};
// 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({ .. });
...
