Question

我的这个课程运作良好，但我很好奇是否可以更改它，以便在我的模板中，我可以输入name而不是this.name。使用ES5类风格，我认为您可以执行类似this.template = function(content, i) {}的操作，但我还没有this.template(content, i) {}工作。我甚至可以这样做，或者每次我想从我的json返回名称密钥时我都会写this.name吗？

person = class {
  constructor(data) { Object.assign(this, data); }
  template(content, i) {
    content.push(`
      <div class="card">
        <div class="card-block">
          ${key('<h4 class="card-title">', this.name, '</h4>')}
          ${key('<h6 class="card-subtitle text-muted">', this.title, '</h6>')}
        </div>
        <ul class="list-group list-group-flush">
          ${each('<li class="list-group-item">', this.school.reverse(), '</li>')}
        </ul>
        <div class="card-block">
          <a class="btn btn-secondary" href="#" role="button">Bio</a>
        </div>
      </div>
    `);
  }
};

Answer 1

是

  template(content, i) {
    const {name, title, ...} = this;
    content.push(`
      <div class="card">
        <div class="card-block">
          ${key('<h4 class="card-title">', name, '</h4>')}
          ...

如果不够简短，请坚持使用自定义模板系统。

对于this.template，比较不正确。 template(content, i) { ... }是类方法的语法，它是Class.prototype.template = function template(content, i) { ... };

的快捷方式

Answer 2

Use desctructing Es6

person = class {
  constructor(data) { Object.assign(this, data); }
  template(content, i) {
    let {name} = this;
    content.push(`
      <div class="card">
        <div class="card-block">
          ${key('<h4 class="card-title">', name, '</h4>')}
          ${key('<h6 class="card-subtitle text-muted">', this.title, '</h6>')}
        </div>
        <ul class="list-group list-group-flush">
          ${each('<li class="list-group-item">', this.school.reverse(), '</li>')}
        </ul>
        <div class="card-block">
          <a class="btn btn-secondary" href="#" role="button">Bio</a>
        </div>
      </div>
    `);
  }
};

在Javascript ES6课程中'this.name'，它可以只是'名字'吗？

2 个答案: