我想要的是像$
jQuery一样使用_h
。每次我使用 _h
时,我都希望有 Helper 类的新实例,它将保存选定的元素,对它们进行处理等等。
问题是 _h
不会创建类的新实例,而是使用已经创建的实例。
我假设如果我这样使用它:
var obj1 = _h('p');
var obj2 = _h('#testDiv');
我会有两个不同的类实例。然而,两个实例都存储相同的元素,并且似乎指向同一个实例。
var _h = (function(){
var Helper = function(query){
if(window === this)
return new Helper(query);
this.Get.call(this, query);
this._allCurrentElements = [];
}
Helper.prototype.Get = function(query){
var els = document.querySelectorAll(query);
for (var i = 0; i < els.length; i++) {
_allCurrentElements.push(els[i])
};
return this;
}
Helper.prototype.AddClass = function(cl) {
// do stuff
return this;
}
Helper.prototype.RemoveClass = function(cl) {
// do stuff
return this;
}
// more methods
//return Helper;
//return Helper();
return new Helper();
})();
因此,如果有人能指出我做错了,我将非常感激。
编辑:如果我不将其包装在 IFFE 中,则不要分配给 _h var 并调用 var t = Helper('p')
,那么它的行为将按预期进行
最佳答案
(function(){})()
称为 IIFE(立即调用函数表达式)。这意味着,您正在声明一个匿名函数并在一个步骤中调用它。 IIFE的返回值存储在_h
中。
当您返回new Helper();
时,_h
包含Helper
的实例。
当您返回 Helper
时,您将返回 Helper 类的构造函数。您必须使用 new _h()
创建新的 Helper 对象。
您需要的是一个包装函数,它将接受参数,创建一个新的 Helper 对象并返回它。
尝试
var _h = (function(){
var Helper = function(query){
if(window === this)
return new Helper(query);
this.Get.call(this, query);
this._allCurrentElements = [];
}
Helper.prototype.Get = function(query){
var els = document.querySelectorAll(query);
for (var i = 0; i < els.length; i++) {
_allCurrentElements.push(els[i])
};
return this;
}
Helper.prototype.AddClass = function(cl) {
// do stuff
return this;
}
Helper.prototype.RemoveClass = function(cl) {
// do stuff
return this;
}
// more methods
return function (query) {
return new Helper(query);
};
})();
<小时/>
更新 1:
在Helper.prototype.Get
中,_allCurrentElements
是一个全局变量。您需要使用 this._allCurrentElements
。
此外,您需要在调用 this.Get
之前初始化 this._allCurrentElements = [];
工作示例 - https://jsfiddle.net/ucqgnbne/
更新2
正如 @Bergi 评论的那样,返回 Helper 将会起作用,因为您使用的是 if(window === this) return new Helper(query);
。
关于javascript - 如何像jQuery一样创建多个不同的实例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37032745/