<script>关闭标签的写法所引发的疑案

自从有了XHTML,很多开发者会本着尽善尽美精益求精的态度,开始对代码进行一系列的修正和优化了。
比如,标签都要关闭了:
<img src="xxx" />

 

这本来没有错,可这时候突然冒出个新问题来:
有些代码看似没有错误合乎语法,可就是无法达到预期的效果,典型症状之一就是脚本“缺少对象”/“变量未定义”等异常。

 

这极有可能是“优化”后的代码产生的浏览器兼容性bug:某些标签的关闭“优化”要慎用。

比如<script>标签,当前部分浏览器就不支持<script />这种在开始标签中直接关闭的写法。

我们很容易会认为,引用外部脚本文件的<script>没有内容,那是否可以直接在开始标签中关闭<script>,写成下面这样呢?
<script type="text/javascript" src="xxx.js" />
实测结果告诉我们,这样做是有问题的。

某些浏览器不认这种写法,它们会将紧接在<script />标签后面的内容都当作脚本内容来处理,直到遇见下一个</script>关闭标签。

 

避免这个问题也很简单:
对于<script>标签,永远都使用单独的关闭标签</script>,这样所有浏览器都能够按照预期的效果来解析:

<script type="text/javascript" src="xxx.js"></script>

 

具有类似问题的标签还有一些,比如<iframe>。解决办法同上。

进一步说,想要彻底解决这一类问题的话,请将所有标签的开始和结束都分开写吧:
<img src="xxx"></img>
<hr></hr>

顺带一提,这样还能解决另一个问题:

在开始标签中关闭的话,斜杠前必须留有空格——很多时候人们会很容易漏掉这个空格,据说这样某些浏览器的解析也会出问题。

既然我所有的开始结束标签都分开写了,那这个问题不是自然就没有了么?

 

这么做太极端?那就只记住这几个特例吧:首先就是<script>和<iframe>。

 

 

测试你的浏览器是否支持<script />这种写法:

目前看来,WinXP SP3下IE6/7/8和FF3都有这个问题的,Opera10/Chrome5/Safari5则没有。

不过另一个<iframe>标签同样的问题,上面这些浏览器则好像无一幸免了。

### Vue3 与 Vue2 在 `<script>` 标签中的区别 Vue3 和 Vue2 在 `<script>` 标签的使用方式上有显著差异,这主要体现在 Vue3 引入了 `<script setup>` 语法,以及对组合式 API 的支持。 在 Vue2 中,组件的逻辑主要通过选项式 API(Options API)组织,所有数据、方法、生命周期钩子等都必须定义在 `data`、`methods`、`mounted` 等特定的选项中。`<script>` 标签通常用于导出一个对象,该对象包含这些选项。例如: ```javascript export default { data() { return { message: 'Hello Vue2' } }, methods: { greet() { console.log(this.message) } } } ``` 而在 Vue3 中,除了支持传统的 `<script>` 标签外,还引入了 `<script setup>` 语法。这种新语法为组件逻辑提供了一种更简洁和声明式的写法,特别适合使用组合式 API(Composition API)的场景。`<script setup>` 中的代码会自动绑定到组件实例上,无需显式地导出一个对象。例如: ```vue <script setup> import { ref } from 'vue' const message = ref('Hello Vue3') function greet() { console.log(message.value) } </script> ``` 这种方式简化了组件逻辑的编写,使得代码更加直观和模块化。此外,Vue3 还支持在同一个组件中同时使用 `<script>` 和 `<script setup>` 标签,以便于存放字面量或类型声明等信息。例如,可以在 `<script>` 标签中定义组件名称或类型,并在 `<script setup>` 中使用这些变量: ```vue <script lang="ts"> export const componentName = 'MyComponent' export default { name: componentName, inheritAttrs: false, customOptions: {} } </script> <script setup lang="ts"> console.log(componentName) </script> ``` 同样地,可以在 `<script>` 标签中定义 TypeScript 类型,并在 `<script setup>` 中使用这些类型: ```vue <script lang="ts"> export type Test = { aaa: string } export {} </script> <script setup lang="ts"> const obj: Test = { aaa: '1' } </script> ``` 这些特性使得 Vue3 在处理大型项目时更具优势,尤其是在代码组织和类型安全方面。 ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值