Question

想要创建一个纯JavaScript插件。是否可以在HTML文件中设置选项，就像我为jQuery设置选项一样？如果是，怎么样？

jQuery中的示例选项：

$(document).ready(function(){
    $("#myID").myFunction({
      folded: true,
      defaultSlide: 1
    });
});

Answer 1

如果您正在谈论

{
  folded: true,
  defaultSlide: 1
}

在引用的代码中，它与jQuery完全无关，它只是一个JavaScript对象初始化器。是的，您的功能可以接受并使用它：

function myFunction(options) {
    // use options.folded
    // use options.defaultSlide
}

引用代码的第一部分$(...)是jQuery。要在没有jQuery的情况下做类似的事情，你显然需要写下这一点。

这是一个接受选项并设置匹配元素颜色的示例：

＆＃13;

function myFunction(selector, options) {
  var list = document.querySelectorAll(selector);
  var color = options.color || "red";
  var i;
  for (i = 0; i < list.length; ++i) {
    list[i].style.color = color;
  }
}

myFunction(".foo", {color: "blue"});
setTimeout(function() {
  myFunction(".bar", {color: "#008000"});
}, 300);

＆＃13;

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo">foo</div>
<div class="bar">bar</div>

＆＃13;

Answer 2

您可以为指定的HTML元素设置额外的属性，只需在需要时阅读：

<div id="myID" data-foo="bar"></div>

在JavaScript中：

var element = document.getElementById('myID'),
    foo = element.getAttribute('data-foo');

Answer 3

是的，有可能。检查这个纯JS插件的示例配置：http://ionden.com/a/plugins/ion.sound/demo_advanced.html

// create sound
ion.sound({
    sounds: [
        {name: "witchdoctor"}
    ],

    path: "static/sounds/",
    preload: true,
    multiplay: false
});

JavaScript插件选项

3 个答案: