我正在尝试构建一个像 jQuery 这样的 Javascript 库,只是为了更多地学习 Javascript。到目前为止,我已经开发了这个:
window.jsLib = function (selector) {
var about = {
Version: 0.1
};
if (selector) {
if (window === this) {
return new jsLib(selector);
}
if (typeof selector === 'string') {
var nodes = document.querySelectorAll(selector);
for (var i = 0; i < nodes.length; i++) {
this[i] = nodes[i];
}
this.length = nodes.length;
} else if (typeof selector === 'object') {
this[0] = selector;
this.length = 1;
}
return this;
} else {
return about;
}
};
对于方法,我开发了一些类似的方法:
jsLib.fn = jsLib.prototype = {
css: function (key, value) {
if (value !== undefined) {
for (var i = 0; i < this.length; i++) {
this[i].style[key] = value;
}
return this;
} else {
for (var i = 0; i < this.length; i++) {
return this[i].style[key];
}
}
},
html: function (value) {
if (value !== undefined) {
for (var i = 0; i < this.length; i++) {
this[i].innerHTML = value;
}
return this;
} else {
for (var i = 0; i < this.length; i++) {
return this[i].innerHTML;
}
}
},
on: function (type, callback) {
console.log(window.event);
for (var i = 0; i < this.length; i++) {
this[i].addEventListener(type, callback, false);
}
return this;
},
trigger: function (type) {
var event = new Event(type);
for (var i = 0; i < this.length; i++) {
this[i].dispatchEvent(event);
}
return this;
},
append: function(value) {
var old = this.html();
this.html(old + '' + value);
return this;
}
};
您可能已经注意到我已经定义了一个on
类似 jQuery 的方法。
每当我打电话jsLib('div#foo').on('click', someFunc);
时,它工作正常。
但是,假设我附加了一些像jsLib('body').append('<a id="#bar" href="#">Click</a>');
然后我想提供一个 API 来将事件监听器添加到#bar
like jsLib('body').on('click', '#bar', someOtherFunc);
。
但我不确定如何实现这个监听器。
请帮忙。