2

我正在尝试创建一个可以在我的greasemonkey 脚本中使用的小型Javascript“框架”。我只需要非常基本的功能，所以这就是我选择不使用 mooTools 或 DOMAssistant 的原因。另外，我不会傻傻的把DOMAssitant 放到一个20KB 的Greasemonkey 脚本里！我只想要一小段整洁的代码。

我对下面的代码有一个小问题。我认为这是因为我在 $() 中返回了一个数组，所以我得到 .setStyle is not a function 错误消息。


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'
    });
4

4 回答 4

6

编写您的方法来操作从$. 这样，两者都$('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第一个做/流行的事情。

于 2009-02-06T22:09:01.533 回答
1

就像您怀疑在这种情况下返回的 $ 是一个元素数组一样，您必须使用 setStyle 扩展数组，或者在填充数组时添加扩展，然后再将数组传回。那么你不应该得到一个错误，说 .setStyle 不是一个函数。但是，您还必须确保在像这样链接时处理对象上下文绑定，否则this指的是当前范围而不是数组中的元素。

于 2009-02-06T22:17:45.227 回答
1

$ 函数返回一个数组；它应该返回元素对象本身 (d)，在该元素对象上增加 setStyle 方法，或者只是另一个对象。

于 2009-02-06T22:19:36.800 回答
0

如果你愿意，你可以使用我的图书馆。

它叫做 Ally，你可以在这里下载它：http: //github.com/AllyToolkit/Ally

我注意到你说你想要一些轻量级的东西，而 Ally 的库存版本目前刚刚超过 1300 行，25KB 未缩小，你可以轻松地删除你不需要的部分。

我写它的目的是很容易修改，但仍然非常强大，并且充满了有用的功能。

今晚我将很快发布第二个测试版。它应该会在接下来的一个小时内出现在发布分支 ( http://github.com/AllyToolkit/Ally/tree/release ) 上。

如果你决定尝试一下，我希望你喜欢。:)

于 2011-02-11T02:04:50.100 回答