使用javascript创建可重用的小部件 [英] Creating reusable widgets with javascript

问题描述

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

I'm working on creating small, embeddable widgets which have a handle outside of their own JS files.

页面结构

例如，我有一个页面可能包含n个 power-widget 。 'n'由服务页面的Web服务器确定。
' power-widget '只不过是一个带有设备名称的div，它的当前功耗就是它。每5秒通过ajax更新当前读数。

For example, I have a page which may contain n-number of 'power-widget's in it. 'n' is determined by the web server serving the page. A 'power-widget' is nothing but a div with the name of a device and it's current power consumption on it. The current reading is updated via ajax every 5 secs.

注意：每个页面可以有不同的类型小部件，但下面的图像只有一种类型的小部件。

NOTE: Each page can have different 'types' of widgets, though the image below has only one type of widget.

小工具

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

Each green box is a widget which is initialized on page load and takes the device name, color etc as the parameters. Each type of widget, 'power-widget' in this case, has its own JS and CSS files (along with the HTML structure) which are loaded asynchronously once the page detects that those are required. Hence, the same widget can be rendered on any page within my website.

问题

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

I have written code to detect and load the required JS, CSS and HTML content of each widget and place it in it's desired div. I wrote some code to create a 'class-like' structure for the widget which I can instantiate and write methods (like updating the readings) in.

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

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

The page inside which the widgets have to be placed calls the following code

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

，从而获得每个小部件的处理。

for all the widgets, thereby getting a handle on each.

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

In the above code, when I click on the div, it throws a

Uncaught TypeError：无法读取属性' meterName'未定义

Uncaught TypeError: Cannot read property 'meterName' of undefined

因为传递的被调用者（ this ）实际上是'div'元素，不是PowerStatus对象。有什么想法发生了什么？是jQuery传递它的选定div吗？
另外，我想知道这是否是最简洁的方法。我是JS的新手，欢迎任何建议。

because the callee (this) being passed is actually a 'div' element and not the PowerStatus object. Any clue what's going on? Is jQuery passing it's selected div? Also, I wanted to know if this is the cleanest way to go about the entire thing. I'm pretty new to JS and would welcome any advice.

推荐答案

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

You need to create an object constructor rather than using object literals.

function PowerStatus( opts ) {

  this.init = function( opts ){

  }

}

然后：

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

这篇关于使用javascript创建可重用的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！