Skip to main content
 首页 » 编程设计

具有 JavaScript 依赖项的 polymer 元素

2024年04月30日11kuangbin

我创建了a Polymer element for rendering 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"> 

注意:这些路径假设我的元素(及其依赖项)是与 Bower 一起安装的,因此它们应该都是 bower_components 中的同级元素。

请您参考如下方法:

私有(private)资源应安装在您的组件文件夹中并直接使用。但是共享资源,即其他组件也想使用的资源(例如 marked ),应该作为依赖项处理。

我们建议采用两种约定来处理共享依赖项:

  1. 始终使用规范路径,即 ../<package-name> (你已经这样做了)。按照惯例,Polymer 需要一个平面依赖文件夹(由 Bower 支持),因此您需要的任何资源必须始终位于此路径上。
  2. 引用共享资源的导入

在这种情况下,

<script src="../marked/lib/marked.js">

符合第一个约定。您的组件可以依赖marked包并期望它存在于 ../ .

第二个约定支持共享。如果项目中的多个组件使用 script标记加载库,该库将加载多次。另一方面,导入会进行重复数据删除,因此不会出现此问题。

例如,如果所有组件都加载 marked标准方式:

<link rel="import" href="../marked-import/marked-import.html">

那么您将只加载一份脚本副本。

此外,导入允许您间接访问实际资源。例如,通常 marked-import将取决于marked并使用 script标签来加载 JavaScript。但事实上,任何特定的项目作者都可以修改本地marked-import.html从 CDN 或任何其他位置加载主代码。通过导入来间接访问所有访问,我们创建了单点控制。

今天,marked而其他库不包含导入文件,因此我们必须填补这些空白。此外,它还需要与其他组件进行协调(就任何特定共享资源的标准导入名称达成一致)。当(并且如果)这些惯例被采用时,这些问题将会随着时间的推移而减少。

因此,您安装的组件将如下所示:

/components 
  /mark-down - depends on marked-import 
  /marked-import - (controlled by user, can just depend on `../marked`) 
  /marked