具有JavaScript依赖关系的聚合物元素
我已经创build了一个Polymer元素来渲染markdown ,它使用了marked.js库。 我想知道,什么是它的依赖加载推荐的方式?
我应该只使用脚本标签吗?
<script src="../marked/lib/marked.js"></script>
或者,将所有的依赖关系放入html导入并链接到该文件会更好。 在这种情况下,我只有一个依赖,但我可以轻松拥有更多。
<!-- in scripts.html --> <script src="../marked/lib/marked.js"></script> <script src="../foo/foo.js"></script> <script src="../bar/bar.js"></script> <!-- in mark-down.html --> <link rel="import" href="scripts.html">
注意:这些path假定我的元素(及其依赖关系)正在使用bower安装,所以它们都应该是bower_components
兄弟。
私人资源应该安装在组件文件夹中,并直接使用。 但是共享资源,其他组件我也想使用的那些资源(如marked
),应该作为依赖处理。
我们build议处理共享依赖的两个约定:
- 总是使用
../<package-name>
的规范path (您已经这样做了)。 按照惯例聚合物需要一个平坦的依赖文件夹(由Bower支持),所以你需要的任何资源必须始终在这个path上。 - 请参阅共享资源的导入 。
在这种情况下,
<script src="../marked/lib/marked.js">
符合第一个公约。 你的组件可以依赖于marked
包,并期望它存在../
。
第二项公约支持共享。 如果项目中有多个组件使用script
标记来加载库,则该库将加载多次。 另一方面,import是不重复的,所以你没有这个问题。
例如,如果所有组件加载marked
为标准方式:
<link rel="import" href="../marked-import/marked-import.html">
那么你将只有一个脚本的副本加载。
此外,导入允许您间接的实际资源。 例如,通常marked-import
将取决于marked
并使用script
标记来加载JavaScript。 但事实上,任何特定的项目作者都可以修改本地的marked-import.html
以从CDN或从任何其他位置加载主代码。 通过导入所有的访问,我们创build一个单一的控制点。
今天, marked
和其他库不包括导入文件,所以我们必须填补这些空白。 此外,还需要与其他组件协调(对于任何特定的共享资源,标准导入名称是什么)。 作为(如果)这些公约被采用,这些问题将随着时间的推移而减less。
所以,你安装的组件看起来像这样:
/components /mark-down - depends on marked-import /marked-import - (controlled by user, can just depend on `../marked`) /marked