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

如果为import增加id，改为依据id判断，而ua在同一页面中根据此id来判断是否需要加载js，是否可行？
行为方式参考C语言的 #define 和 #ifdefine。

发自我的 Windows Phone
________________________________
发件人: John Hax<mailto:johnhax@gmail.com>
发送时间: ‎2015/‎3/‎15 13:57
收件人: 赵锦江<mailto:zhaojinjiang@me.com>
抄送: Hawkeyes Wind<mailto:hawkeyes0@hotmail.com>; W3C HTML5 中文興趣小組<mailto:public-html-ig-zh@w3.org>
主题: Re: 答复: 由webcomponents中引用外部JS的问题联想到的一个建议

锦江的邮件不知道为什么被gmail分到spam里去了，今天才翻出来。。。


话说多个html import规范本身存在未解决的问题，因此 FF 就不支持：

> Mozilla will not ship an implementation of HTML Imports. We expect that
> once JavaScript modules — a feature derived from JavaScript libraries
> written by the developer community — is shipped, the way we look at this
> problem will have changed.
>
--- https://hacks.mozilla.org/2014/12/mozilla-and-web-components/

就建议的 once 属性来说，也不解决问题。因为如果只在第一次运行，则第二次的这个import的html
document里就不会有$和jQuery对象。问题的关键是传统script除了往global上写属性外，没有其他方法export。



2015-03-11 17:34 GMT+08:00 赵锦江 <zhaojinjiang@me.com>:

> 是的
>
> 发自我的 iPad
>
> 在 2015年3月11日，15:15，Hawkeyes Wind <hawkeyes0@hotmail.com> 写道：
>
> 也就是说，根据src计算后的uri路径来判断？
>
>
>
>
>
> *Hawkeyes Wind*
>
>
>
> <image001.png> <https://affiliates.mozilla.org/referral/74558/>
>
>
>
> *发件人:* 锦江 赵 [mailto:zhaojinjiang@me.com <zhaojinjiang@me.com>]
> *发送时间:* 2015年3月11日 13:59
> *收件人:* HawkeyesAngel
> *抄送:* 'W3C HTML5 中文興趣小組'
> *主题:* Re: 由webcomponents中引用外部JS的问题联想到的一个建议
>
>
>
> 我设想的判断方式和HTML Imports中的去重方式类似，即如果先后多次引入了同一个脚本文件，则这个文件中的脚本只在第一次出现的地方执行
>
>
>
> 赵锦江
>
>
> 2015年3月11日 上午01:59，HawkeyesAngel <hawkeyes0@hotmail.com> 写道：
>
> hi 锦江，
>
>     你设想的once属性判断脚本是否已加载的标准是什么？
>
>
>
> 发自 Windows 邮件
>
>
>
> *发件人:* 赵锦江 <zhaojinjiang@me.com>
> *发送时间:* ‎2015‎年‎3‎月‎10‎日, ‎星期二 ‎22‎:‎29
> *收件人:* 'W3C HTML5 中文興趣小組' <public-html-ig-zh@w3.org>
>
>
>
> 大家好，
>
>
>
> 如题，背景是这样的：
>
>
>
> # 背景
>
>
>
> 在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/
>
>
>
> 以上
>
> 谢谢
>
>
>
> 赵锦江
>
>