javascript - 如何使用 javascript 构造函数创建一个 html 元素？

Question

我了解javascript构造函数的基本思想，例如

function Person(name){
  this.name = name
}

Person.prototype.sayhi = function(){
  return this.name+' says hi !!! '
}
var bob = new Person('bob')
bob.name // bob
bob.sayhi // bob says hi !!!

但是可以说如果我想在真正的 web 应用程序中创建一个相册，服务器会发送一个 json 数据数组

like:[{'id':1,'album_name':'test','user':'user_id'}]

，每个数组项应该是一个专辑，现在我想将此专辑构造为 div 元素 使用这个数组项，我该怎么做？

我想要这个的原因是，如果我可以将专辑构建为真正的 div 元素，那么我可以做到这一点

 Album.prototype.open = function(){
    //some action
 }
 album = new Album(jdata)

 album.click(function(){
    this.open()
 })

这可能吗，如何定义这个构造函数，我认为这可能与构造函数返回值有关，这真的让我很困惑!

Answer 1

您可以执行以下操作:

var i, data, Albom, albom;

Albom = function Albom(data) {
  var i,
      div = document.createElement('div');

  for(i in data) {
    div.setAttribute('data-'+i, data[i]);
  }

  div.innerHTML = data.album_name;

  for(i in this) {
    if(typeof this[i] === 'function') {
      div[i] = this[i].bind(div);
    } else {
      div[i] = this[i];
    }
  }

  return div;
};

Albom.prototype.open = function open() {
  alert(this.getAttribute('data-id'));
};

data = [
  {'id':1,'album_name':'test1','user':'user_id1'},
  {'id':2,'album_name':'test2','user':'user_id2'}
];

for(i in data) {
  albom = new Albom(data[i]);
  document.body.appendChild(albom);
}

现在 new Albom(data)将生成新的 DOM 元素，其属性来自提供的 data对象，并将在创建的元素内拥有所有原型(prototype)属性和函数，这些原型(prototype)属性和函数将在此 DOM 元素的范围内执行(因此您可以在该方法内引用 this)。

例如，您可以调用 albom.open()和带有文本的警报 2会弹出。

您可以在以下位置查看工作示例: http://jsbin.com/isepay/10/edit