quadro chiaro Javascript

Question

Sto cercando di creare un piccolo "quadro" Javascript che posso usare nei miei script di Greasemonkey. Ho solo bisogno di molto le funzioni di base, quindi questo è il motivo per cui ho scelto di non usare MooTools o DOMAssistant. Inoltre, io non ho intenzione di essere sciocco e mettere DOMAssitant in uno script Greasemonkey 20KB! Voglio solo un piccolo, frammento di ordinata di codice.

Ho un piccolo problema con il codice qui sotto. Penso che sia perché sto tornando una matrice in $ () in modo da ottenere .setStyle non è un messaggio di errore di funzione.

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

Vorrei far funzionare tutto questo quando faccio

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

Answer 1

Scrivi i tuoi metodi per operare sul set di nodi tornati dalla $. In questo modo sia $('bob').setStyle() e $('bob', 'amy').setStyle() funzionerà. Vedo che hai un metodo forEach o each generico che è un buon inizio.

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

Per inciso questo è qualcosa jQuery è stato il primo a fare / popularze.

Answer 2

Come si era sospettato il ritorno di $ in questo caso è una serie di elementi, è necessario estendere la gamma con setStyle o aggiungere l'estensione quando la matrice è popolato prima di passare la matrice indietro. Allora non si dovrebbe ottenere un errore che dice .setStyle non è una funzione. Tuttavia si dovrà fare anche sicuri di gestire il vostro contesto oggetto di associazione quando si concatenano in questo modo altrimenti this si riferisce al campo di applicazione attuale e non un elemento nella propria matrice.

Answer 3

La funzione $ restituisce un array; o esso deve essere restituita l'oggetto dell'elemento stesso (d) su cui è aumentare il metodo setStyle, o semplicemente un altro oggetto.

Answer 4

Se si desidera è possibile utilizzare la mia libreria.

Si chiama Ally e si può scaricare qui: http://github.com/AllyToolkit/Ally

Ho notato che hai detto che si desidera qualcosa di leggero, e la versione magazzino di Ally è attualmente poco più di 1300 linee, 25KB unminified, e si potrebbe facilmente tagliare le parti che non si desidera.

L'ho scritto con l'intenzione di essere molto facile da modificare, ma ancora molto potente, e pieno di funzioni utili.

sto rilasciando la seconda versione beta presto stasera. Dovrebbe essere sul ramo di release ( http://github.com/AllyToolkit/Ally/tree/ rilascio ) entro l'ora successiva.

Se si decide di provarlo Spero che ti piace. :)