Question

我想使用以下语法，其中参数是HTML元素的ID，与您如何设置JWPlayer非常相似，但我无法弄清楚他们是如何做到的。这样我就可以让其他人尽可能地使用它。

myWidget("htmlTargetId");

我正在努力避免这样做：

myWidget = new MyWidget("htmlTargetId");

我知道我可以通过以下方式创建第一个：

var myWidget = function(target) {
   // Do something here
}

myWidget("htmlTargetId");

我需要添加方法和属性等，但我想要一个“构造函数”，它将在“htmlTargetId”中创建元素。最好的方法是什么？

我尝试了一些变化，这是最新的尝试：

var myWidget = (function () {

var _target = undefined;

// constructor
var widget = function (target) {
    _target = target;
    version = 12;
};

widget.prototype = {
    constructor: widget,
    doSomething: function () {
        console.log("I will so something to", target);
    }

};

return widget;
})();

// Try out the new code
myWidget("htmlTargetId");
console.log(myWidget.version);
myWidget.doSomething();

但是这给了我“undefined”和“Uncaught TypeError：undefined不是函数”我假设这是因为return语句返回的是函数而不是对象，因为我没有使用“new”？

// Trying to avoid having to do this
superWidget = new myWidget("htmlTargetId");

非常感谢！

Answer 1

如果您想拥有多个Widget个实例，

＆＃13;

var myWidget = (function () {

  // constructor
  var Widget = function (target) {
    this._target = target;
  };

  Widget.prototype = {
    constructor: Widget,
    version: 12,
    doSomething: function () {
      console.log("...", this._target);
    }
  };

  return function init(target) {
    return new Widget(target);

  };
})();

var widget1 = myWidget("foo"),
    widget2 = myWidget("bar");
console.log(widget1.version); // 12
widget1.doSomething();        // "..." "foo"
widget2.doSomething();        // "..." "bar"

＆＃13;

但是，如果您只需要一个＆＃34;实例＆＃34;，则您不需要任何构造函数：

＆＃13;

var myWidget = function (target) {
  myWidget._target = target;
};
myWidget.version = 12;
myWidget.doSomething =  function () {
  console.log("...", myWidget._target);
}

myWidget("foo");
console.log(myWidget.version); // 12
myWidget.doSomething();        // "..." "foo"

＆＃13;

JavaScript＆＃34; Class＆＃34;避免使用x = new widget（）的结构;

1 个答案: