Question

对快速问题表示歉意，但我想看一些允许同一页面中有多个实例的示例小部件。（关于这种技术的文章也会很好！）

Digg的小部件允许这个（http://about.digg.com/downloads/widgets），但我不知道其他任何人。

你呢？

感谢。

Answer 1

查看任何YUI widgets。例如，页面上有多个YUI增强的buttons。

使用每个实例数据创建多个实例

基本技术如下所示。

由于调用程序使用new，因此为每个窗口小部件创建了一个新的Larry.widget对象实例。因此每个小部件都有自己独立的对象“this”，并用它来存储每个实例的数据。

同时，对象的原型保存了这些功能。因此，所有小部件共享相同的功能，但具有一组数据。

Larry = {}; // Create global var
Larry.widget = function (options) {
  // create with new. Eg foo = new Larry.widget({an_option: true, id: "q_el"});
  // options: object with members:
  //   an_option
  //   id
  // Then call foo.xyz(); to get the widget to do xyz
  this.init(options);
};

Larry.widget.prototype = {
  constructor: Larry.widget,
  // Setting the constructor explicitly since we're setting the entire
  // prototype object. 
  // See http://stackoverflow.com/questions/541204/prototype-and-constructor-object-properties/541268#541268

  init: function(options) {
    this.id = options.id;
    this.an_option= options.an_option;

    this._function_a(); // finish initialization via a function.
  },  // remember that function init is a member of the object, so separate 
      // the functions using commas

  _function_a: function() {
     // This is a "private" function since it starts with _
     // Has access to "this" and its members (functions and vars)
     ....
  },

  xyz: function() {
     // This is a "public" function. 
     // Has access to "this" and its members (functions and vars)
     ...
  } // Note: NO TRAILING COMMA!
    // IE will choke if you include the trailing comma. 
}

多实例javascript小部件的示例（在同一页面上）？

1 个答案: