在Polymer 2.0组件中分离javascript和HTML的最佳实践

Polymer 2.0项目的典型代码示例如下所示：

class SeperateMarkup extends PolyElement {

    ...

  static get is() { return 'seperate-markup-el'; }

  static get template() {       
    // Maybe, have a look at 
    // Polymer.DomModule.import(SeperateMarkup.is, 'template');
    // to retrieve markup 

    return "<h1>someMarkup</h1>";
  }

    ...

}

：主持人{
显示：块；
}
类ComponentName扩展了Polymer.Element{
静态get是（）{return'组件名'；}
}
window.customElements.define（ComponentName.is，ComponentName）；

从另一个角度来看这一点：Polymer 2.0元素可以实现一个名为template的静态getter方法，因此您可以像这样分离HTML部分：

class SeperateMarkup extends PolyElement {

    ...

  static get is() { return 'seperate-markup-el'; }

  static get template() {       
    // Maybe, have a look at 
    // Polymer.DomModule.import(SeperateMarkup.is, 'template');
    // to retrieve markup 

    return "<h1>someMarkup</h1>";
  }

    ...

}

class-separatemarkup扩展了polyement{
...
静态get是（）{return'separate markup el'；}
静态获取模板（）{
//也许，看看
//Polymer.DomModule.import（separatemarkup.is，'template'）；
//检索标记
返回“someMarkup”；
}
...
}

---

推荐阅读Polymer 2.0的这一方面和其他方面：Monica Dinclescus的例子

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="your-element">
  <link rel="import" type="css" href="your-element.css">
  <template>
  </template>
  <script type="text/javascript" src="your-element.js"></script>
</dom-module>

---

在JS文件中。请注意，

可以在

内部或外部，CSS导入必须在模板外部。加载HTML文件时将加载脚本。关于延迟加载元素。

这只是一种观点，但根据我的经验，我不建议您这样做，我试过一次，发现范围和依赖性存在问题。这是一种有趣的方法。我没有意识到get-template方法在Polymer 2.0中是友好的。我会尝试一下，看看我能想出什么。我认为这是最有意义的。由于crazypeter的答案不适用于模板标记之外的css链接，我将重新路由我的代码，使其更像这样——好处是它更接近Polymer 3.0的需要，这是我已经准备好的解决方案。唯一的区别是，我在模板标签中有我的css。那么，这会使css成为全局的，而不是封装在模板中吗？因此，我尝试了这个方法——使用模板标记外部的css链接，但在dom模块标记中。它实现了我所期望的，将其设置为全局名称空间。因此，无法访问组件中的元素。如果它位于

中，则CSS不是全局的。从那以后，我就一直使用这种方法，而且效果很好。或者，如果您想将其放入模板中，请使用以下导入：

。您的问题主要是关于将JS外部化，CSS只是在顶部额外添加了一点。这是正确的答案，虽然OneBitAhead并没有真正回答这个问题，但它提供了一个替代方案，甚至没有讨论如何导入.js文件。我仍然相信OneBitAhead给出的答案是最好的。它的优雅，适用于聚合物2.0，重要的是，它正在按照聚合物3.0的发展方向前进。但是，对于阅读本文的其他人来说，这两种解决方案都是可行的。我想这是一个偏好的问题。