由webcomponents中引用外部JS的问题联想到的一个建议

大家好,

如题,背景是这样的:

# 背景

在webcomponents[1]中,我们可以通过HTML Imports的方式把代码分成多个文件加载,每个文件里定义一个或多个组件。
不同的组件可以依赖相同的外部JS库,比如组件A和组件B都依赖jQuery。

这个时候,我能想到的比较完备的写法可能是:
1. 写一个独立的组件jquery.html:

```html
<script src="jquery.js"></script>
```

2. 组件A和组件B都用HTML Imports的方式引入jquery.html:

a.html:
```
<link rel="import" href="jquery.html">
<script src="jquery.ui.js"></script>
(组件A的代码)
```

b.html:
```
<link rel="import" href="jquery.html">
(组件B的代码)
```

如果考虑到将来的可扩展性,jquery.ui.js最好也写成一个jquery.ui.html的HTML Imports。
但是这种写法很麻烦,尤其对于第三方的JS库来说,没有现成的HTML Imports供你引用,都得自己写,每次多用到一个外部JS,你可能就得自己多写一个HTML Imports文件

# 建议

给<script>标签加入一个once的attribute,如果有once这个attribute,则相同的JS环境下,相同src的<script>只加载并执行一次,和<import rel="import">是一样的会“去重”

这样的话之前的代码可以改写成这样:

jquery.html 不再需要了

a.html:(建议所有的js依赖都加once)
```
<script src="jquery.js" once></script>
<script src="jquery.ui.js" once></script>
(组件A的代码)
```

b.html:
```
<script src="jquery.js" once></script>
(组件B的代码)
```

# 总结

总结一下就是建议给<script>标签加入once的attribute,解决多个webcomponents中外部JS依赖管理 (同时绝大多数已有的外部JS没有自己的HTML Imports) 的问题

[1] http://w3c-html-ig-zh.github.io/webcomponents/

以上
谢谢

赵锦江

Received on Tuesday, 10 March 2015 14:21:54 UTC