framework leve Javascript

Question

Eu estou tentando criar um pequeno "quadro" Javascript que eu posso usar em meus scripts Greasemonkey. Eu só preciso de muito funções básicas , então é por isso que eu não optar por MooTools uso ou DOMAssistant. Além disso, eu não vou ser bobo e colocar DOMAssitant em um script 20KB Greasemonkey! Eu só quero um pequeno, puro trecho de código.

Eu tenho um pequeno problema com o código abaixo. Eu acho que é porque eu estou retornando um array em $ () assim que eu conseguir .setStyle não é uma mensagem de erro função.

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

Eu gostaria que isso funcione quando eu faço

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

Answer 1

Escreva seus métodos para operar no set de nós voltou de $. Dessa forma, tanto $('bob').setStyle() e $('bob', 'amy').setStyle() vai funcionar. Vejo que você tem um forEach ou each método genérico que é um bom começo.

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

A propósito isso é algo jQuery foi o primeiro a fazer / popularze.

Answer 2

Como você suspeitava o retorno de US $ neste caso, é um conjunto de elementos, você tem que estender array com setStyle ou adicionar a extensão quando a matriz é preenchida antes de passar a parte de trás matriz. Então você não deve ter um erro dizendo .setStyle não é uma função. No entanto, você terá que também certifique-se de lidar com o seu contexto objeto ligação quando você está encadeamento como esta this caso contrário está se referindo ao escopo atual e não um elemento na sua matriz.

Answer 3

A função de $ está retornando um array; ele deve quer voltar a própria (d) objeto elemento sobre o qual você aumentar o método setStyle, ou apenas outro objeto.

Answer 4

Se você quiser, pode usar a minha biblioteca.

É chamado Ally e você pode baixá-lo aqui: http://github.com/AllyToolkit/Ally

Eu percebi que você disse que você quer algo leve, e a versão estoque de Ally é atualmente apenas a mais de 1300 linhas, 25KB unminified, e você pode facilmente cortar as partes que você não quer.

Eu escrevi isso com a intenção de ser muito fácil de modificar, mas ainda muito poderoso e cheio de recursos úteis.

Estou liberando o 2º beta em breve esta noite. Deve ser-se sobre o ramo de lançamento ( http://github.com/AllyToolkit/Ally/tree/ liberar ) dentro da próxima hora.

Se você decidir experimentá-lo Espero que você goste. :)