如何使用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

我认为你的方法是错误的。您应该使用任何客户端模板引擎（例如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); 
} 

一旦做到这一点，你必须专辑类准备&可以开始使用它像这样

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

Answer 2

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

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代替。

Answer 3

您可以执行以下操作：

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)将产生具有从提供data对象属性和将具有将在该DOM元素的范围来执行创建的元素内的所有原型的性质和功能的新的DOM元素（这样可以参考this内部的方法）。

例如，您将能够拨打albom.open()，并且会弹出文本为2的提醒。

工作例如，你可以看到：http://jsbin.com/isepay/10/edit