marco Javascript luz

Question

Estoy intentando crear un pequeño "marco" de Javascript que puedo usar en mis scripts de Greasemonkey. Sólo necesito muy funciones básicas, así que esto es por qué elegir no usar MooTools o DOMAssistant. Además, yo no voy a ser tonto y puse DOMAssitant en un script de Greasemonkey 20KB! Sólo quiero un pequeño fragmento, ordenada de código.

Tengo un pequeño problema con el código de abajo. Creo que es porque yo estoy devolviendo un array en $ () por lo que obtener .setStyle no es un mensaje de error de función.

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

Me gustaría que esto funcione cuando lo haga

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

Answer 1

Escriba sus métodos de operar en el set de nodos devueltos desde $. De esta manera, tanto $('bob').setStyle() y $('bob', 'amy').setStyle() funcionará. Veo que tiene un método forEach o each genérico que es un buen comienzo.

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

Por cierto que esto es algo jQuery fue el primero en hacer / popularze.

Answer 2

Al igual que había sospechado la devolución de $ en este caso es una matriz de los elementos, hay que extender matriz con setStyle o añadir la extensión cuando la matriz se llena antes de que pase la matriz de vuelta. Entonces no se debería obtener un error diciendo .setStyle no es una función. Sin embargo, tendrá que asegurarse de que también se encargará de su contexto objeto de enlace cuando está encadenando como esto lo contrario this se refiere al ámbito actual y no un elemento de la matriz.

Answer 3

La función $ devuelve un array; tampoco se debe regresar la propia (d) objeto elemento sobre el que aumentan el método setStyle, o simplemente otro objeto.

Answer 4

Si lo desea, podría utilizar mi biblioteca.

Se llama a Ally y se puede descargar desde aquí: http://github.com/AllyToolkit/Ally

Me di cuenta de que habías dicho que quiere algo ligero, y la versión estándar de aliado es actualmente poco más de 1300 líneas, 25KB unminified, y aquí se puede recortar las partes que no desee.

Lo escribí con la intención de ser muy fácil de modificar, sin embargo, sigue siendo muy poderosa, y lleno de características útiles.

Estoy lanzando la segunda beta pronto esta noche. Debería corresponder en la rama de liberación ( http://github.com/AllyToolkit/Ally/tree/ liberación) dentro de la hora siguiente.

Si usted decide intentar que espero que lo disfruten. :)