- From: 锦江 赵 <zhaojinjiang@me.com>
- Date: Tue, 10 Mar 2015 14:21:24 +0000 (GMT)
- To: public-html-ig-zh@w3.org
- Message-id: <5a5a3481-9c41-4d64-916f-0d0724ca6a84@me.com>
大家好, 如题,背景是这样的: # 背景 在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