光JavaScript框架

Question

我试图创建一个小的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'
    });

Answer 1

写你的方法对的设置的节点从$返回操作。这样既$('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。

Answer 2

喜欢你了怀疑的$在这种情况下返回的是元件的阵列，则必须使用setStyle延伸阵列或当传递数组回前的阵列填充添加扩展。那么你不应该得到一个错误说.setStyle不是一个函数。然而，你必须还要确保你处理你的对象上下文结合时，你要串联这样否则this指的是目前的范围，而不是一个元素的数组

Answer 3

在$函数返回的阵列;它应该要么返回在其上增加了的setStyle方法，或只是另一个对象的元对象本身（d）。

Answer 4

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

这就是所谓的盟友，你可以在这里下载： http://github.com/AllyToolkit/Ally

我注意到你说你想要的东西重量轻，股票版本盟友目前刚刚超过1300线，25KB unminified，你可以很容易地切出你不想要的部分。

我用的是很容易修改，但仍然很强大，充满实用的功能的意图写的。

我很快发布第二测试版在今晚。它应该是上来就发布分支（ http://github.com/AllyToolkit/Ally/tree/释放）在下一个小时内。

如果你决定尝试它，我希望你喜欢。 ：）