3

我了解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()
 })

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

4

3 回答 3

2

您可以执行以下操作：

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

于 2013-03-21T08:30:48.190 回答
0

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

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/

如果您不喜欢使用类的想法，请尝试使用数据属性。

于 2013-03-21T08:13:33.843 回答
-2

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

于 2013-03-21T08:25:47.460 回答