光JavaScriptフレームワーク

Question

私は私のGreasemonkeyスクリプトで使用することができ、小さなJavascriptの「フレームワーク」を作成しようとしています。私は唯一の非常にの基本的な機能を必要とするので、私はMooToolsのかDOMAssistantを使用しないことを選択した理由です。また、私は愚かなことと20キロバイトのGreasemonkeyスクリプトでDOMAssitantを置くつもりはありません！私はコードの小さな、きちんとしたスニペットを望んでます。

私は以下のコードを持つ小さな問題を抱えています。私は、その私は$（の配列を返すいますので、思う）ので、私は.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;
            }
        })
    }
}

ちなみに、これは/ popularzeを行うことが最初だったjQueryものです。

Answer 2

あなたは、この場合には$のリターンを疑われていた、同じ要素の配列である、あなたがたsetStyleで配列を拡張したり、配列を移入されたときにあなたが戻って配列を渡す前に、拡張子を追加する必要があります。そして、あなたは.setStyleは関数ではありませんというエラーを取得するべきではありません。あなたも加える必要がありますしかし、あなたはあなたがあなたの配列の要素を現在のスコープを参照していません。このそうthisのように連鎖されたときにバインディングオブジェクト・コンテキストを処理します。

Answer 3

$関数は、配列を返します。それはどちらかあなたがたsetStyleメソッド、または単に別のオブジェクトを拡張するどの要素オブジェクト自体（d）を返すべきである。

Answer 4

必要であれば、あなたは私のライブラリを使用することができます。

これは、同盟国と呼ばれています、あなたはここでそれをダウンロードすることができます： http://github.com/AllyToolkit/Ally

私はあなたが軽量な何かをしたいと気づいた、と同盟国の株式バージョンはちょうど1300本のライン、25キロバイトunminifiedの上に現在ある、とあなたが簡単にあなたがしたくない部分を切り取ることができます。

私はまだ非常に強力で、便利な機能をフルに変更するのは非常に簡単であることを意図して、それを書いた、未だます。

私はすぐに今夜第二ベータ版をリリースしています。これは、リリースブランチにアップする必要があります（ http://github.com/AllyToolkit/Ally/tree/次の1時間以内）を解放します。

あなたはそれを試すことにした場合、

私はあなたをお楽しみください。 ：）