gratis - habilitar javascript en chrome en windows

Establecer la configuración predeterminada para el complemento javascript de vainilla

Question

Intenté construir un plugin de información sobre herramientas simple en javascript simple.

En mi código, traté de hacer y poner bcolor como configuración predeterminada en mi código y creo que no es una buena manera cuando queremos poner más de uno por defecto.

Entonces, ¿cómo puedo hacer configuraciones predeterminadas en mi plugin javascript de vainilla?

JSFIDDLE

var Tooltip = function(selector, bcolor) {
  this.targetElement = document.querySelectorAll(selector);
  this.bcolor = bcolor;
  if (this.bcolor == null || typeof this.bcolor !== "string") {
    this.bcolor = "#333";
  }

  if (this.targetElement == null) {
    console.log("Ooops, error!")
  }

  return this;
}

Tooltip.prototype.tooltip = function() {
  for (var i = 0; i < this.targetElement.length; i++) {

    var text = this.targetElement[i].getAttribute("data-tooltip");

    this.targetElement[i].style.position = "relative";

    var span = document.createElement("span");
    this.targetElement[i].appendChild(span);
    span.style.position = "absolute";
    span.style.top = "-25px";
    span.style.left = "-20px";
    span.style.padding = "4px"
    span.style.borderRadius = "5px";
    span.style.backgroundColor = this.bcolor;
    span.style.color = "#fff";
    span.innerHTML = text;
  }
}

var box = new Tooltip(".box", "red");
box.tooltip();

Answer 1

Primero, veamos cómo admitir fácilmente múltiples opciones . Una solución común a esto es hacer que su constructor tome un objeto de "configuración" en lugar de simples argumentos de cadena o número. Considere usar esta forma en su lugar:

var Tooltip = function(selector, options) {
    this.targetElement = document.querySelectorAll(selector);
    this.options = options;
    ...
};

var box = new Tooltip(".box", { color: "red" });

Tenga en cuenta que, en lugar de pasar un solo valor, pasamos un objeto que contiene ese único valor. Pero ese objeto puede tener potencialmente muchas opciones de configuración, ¡no solo una! Por ejemplo, podrías pasar:

var box = new Tooltip(".box", {
    backgroundColor: "red",
    textColor: "white",
    fontSize: 12,
    animated: true,
    animationSpeed: 1000
});

Cuando necesite acceder a cualquiera de esas opciones, su código puede simplemente usar la referencia al objeto de opciones: por ejemplo, en lugar de this.bcolor , puede usar this.options.backgroundColor . Aquí está su código anterior, extendido con algunas opciones más:

Tooltip.prototype.tooltip = function() {
   for (var i = 0; i < this.targetElement.length; i++) {
       ...
       span.style.backgroundColor = this.options.backgroundColor;
       span.style.color = this.options.textColor;
       span.style.fontSize = this.options.fontSize + "px";
       ...
   }
}

Así es como manejarías múltiples opciones; pero ¿qué pasa con los valores predeterminados para cada uno? Para hacer eso, querría primero definir en algún lugar a qué se parecen los valores predeterminados:

Tooltip.prototype.defaultOptions = {
    backgroundColor: "#FF9",
    textColor: "black",
    fontSize: 12,
    animated: false,
    animationSpeed: 1000
};

Y luego su constructor podría girar sobre las defaultOptions , usando sus valores para completar cualquier "agujero" faltante en el objeto de options provisto:

var Tooltip = function(selector, options) {
    this.targetElement = document.querySelectorAll(selector);
    this.options = options;

    for (var optionName in this.defaultOptions) {
        if (typeof this.options[optionName] === ''undefined'')
            this.options[optionName] = this.defaultOptions[optionName];
    }
    ...
};

Una prueba en contra de un typeof para el valor de undefined es verdadera solo si el valor no existe, por lo que for-loop copia cualquier valor de defaultOptions a options , siempre y cuando no existan en las options . Es agradable y extensible: tan pronto como agregue un nuevo valor a defaultOptions , el ciclo lo copiará en options , sin importar lo que las personas que llamaron hayan pasado antes.

Y, lo que es más importante, ese bucle for es realmente todo lo que jQuery.extend está haciendo bajo el capó: copiar valores de un objeto a otro. (La solución de jQuery es un poco más elegante, pero simplifiqué las cosas aquí para que sea más obvio lo que está sucediendo).

Pero, ¿y si quieres un comportamiento predeterminado en algunos lugares? Por ejemplo, si no define un tamaño de fuente específico, tal vez solo desee que herede del elemento principal o del documento en lugar de que se asigne a algo de defaultOptions .

Si desea ese tipo de comportamiento "no lo asigne, a menos que lo haya provisto", puede funcionar el mismo patrón básico anterior, pero debe ajustar un poco las opciones predeterminadas y luego agregar una condición cuando esté solicitando la opción. Considera cómo este ejemplo difiere de lo que mostré arriba:

// Notice that we specifically leave out fontSize here in the defaults.
Tooltip.prototype.defaultOptions = {
    backgroundColor: "#FF9",
    textColor: "black",
    animated: false,
    animationSpeed: 1000
};

Tooltip.prototype.tooltip = function() {
   for (var i = 0; i < this.targetElement.length; i++) {
       ...
       span.style.backgroundColor = this.options.backgroundColor;
       span.style.color = this.options.textColor;

       // Now, we only assign the fontSize if it was provided by the user.
       if (typeof this.options.fontSize !== ''undefined'')
           span.style.fontSize = this.options.fontSize + "px";
       ...
   }
}

Espero que esto sea suficiente para que trabajes.

Las variaciones en esto (el patrón Object.extend y las pruebas en contra de undefined ) se utilizan en todo el lugar en JavaScript, y son muy utilizadas por jQuery y una gran cantidad de otras bibliotecas. Si sigues el mismo diseño básico que tienen, estarás en muy buena compañía.