尝试用纯 javascript 构建一个简单的工具提示插件。

在我的代码中，我尝试将 bcolor 作为我代码中的默认设置，我认为当我们想要设置多个默认值时，这不是一个好方法。

那么，如何在我的 vanilla javascript 插件中进行默认设置？

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

最佳答案

首先，让我们看看如何轻松支持多个选项。一个常见的解决方案是让您的构造函数接受一个“配置”对象，而不是简单的字符串或数字参数。考虑改用这种形式:

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

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

请注意，我们没有传递单个值，而是传递了一个包含该单个值的对象。但是那个对象可能有很多配置选项——不只是一个!例如，您可以传入:

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

当您需要访问任何这些选项时，您的代码可以简单地使用对选项对象的引用:例如，您可以使用 this.options 而不是 this.bcolor .backgroundColor。这是上面的代码，扩展了更多选项:

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";
       ...
   }
}

这就是您处理多个选项的方式；但是每个的默认值呢？为此，您需要先在某处定义默认值:

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

然后您的构造函数可以旋转 defaultOptions，使用它的值来填充所提供的 options 对象中任何缺失的“漏洞”:

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];
    }
    ...
};

仅当值不存在时，针对 typeof 的 undefined 值的测试才为真，因此此 for 循环从 复制任何值defaultOptions 到 options，只要它们不存在于 options 中。它很好而且可扩展:只要您向 defaultOptions 添加新值，循环就会将其复制到 options 中，无论调用者之前传递了什么。

而且，更重要的是，for 循环实际上就是 jQuery.extend 在幕后所做的一切:将值从一个对象复制到另一个对象。 (jQuery 解决方案更优雅一些，但我在这里简化了一些事情，以便更清楚地了解正在发生的事情。)

但是如果您希望在某些地方使用默认行为怎么办？例如，如果您没有定义特定的字体大小，您可能只是希望它从父元素或文档继承，而不是将其分配给 defaultOptions 中的内容。

如果你想要那种“除非提供就不要赋值”的行为，上面相同的基本模式也可以工作，但你需要稍微调整一下默认选项，然后在你需要时添加一个条件'应用选项。想想这个例子与我上面展示的有何不同:

// 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";
       ...
   }
}

希望这足以让您使用。

对此的变体(Object.extend 模式 和针对 undefined 的测试)在整个位于 JavaScript 中，并被 jQuery 和许多其他库大量使用。如果您遵循与他们相同的基本设计，那么您将成为很好的伙伴。

关于javascript - 为 vanilla javascript 插件进行默认设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42627218/