排错：Svelte应用的 <head> 中出现重复元素
症状
打开 Svelte 应用的 html 源码，有多个重复元素（内容完全重复）存在，比如<script>和 <style>。
原因
这种情况十有八九是因为在一个非全局的 svelte 组件中使用了 <svelte:heade>，并且这里有一个尚未关闭的 bug。
解决
了解原因之后，处理方式自然也就出来了。通常有两个选择：
- 方法 1：将
<svelte:heade> 部分内容挪到全局组件中，比如 App.svelte。
- 方法 2：在组件的
onDestroy 方法中手工移出相关元素。
使用方法 1 时请注意
有些外部脚本可能在加载时有初始化的回调函数。比如 Google Map API，其 url 形式如下：
<script
src="https://maps.googleapis.com/maps/api/js?key={GOOGLEMAP_KEY}&libraries=places&callback=initMap&solution_channel=..."
async
defer
></script>
其中，callback 指定的就是页面自定义的回调函数，在 js 加载成功之后执行。
针对于此，若采用方法 1，则可以（简单粗暴地）：
-
在全局组件或外部首页（比如 routify 的 __app.html）
<script src="https://maps.googleapis.com/maps/api/js?key={GOOGLEMAP_KEY}&libraries=places&solution_channel=..."></script>
注意：去掉了延迟加载和 callback 参数。
-
在对应组件的 onMount 中调用 initMap 函数，由于此时 js 已经加载，再调用初始化函数自然可以。
当然，实际情况复杂多变，这里也只能提供解决问题的方法和思路。归根结底，只有知道了原因，办法也就呼之欲出了。
-
转载
- 学分: 0
- 分类: 以太坊
- 标签:
以太坊
错误处理
