在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寫在一個單獨的文件中，從而在處理大型項目時保持我的快樂和我的理智。

我想出了這個解決方案：

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

唯一的區別是我現在從一個單獨的文件中加載文件作為腳本類型='模塊'（這樣我也可以將其他js文件導入到該文件中）。

它似乎有效，但我不確定它真的是最好的事情。 首先，我不確定類ComponentName的定義范圍以及是否存在沖突。 但是，更重要的是，我不確定加載順序是如何發生的。 腳本是否在應用程序的實例化時加載而不是通過延遲加載？

是否有一些精通Polymer世界的人有這方面的經驗，並且在設置組件時有一個從HTML中分離出js邏輯的最佳實踐的想法？ 或者，我列出的解決方案是否足夠？ 此外，任何有關聚合物經歷的動態加載過程的更多信息的參考都是有益的。

（我知道Polymer 3.0可以用es6模塊解決這個問題），但不幸的是我不能等到它出來。

Answer 1

以下是如何外化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>

您的類在全局范圍內定義，並且由於HTML導入重復數據刪除，JS文件只導入一次。 執行JS代碼時，會找到相應的<dom-module> 。 另外，別忘了

customElements.define(YourElement.is, YourElement);

在你的JS文件中。 請注意， <script ...>可以在<dom-module>內或之外，CSS導入必須在模板之外。 加載HTML文件時將加載該腳本。 這是關於延遲加載元素的一些信息 。

Answer 2

從另一個角度看這個：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>";
  }

    ...

}

關於這個和其他Polymer 2.0方面的推薦閱讀：Monica Dinculescus上的例子https://glitch.com/edit/#!/aspiring-chauffeur?path=views/index.html:1:0