轻量级 Javascript 框架答案

【问题标题】：Light Javascript framework轻量级 Javascript 框架
【发布时间】：2010-10-06 01:28:45
【问题描述】：

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

我对下面的代码有一个小问题。我认为是因为我在 $() 中返回了一个数组，所以我得到 .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'
    });

【问题讨论】：

在其中添加更多代码格式
请使用常规、可读的 JavaScript 开发您的库；在你让它工作之后，你总是可以通过一个缩小器来管道它......
对不起！这段代码应该是多行的，但 stackoverflow 不同意我的看法！我正在尝试习惯您使用格式代码的方式。我有它在多行，但它现在削减了一些代码。

标签： frameworks javascript javascript-framework

【解决方案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 是第一个做/流行的事情。

【讨论】：

-1，$ 仍然返回一个函数数组（在这种情况下），你不能像 $().setStyle 那样访问它们
@sktrdie：您错过了我将setStyle 附加到所述对象数组的部分。请重新阅读。
有趣，我从未在数组 ([]) 上看到过这种类型的扩充，对此感到抱歉，谢谢，我想我学到了一些东西。你能增强几乎任何东西吗？
@sktrdie：是的，你可以增加任何东西。尽管代码示例中的方法可行，但它浪费内存。每次调用$ 时，都会为额外的方法分配内存。 jQuery 做得对。
谢谢新月新鲜！它完美地工作。所以如果我有很多'$'调用，我会浪费很多额外的内存吗？反正有这个吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

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

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

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

【讨论】：