为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 回答
从另一个角度看这个:Polymer 2.0元素可以实现一个名为template的静态getter方法,所以你可以像这样分开HTML部分:
关于本和其他Polymer 2.0方面的推荐阅读:Monica Dinculescus上的例子https://glitch.com/edit/#!/aspiring-chauffeur?path=views/index.html:1:0
以下是如何外化JS和CSS .
您的类在全局范围内定义,并且由于HTML导入重复数据删除,JS文件只导入一次 . 执行JS代码时,会找到相应的
<dom-module>
. 另外,别忘了在你的JS文件中 . 请注意
<script ...>
可以位于<dom-module>
内部或外部,并且CSS导入必须位于模板之外 . 加载HTML文件时将加载该脚本 . Here is some info关于延迟加载元素 .