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

hi 锦江，

    你设想的once属性判断脚本是否已加载的标准是什么？




发自 Windows 邮件





发件人: 赵锦江
发送时间: ‎2015‎年‎3‎月‎10‎日, ‎星期二 ‎22‎:‎29
收件人: 'W3C HTML5 中文興趣小組'





大家好，




如题，背景是这样的：




# 背景




在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/





以上

谢谢




赵锦江