如何使用javascript构造函数创建HTML元素

how to create a html element using javascript constructor?

本文关键字：HTML 元素 创建 构造函数 何使用 javascript      更新时间：2023-09-26

我了解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 !!!

，但让我们说，如果我想在实际的webapp中创建一个专辑，服务器发送一个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()
 })

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

您可以这样做:

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对象的属性，并且在创建的元素中具有所有原型属性和函数，这些属性和函数将在该DOM元素的范围内执行(因此您可以在该方法中引用this)。

例如，您将能够调用albom.open()，并弹出文本2的警报。

工作示例见:http://jsbin.com/isepay/10/edit

使用与对象键匹配的类创建一些模板文件，然后循环遍历这些键并填充模板文件。例如:

function Album (album) {
    this.template = $('#template').clone().removeAttr('id');
    this.album = album;
}
Album.prototype.html = function () {
    var i, val;
    for (i in this.album) {
      if (!this.album.hasOwnProperty(i)) {
        continue;
      }
      val = this.album[i];
      this.template.find("." + i).html(val);
    }
    console.log(this.template);
    return this.template;
}
var foo = new Album({
    title: 'Cheap Thrills',
    artist: 'Frank Zappa',
    genre: 'Rock and Roll'
});
$('#main').html(foo.html());

这是一个一刀切的尝试，尽管它并不能满足所有的需求。如果此解决方案不符合您的需求，您可以设置条件或其他条件。例如，如果数据是一个图像url，设置innerHTML不是很有用，所以你可以设置'src'属性，或者创建一个带有src属性的img标签。

模板文件可能像这样:

<div class="album">
  <div class="user"></div>
  <span class="foo"></span>
  <textarea class="bar"></textarea>
</div>

这里有一个快速的小提琴:http://jsfiddle.net/bxw7Z/

如果您不喜欢使用类，可以尝试使用data-attributes。

我认为你的方法是错误的。你应该使用任何客户端模板引擎(例如Handlebars.JS)来呈现响应JSON对象。

然后定义构造函数&像

这样的原型方法
function album(container){
    this.container=container
}
album.prototype.open=function() {
    container.show();
}
album.prototype.renderHTML=function(jdata) {
 //This is handlebar.js code
 template=$('#albumTemplate').text();
 compiledTemplate=Handlebars.compile(template);
 renderedTemplate=compiledTemplate(jdata);
 container.html(renderedTemplate);
}

一旦完成，你就有了专辑类ready &可以像这样开始使用

var container=document.getElementById('myalbum001'),
    album=new album(container);
container.on('click',function(e){
    album.render(jdata);  //You can get jdata by making AJAX call before this line
    album.open()  
}

我建议你快速浏览一下Handlebar.js

相关文章：