Licht Javascript Rahmen

Question

Ich versuche, ein kleines Javascript „Rahmen“ zu schaffen, die ich in meinem Greasemonkey-Skripte verwenden können. Ich brauche nur sehr Grundfunktionen, so ist dies, warum ich nicht wählen Mootools oder DOMAssistant zu verwenden. Außerdem werde ich sein, nicht dumm und setzte DOMAssitant in einem 20KB Greasemonkey-Skript! Ich möchte nur einen kleinen, sauberen Code-Snippet.

Ich habe ein kleines Problem mit dem Code unten. Ich denke, sein, weil ich ein Array in $ kehre zurück (), damit ich bekommen .setStyle ist keine Funktion Fehlermeldung.

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.$;

Das möchte ich arbeiten, wenn ich

  $('bob','amy').setStyle({
    'border' : '5px solid #ff0000',
    'background-color' : '#ccc'
    });

Answer 1

Ihre Methoden Schreiben Sie an die gesetzt von Knoten von $ zurück betreiben. Auf diese Weise sowohl $('bob').setStyle() und $('bob', 'amy').setStyle() arbeiten. Ich sehe, Sie haben ein generisches forEach oder each Verfahren, das ein guter Anfang ist.

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

Im Übrigen ist dies etwas jQuery wurde der erste tun / popularze.

Answer 2

Wie Sie die Rückkehr von $ in diesem Fall vermutet hatten eine Anordnung der Elemente, müssen Sie Array erweitern mit setStyle oder die Erweiterung hinzufügen, wenn das Array gefüllt ist, bevor Sie das Array wieder passieren. Dann sollten Sie nicht einen Fehler zu sagen .setStyle ist keine Funktion. Allerdings müssen Sie auch sicher, dass Sie Ihre Objektkontext behandeln machen verbindlich, wenn Sie dieses sonst this sind Chaining wird auf den aktuellen Bereich bezieht und nicht ein Element im Array.

Answer 3

Die $ Funktion zurückgibt ein Array; es sollte entweder das Element Objekt selbst (d) auf den Sie die setStyle Methode erweitern zurückkehren, oder einfach nur ein anderes Objekt.

Answer 4

Wenn Sie möchten, könnten Sie meine Bibliothek verwenden.

Es heißt Ally und Sie können es hier herunterladen: http://github.com/AllyToolkit/Ally

Ich habe bemerkt, Sie sagten, Sie etwas leichtes wollen, und die Lager-Version von Ally ist derzeit nur über 1300 Zeilen, 25KB unminified, und man konnte leicht die Teile ausschneiden Sie nicht wollen.

ich es mit der Absicht geschrieben, dass sie sehr einfach zu ändern, aber immer noch sehr mächtig, und voll von nützlichen Funktionen.

Ich bin die Freigabe der zweiten Beta bald heute Abend. Es sollte auf dem Release-Zweig sein up ( http://github.com/AllyToolkit/Ally/tree/ release) innerhalb der nächsten Stunde.

Wenn Sie sich entscheiden, es zu versuchen Ich hoffe, Sie genießen. :)