Lumière framework Javascript

Question

Je suis en train de créer un petit Javascript « cadre » que je peux utiliser dans mes scripts Greasemonkey. Je ne ai besoin très fonctions de base, donc c'est pourquoi je choisis de ne pas utiliser MooTools ou DOMAssistant. D'ailleurs, je ne vais pas être stupide et mis DOMAssitant dans un script Greasemonkey 20KB! Je veux juste un petit extrait pur de code.

J'ai un petit problème avec le code ci-dessous. Je pense que parce que je suis retourne un tableau en $ () donc je reçois .setStyle est pas un message d'erreur de fonction.

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

Je voudrais que cela fonctionne quand je fais

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

Answer 1

Écrivez vos méthodes pour fonctionner sur la set de nœuds retour de $. De cette façon, les deux $('bob').setStyle() et $('bob', 'amy').setStyle() fonctionnera. Je vois que vous avez un forEach générique ou méthode each qui est un bon point de départ.

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

Par ailleurs c'est jQuery quelque chose a été le premier à faire / popularze.

Answer 2

Comme vous aviez soupçonné le retour de $ dans ce cas est un tableau des éléments, vous devez étendre tableau avec setStyle ou ajouter l'extension lorsque le tableau est rempli avant de passer le tableau arrière. Ensuite, vous ne devriez pas avoir une erreur indiquant .setStyle n'est pas une fonction. Cependant, vous devrez également vous assurer que vous gérer votre contexte d'objet de liaison lorsque vous enchaînez comme celui-ci autrement this se réfère à la portée actuelle et non un élément dans votre tableau.

Answer 3

La fonction $ retourne un tableau; il doit être soit de retour l'objet élément lui-même (d) sur lequel vous étendez la méthode setStyle, ou tout simplement un autre objet.

Answer 4

Si vous voulez, vous pouvez utiliser ma bibliothèque.

Il est appelé Ally et vous pouvez le télécharger ici: http://github.com/AllyToolkit/Ally

J'ai remarqué que vous avez dit que vous voulez quelque chose de léger, et la version stock d'Ally est actuellement un peu plus de 1300 lignes, 25KB unminified, et vous pourriez facilement découper les pièces que vous ne voulez pas.

Je l'ai écrit avec l'intention d'être très facile à modifier, mais encore très puissant et plein de fonctionnalités utiles.

je publie la 2ème version bêta bientôt ce soir. Il devrait être sur la branche de sortie ( http://github.com/AllyToolkit/Ally/tree/ libération ) dans l'heure suivante.

Si vous décidez de l'essayer, j'espère que vous apprécierez. :)