在 Polymer 2.0 组件中将 javascript 与 HTML 分开的最佳实践

Question

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

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

<dom-module id='component-name'>
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <slot></slot>
  </template>
  
  <script>
    class ComponentName extends Polymer.Element {
      static get is() { return 'component-name'; }
    }
    
    window.customElements.define(ComponentName.is, ComponentName);
  </script>
</dom-module>

我想将 javascript 分开，以便将 ComponentName 写入单独的文件中，从而在处理大型项目时让我的 linters 开心并检查我的理智。

我想出了这个解决方案：

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

<dom-module id='component-name'>
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <slot></slot>
  </template>
  
  <script type='module' src='./componentname.js'></script>
</dom-module>

唯一的区别是我现在从一个单独的文件加载文件作为脚本类型='module'（这样我也可以将其他 js 文件导入其中）。

它似乎有效，但我不确定它是否真的是最好的做法。首先，我不确定 class ComponentName 的定义范围是什么，以及是否存在冲突。但是，更重要的是，我不确定加载顺序是如何发生的。脚本是否在应用程序实例化时加载，而不是通过延迟加载？

是否有精通 Polymer 世界的人对这类事情有经验，并且知道在设置组件时将 js 逻辑与 HTML 分离的最佳实践？或者，我列出的解决方案是否足够？此外，任何有关了解更多有关 Polymer 经历的动态加载过程的参考资料都是有益的。

（我知道 Polymer 3.0 可能会解决 es6 模块的这个问题），但不幸的是我等不及它出来了。

Answer 1

从另一个角度来看：Polymer 2.0 元素可以实现名为模板的静态 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>";
  }

    ...

}

关于这个和其他 Polymer 2.0 方面的推荐阅读：https://glitch.com/edit/#!/aspiring-chauffeur?path=views/index.html:1:0

上的 Monica Dinculescus 示例

Answer 2

这里是如何外化JS和CSS。

<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>

您的 class 在全局范围内定义，并且由于 HTML 导入重复数据删除，JS 文件仅导入一次。执行JS代码时，会找到对应的<dom-module>。还有，别忘了

customElements.define(YourElement.is, YourElement);

在你的 JS 文件中。请注意 <script ...> 可以在 <dom-module> 内部或外部，并且 CSS 导入必须在模板外部。加载 HTML 文件时将加载脚本。 Here is some info 延迟加载元素。

在 Polymer 2.0 组件中将 javascript 与 HTML 分开的最佳实践

Best Practice in separating javascript from HTML in Polymer 2.0 components

javascript

polymer

polymer-2.x