前端开发中一些超实用的冷知识集锦

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

一、a标签的妙用

1、URL解析:通过a标签我们可以很方便的解析链接的hostpathnamesearchhash等信息,再配合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];

  • 支付宝二维码 支付宝
  • 微信二维码 微信

本文地址: /frontend-useful-skills.html

版权声明: 本文为原创文章,版权归 逐梦个人博客 所有,欢迎分享本文,转载请保留出处!

相关文章