使用javascript创建可重用的小部件

Question

我正致力于创建小型，可嵌入的小部件，这些小部件的句柄位于自己的JS文件之外。

页面结构

例如，我有一个页面，其中可能包含n个＆＃39; power-widget 。 ＆＃39; N＆＃39;由服务该页面的Web服务器确定。 A＆＃39; power-widget ＆＃39;只不过是一个带有设备名称的div，以及它当前的功耗。每5秒通过ajax更新当前读数。

注意：每个页面可以有不同的类型＆＃39;小部件，虽然下面的图像只有一种类型的小部件。

小工具

每个绿色框都是一个小部件，它在页面加载时初始化，并将设备名称，颜色等作为参数。每个类型的小部件，＆＃39; power-widget ＆＃39;在这种情况下，有自己的JS和CSS文件（以及HTML结构），一旦页面检测到需要这些文件，就会异步加载。 因此，可以在我的网站中的任何页面上呈现相同的小部件。

问题

我编写了代码来检测并加载每个小部件所需的JS，CSS和HTML内容，并将其放入其所需的div中。我写了一些代码来创建一个类似于类的＆＃39;我可以实例化和编写方法（如更新读数）的小部件结构。

function PowerStatus(options) {
    this.settings = {
        meterName: '',
        mainDiv: null,
        glow: false,
        meterOn: "#91bd09",
        meterOff: "#bc330d",
        meterMid: "#333333"
    };
    this.settings = $.extend(this.settings, options);
    this.settings.mainDiv = $('#' + this.settings.mainDiv);
    this.bindUIActions();
    this.setMeterName();
}

PowerStatus.prototype.setMeterName = function () {
    console.log(this.settings.mainDiv);
    var div = this.settings.mainDiv.find('.load-name');
    var span = $('span:first', div);
    span.text(this.settings.meterName);
};

PowerStatus.prototype.bindUIActions = function () {
    this.settings.mainDiv.on("click", this.divclick);
};

PowerStatus.prototype.divclick = function () {
    console.log(this);
    console.log('Clicked ' + this.settings.meterName);
};

必须放置小部件的页面调用以下代码

var widget = new PowerStatus({meterName: 'Widget 1', mainDiv: 'widget-power-status-1'});

用于所有小部件，从而获得每个小部件的处理。

在上面的代码中，当我点击div时，它会抛出一个

  

未捕获的TypeError：无法读取属性＆＃39; meterName＆＃39;未定义的

因为被传递的被叫方（此）实际上是一个＆＃39; div＆＃39;元素而不是PowerStatus对象。有什么线索是怎么回事？ jQuery是否通过了它所选择的div？ 另外，我想知道这是否是最简洁的方法。我对JS很陌生，欢迎任何建议。

Answer 1

您需要创建一个对象构造函数而不是使用对象文字。

function PowerStatus( opts ) {

  this.init = function( opts ){

  }

}

然后：

var widget = new PowerStatus( opts );
widget.init();