首页 文章

在Polymer 2.0组件中将JavaScript与HTML分离的最佳实践

提问于
浏览
1

为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模块解决这个问题),但不幸的是我不能等到它出来 .

2 回答

  • 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

  • 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文件时将加载该脚本 . Here is some info关于延迟加载元素 .

相关问题