前端开发中一些超实用的冷知识集锦-逐梦个人博客

前端开发是一个快速发展的领域，每天都会有新技术、新工具、新实践被推出，但是有许多开发中的冷知识却一直被忽视，本文我们将介绍一些超实用的冷知识，帮助开发者更好的开发和调试应用。

一、a标签的妙用

1、URL解析：通过a标签我们可以很方便的解析链接的host、pathname、search、hash等信息，再配合URLSearchParams即可实现一个通用的URL解析函数：

function parseUrl(url) {
    const a = document.createElement('a');
    a.href = url;
    const { hostname, pathname, search, hash, protocol, port } = a;
    return {
        url,
        protocol,
        hostname,
        port,
        search,
        hash,
        pathname,
        host: hostname,
        query: new URLSearchParams(search)
    };
}

2、文件下载：通过a标签的download属性我们可以实现一个通用的文件下载函数：

function download({ url, name }) {
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    a.click();
}

需要注意的是，如果执行函数的域名和待下载的文件不同域，则name设置无效。

二、通过元素的id直接访问元素节点

浏览器会自动为设置了id的元素在JavaScript执行环境中添加对应的全局变量，所以我们可以直接通过元素的id访问元素节点，比如：

<div id="dean"></div>
<script type="text/javascript">
console.log(dean);
</script>

通过dean变量我们可以直接访问id为dean的div节点，但建议只在调试时使用该特性，不建议在生产代码中使用，另外需要注意的是如果id命名中带有中横线“-”需要通过window['aa-bb']来访问节点。

三、Console面板中特殊的$变量

在浏览器控制台的Console面板中有一组以$开头的变量，他们拥有神奇的魔力。

1、$：如果我们没有在代码中定义过$变量 (例如 jQuery )的话，它在Console中就是document.querySelector的别名，我们可以通过$('.className')的方式来获取满足条件的第一个节点。

2、$$：它在Console中是document.querySelectorAll的别名，我们可以通过$$('.className')的方式来获取满足条件的所有节点。

3、$0-$n：$0指向在控制台Element中当前选择的节点，$1指向上一个选择的节点，$2指向上上个选择的节点，以此类推。

4、$_：指向上一次计算的结果，使用方式如下图所示：

四、加载CDN文件时，可以省掉协议

我们在做网络优化时可能会加载一些CDN资源，在通过script标签加载CDN资源时我们可以省掉协议比如http/https，浏览器会根据当前加载CDN页面所在网站的协议去自动选择使用http还是https，例如：

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

五、利用script标签可以保存任意信息，作为后期模板使用

<script type="text" id="template">
<h1>This won't display</h1>
</script>
<script>
    const html = document.getElementById('template').innerHTML;
    console.log(html);
</script>

六、利用Math.random和toString快速生成随机id

function randomId(len = 32) {
    let str= '';
    for (; str.length < len; str+= Math.random().toString(36).substr(2));
    return str.substr(0, len);
}
console.log(randomId()); // xo37aft6qt9x8lz48mltiq9t7acairze

七、通过URL.createObjectUrl快速生成uuid

function uuid() {
    return URL.createObjectURL(new Blob()).substr(-36);
}
console.log(uuid()); // 33665476-b7d1-4b4b-b517-7d4ea967e75d

八、利用位运算来将浮点性数转化为整性

通过num | 0和~~num我们可以完成小数到整数的转换且效率方面要比同类的parseInt , Math.round要高很多。

const foo = (12.4 / 4.13) | 0; //结果为3
const bar = ~~(12.4 / 4.13); //结果为3

九、不声明中间变量完成变量值交换

对于交换两个变量的值，常规做法是通过声明中间变量来实现，如下：

let a = 3;
let b = 4;
let temp;
temp = a;
a = b;
b = temp;

而通过数组我们可以快速的完成变量值交换：

let a = 3;
let b = 4;
[a, b] = [b, a];