技术分享：前端开发小技巧

一般人不知道的黑科技

今天, 我们来说几个前端比较冷门, 不是很常用的小玩意

标签语句

JavaScript 语言是允许语句前面有标签的, 但是和 html 的标签不是一个意思
相当于一个定位符的作用

比如看一下下面这段代码

for (var i = 1; i <= 3; i++) {
    console.log('开始吃第 ' + i + ' 个包子')

    for (var j = 1; j <= 3; j++) {
        if (i === 2 && j === 2) {
            console.log('有虫子, 不吃了')
            break
        }
        console.log('    第 ' + i + ' 个包子吃第 ' + j + ' 口')
    }
    console.log('第 ' + i + ' 个包子吃完了')
    console.log('-------------------')
}

我们在吃包子的时候, 吃到第二个包子的第二口的时候

发现有一个小虫子, 那么这个包子就不吃了, 我们直接 break 就好了

会结束当前循环, 继续 i++

假如说, 我们吃到第二个包子的第二口的时候, 发现是半条虫子

那么我们可能后面的所有包子都不吃了

但是 break 只能跳出当前循环, 怎么办呢, 我们就可以在 for 循环语句前面放上一个定位符

再来看代码执行结果, 就会跳转到指定定位符位置了

console.table()

思考一下平时在开发过程中, 我们的代

码中出现频率比较高的一段代码是什么

console.log('xxx')

因为各种各样的原因, 我们的代码一旦在浏览器运行总是各种红色

所以很多小伙伴会选择在控制台打印一下看看

看看我遍历的是个啥
看看我获取的元素是个啥
看看我请求回来的东西是个啥
看看我算的数是不是 NaN
...

但是遇到类似下面这样的代码

var obj = { name: 'Jack' }
console.log(obj)
// ...

obj.name= 'Rose'
// ...

console.log(obj)

在控制台打印出来的可能不是我们想要的

如果只有一两个属性, 那么没啥问题, 我不用打开就能看到结果

但是一旦对象中属性变得多了, 那么我们展开以后看到的结果就会误导我的代码了

这个时候, 我们可以选择使用 console.table() 来进行控制台展示

var obj = { name: 'Jack' }

console.log(obj)
// ...

obj.name= 'Rose'
// ...

console.log(obj)

展示出来的结果是这样的

比刚才舒服多了

但这个东西也不是任何场景下都好用

我们来打印一个 DOM 元素看看

var div = document.getElementById('box')
console.table(div)

丧心病狂的展示方法 !!!

contenteditable

我们在页面上写的大部分标签都是不可以编辑的

但是一旦你给元素加上 contenteditable 属性以后, 就变成可以编辑的了

<div contenteditable>
    hello world
</div>

我们可以写一个内联样式, 写在 body 标签里面

<body>
    <style contenteditable style="display: block; height: 100px; overflow: auto;">
        div { width: 100px; height: 200px; }
    </style>
    
    <div>
        hello world
    </div>
</body>

那么我们就可以直接在页面上测试 css 样式了

calc()

我们再写 css 的时候, 经常会遇到一个小问题

就是我已经写了宽度 25% 了

然后发现, 你发现还有 margin: 0 10px

这该怎么办呢？

不写 25% 了, 拉个计算器过来, 我算数还不行吗

归零 ... 归零 ... 归零 ...

我们也可以选择使用一个
calc()

li {
    width: calc(25% - 20px);
}

web worker

JS 是单线程的, 那么到底能不能同时做两个事情呢

利用web worker是可以的

web worker 就给我提供了一个多线程环境

可以在主线程环境下, 开启一个 worker 环境线程
我们可以将一些比较费时间的任务交给 worker 线程来做
我们的主线程还是继续做主线程的事情
这样, 就可以达到两个事情同时开始
通常, 我们都会在 worker 线程里面进行一些计算量比较大的任务
在主线程里面进行页面交互行为, 这样不会被阻塞或者拖慢
来看下面一段代码

console.time('test for')
console.time('test timeout')

for (var i = 0; i < 1000000000; i++) { }

console.timeEnd('test for')

setTimeout(() => {

    console.log('定时器')

    console.timeEnd('test timeout')

}, 2000)

写了一个循环, 一个定时器

由于循环要花好久才能执行结束。定时器会在循环结束后开始计时执行

也就是我们的定时器被循环阻塞了

利用 web worker 来操作一下

把循环放在一个 JS 文件里面

// worker.js
console.time('test for')

for (var i = 0; i < 1000000000; i++) { }

console.timeEnd('test for')

在主线程中创建一个 worker 线程任务

<script>
    
    console.time('test timeout')

    new Worker('./worker.js')

    setTimeout(() => {
      console.log('定时器')
      console.timeEnd('test timeout')
    }, 2000)

</script>

激动人心的时刻, 我们来运行一下看看

报错! 竟然还需要一个服务器环境

好吧我认了

发现, 确实循环不再阻塞定时器了

我要怎么拿到 worker 任务里面的计算结果呢

可以利用 poseMessage 和 onMessage 来实现
在 worker.js 里面发出结果

// worker.js
console.time('test for')

var sum = 0
for (var i = 0; i < 1000000000; i++) {
    sum += i
}

postMessage(sum)

console.timeEnd('test for')

在主线程接收结果

<script>
    console.time('test timeout')
    var w = new Worker('./worker.js')
    
    w.onmessage = function (e) {
        console.log(e.data)
    }

    setTimeout(() => {
      console.log('定时器')
      console.timeEnd('test timeout')
    }, 2000)

</script>

来看一下结果

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qianfeng_dashuju/article/details/108219456
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-31 05:06:43
阅读 ( 534 )
分类：前端