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