我正在尝试创建一个小的Javascript“框架”,我可以在我的greasemonkey脚本中使用它。我只需要非常基本功能,所以这就是我选择不使用mooTools或DOMAssistant的原因。此外,我不会傻到把DOMAssitant放在一个20KB的Greasemonkey脚本中!我只想要一小段整洁的代码。
我在下面的代码中遇到了一个小问题。我认为它是因为我在$()中返回一个数组所以我得到.setStyle不是函数错误信息。
var fmini = {
$ : function(a) {
var i=0,obj,d;
var e = [];
while (obj = arguments[i++]) {
d = document.getElementById(obj);
d.setStyle = fmini.setStyle;
d.each = fmini.each;
e.push(d);
}
return e;
},
setStyle : function(style, value) {
if (typeof this.style.cssText !== 'undefined') {
var styleToSet = this.style.cssText;
if (typeof style === 'object') {
for (var i in style)
if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];
}
else styleToSet += ';' + style + ':' + value;
this.style.cssText = styleToSet;
}
return this;
},
each : function (functionCall) {
for (var i=0, il=this.length; i < il; i++)
functionCall.call(this[i]);
return this;
},
}
window.$ = fmini.$;
我希望这可以在我做的时候工作
$('bob','amy').setStyle({
'border' : '5px solid #ff0000',
'background-color' : '#ccc'
});
答案 0 :(得分:6)
编写方法以对从$
返回的节点的 set 进行操作。这样,$('bob').setStyle()
和 $('bob', 'amy').setStyle()
都可以使用。我看到你有一个通用的forEach
或each
方法,这是一个良好的开端。
var fmini = {
$: function() {
var i=0, obj;
var e = [];
e.setStyle = fmini.setStyle;
e.each = fmini.each;
while (obj = arguments[i++]) {
e.push(document.getElementById(obj));
}
return e;
},
setStyle : function(style, value) {
return this.each(function() {
if (typeof this.style.cssText !== 'undefined') {
var styleToSet = this.style.cssText;
if (typeof style === 'object') {
for (var i in style)
if (typeof i === 'string') styleToSet += ';' + i + ':' + style[i];
}
else styleToSet += ';' + style + ':' + value;
this.style.cssText = styleToSet;
}
})
}
}
顺便说一下,jQuery
是第一个做/ Popularze的事。
答案 1 :(得分:1)
就像你怀疑在这种情况下返回$是一个元素数组,你必须使用setStyle扩展数组,或者在数组被填充之前添加扩展名,然后再传回数组。然后你不应该得到一个错误说.setStyle不是一个函数。但是,当您像这样链接时,您还必须确保处理对象上下文绑定,否则this
指的是当前作用域而不是数组中的元素。
答案 2 :(得分:1)
$ function返回一个数组;它应该返回元素对象本身(d),你可以在其上添加setStyle方法,或者只返回另一个对象。
答案 3 :(得分:0)
如果你想要,你可以使用我的图书馆。
它叫做Ally,你可以在这里下载:http://github.com/AllyToolkit/Ally
我注意到你说你想要一些轻量级的东西,Ally的库存版本目前只有1300多行,25KB无法识别,你可以轻松地剪掉你不想要的部分。
我写这篇文章的目的是很容易修改,但仍然非常强大,并且充满了有用的功能。
我今晚很快就会发布第二个测试版。它应该在下一个小时内发布分支(http://github.com/AllyToolkit/Ally/tree/release)。
如果您决定尝试,我希望您喜欢。 :)