Question

说我写了一个插件

<div id="myContainer">
   <input type="file" class="plugins-file">
</div>

在执行$('#myContainer').hideFile();时，插件会隐藏输入字段并为容器提供蓝色背景，无论如何。

我想让输入字段的类可以自定义。

所以，虽然标准是plugins-file，但我希望以下是可能的：

<div id="myContainer">
   <input type="file" class="custom-class">
</div>

和

$('#myContainer').hideFile({
    class: 'custom-class'
});

有什么好办法吗？（参见此笔https://codepen.io/chrispillen/pen/WMOYKd）

示例：

(function( $ ) {

    $.fn.showLinkLocation = function(arg) {

      var options = $.extend({}, $.fn.showLinkLocation.defaults);

        if (typeof arg === "string" && arg === "test") {
          // is command

          console.log("OPTIONS:");
          console.log($.fn.showLinkLocation.defaults);

        } else {
          // is init and options

          options = $.extend(options, arg); 

          console.log("init options: ");
          console.log(options);

          this.filter("a").append(function() {

              return " " + options.leftBracket + this.href + options.rightBracket;

          });

        }

        return this;

    };

  // Plugin defaults – added as a property on our plugin function.
$.fn.showLinkLocation.defaults = {
    leftBracket: "(",
    rightBracket: ")",
    test: "Foo"
};

}( jQuery ));



$(document).ready(function() {

  $('a.one').showLinkLocation({
    test: "Bar",
    leftBracket: "[",
    rightBracket: "]"
  });

  $('a.two').showLinkLocation({});

  console.log("+++TEST+++");
  $('a.one').showLinkLocation("test");
  $('a.two').showLinkLocation("test");

});

正如您所看到的，第二次showLinkLocation被调用时，它不知道所做的设置，而插件是在所需的元素a.one上初始化的。

（HTML code：

<a href="http://www.mozilla.org" class="one">Mozilla</a>
<a href="http://www.apache.org" class="two">Apache</a>

）

Answer 1

它不能在你的例子中工作，因为你的options var是函数的本地，当你第二次调用插件时，会创建一个新的函数实例，它无法访问第一个。您需要在某处保存这些选项。

存储在默认值中并不是一个好主意（正如您似乎尝试的那样，这是您在测试中显示的内容），因为只有一个默认值并且可以包含许多元素。

IMO最简单的方法是将它们存储在插件内的javascript数组中，但它需要安全地识别作为插件目标的元素，更简单的方法是将其直接存储在元素中，用于示例jQuery的数据（这里可能不需要使用JSON）：

(function( $ ) {

    $.fn.showLinkLocation = function(arg) {

      var options = $.extend({}, $.fn.showLinkLocation.defaults);

        if (typeof arg === "string" && arg === "test") {
          // is command

          console.log("OPTIONS:");
          
          //RETRIEVING THE OPTIONS FROM THE ELEMENT(s)
          this.filter("a").each(function(){
              options = $(this).data('linkLocationPluginOptions');
              if(options){
                  options = JSON.parse(options);
              }
              console.log(options);
          });

        } else {
          // is init and options

          options = $.extend(options, arg); 

          console.log("init options: ");
          console.log(options);

          this.filter("a").append(function() {

              return " " + options.leftBracket + this.href + options.rightBracket;

          });
          
          //STORING THE OPTIONS IN THE ELEMENT(s)
          this.filter("a").each(function(el) {
              
              //name may look complex, the goal is to be unique across plugins
              $(this).data('linkLocationPluginOptions', JSON.stringify(options));
              
          });

        }

        return this;

    };

  // Plugin defaults – added as a property on our plugin function.
$.fn.showLinkLocation.defaults = {
    leftBracket: "(",
    rightBracket: ")",
    test: "Foo"
};

}( jQuery ));



$(document).ready(function() {

  $('a.one').showLinkLocation({
    test: "Bar",
    leftBracket: "[",
    rightBracket: "]"
  });

  $('a.two').showLinkLocation({});

  console.log("+++TEST+++");
  $('a.one').showLinkLocation("test");
  $('a.two').showLinkLocation("test");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.mozilla.org" class="one">Mozilla</a>
<a href="http://www.apache.org" class="two">Apache</a>

jQuery插件：使选项持续存在的最佳实践

1 个答案: