前端冷知识:<base /> 属性知一二

175 阅读3分钟

这是我参与更文挑战的第12天,活动详情查看: 更文挑战

一、前言

先声明,这是一个系列,而是记录一些我收集的或者小伙伴提到的一些前端冷知识。

主要是一些冷门的属性,会列举介绍出在特定情况下,可以考虑选择使用的一些属性。

HTML:<meta />属性介绍

MDN原文介绍点这里

摘要: 指定用于一个文档中包含的所有相对URL的基本URL。一份中只能有一个<base>元素。

href: 用于文档中相对 URL 地址基础 URL。如果指定了该属性,这个元素必须写在其他任何属性值是 URL 的元素之前。

使用

提到HTML,相信不少小伙伴,都在html标记语言中的<head></head>设置过一些属性,除了常见的title设置标题,link引入css样式表意外,就是meta设置页面缩放这些吧。

那么本文首先要讲的就是在head标签中设置<base />修改默认根路径。

先看一段示例代码

<body>
    <img url="https://t7.baidu.com/it/u=1831846009,1460005090&fm=193&f=GIF" />
</body>

在上面的示例代码中,引入了一张来自百度图片的素材。

看起来没什么不正常的。

但是在真实项目中,我们往往会引入大量的图片,并且为了项目考虑,会通过cdn引入。

那么问题就来了,如果每次都需要输入地址,是不是过于繁琐了?

于是我们想到了拼接地址

<img  :url="baseURL + imgURL"/>

在使用框架开发时,上面这种拼接地址的写法是经常会用到的。但是每次都需要去拼接。

那么现在,它来了,一个冷门的属性。 先看示例

<head>
    <base href="https://img.url.com" />
</head>
<body>
    <img :url="imgURL" />
</body>

如上所示,先在base中设置一个href属性,之后在正常配置图片地址,不过这时候没做地址拼接。

效果如下图。

image.png

自动拼接了地址。让代码书写更简单, 如果变更了地址,直接找到根文件,修改<base />就可以了。

缺点

这个属性呢,也并不是完美的,看似好用的背后,却也有着巨大的缺陷,那就是只能设置一个。

如果真的如前文所说,用于引入图片,设置了图片的CDN地址的话,那么其他地方也会默认优先使用这个地址。

但也并不说就全部都如此了,如果是拼接了全部域名的话, 默认还是以设置的地址跳转或者引入的。

另外,值得一提的时候,虽然文中以图片距离,但是默认是a,img,form,link都会优先以该地址为默认地址引入

但如果是用全地址引入的话, 则是正常引入。

如果能适当的选择一个大量使用的地址的话,还是可以考虑用这个属性统一管理的。

另外,如果是通过框架开发的话, 就完全不适用了。

因为用框架开发的话,势必会用到路由,这就会导致跳转路由也会引用改域名。然后带来不可控的结果。

总结。

冷知识,带来的一种新的眼界, 和一些真的很冷,甚至被临近淘汰的属性。

不过如果能对这些属性背后的原理进行深入思考的话, 是不是可以手动实现一个域名拦截,然后类似的效果?

或者看完之后,回想之前的项目中,是不是有适用这一属性的地方呢?