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

「爱情、让人受尽委屈。」 2023-10-06 14:33 5阅读 0赞

### 一般人不知道的黑科技 ###

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

![format_png][]

**标签语句**

> **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++

![format_png 1][]

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

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

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

![format_png 2][]

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

![format_png 3][]

--------------------

### **console.table()** ###

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

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

console.log('xxx')

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

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

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

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

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

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

![format_png 4][]

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

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

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

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

展示出来的结果是这样的

![format_png 5][]

比刚才舒服多了

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

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

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

![format_png 6][]

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

--------------------

### 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 样式了

![format_png 7][]

--------------------

### calc() ###

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

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

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

![format_png 8][]

这该怎么办呢？

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

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

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

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

![format_png 9][]

--------------------

### 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)

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

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

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

![format_png 10][]

利用 web worker 来操作一下

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

// worker.js
    console.time('test for')
    
    for (var i = 0; i < 1000000000; i++) { }
    
    console.timeEnd('test for')

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

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

![format_png 11][]

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

好吧我认了

![format_png 12][]

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

我要怎么拿到 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')

在主线程接收结果

来看一下结果

![format_png 13][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi1mNzU0ZWU1MTQwODc1ODU4ZGRhMzk2MjQ0ZGZlZTc5MV83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi1jZjQzNDU2NGVkNjMwNDEzOTdlMzVlMDcwOTRlMTRhNl83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi1mZTZkZTM1N2U3YjliNTM3ZTNjNGViMjMwZWQ4OTRlY183MjB3LmpwZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1kNWEzMjI4ZmYzMjZiNzc4MTRhNmE4NWFmZDNjMmRmNF83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0zMzNjMjJkNDNhMGNmYTU4NWU1ZTYxZTg1MWQyYTNlNl83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi00YWE3ZTRhMzNjZjRkYWYxNmJiNzM4Nzk0OTZjMzBmYl83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1mY2Y2MmI1ZWNjY2ZjYTBjZmFjZDQzMmFkYTNjMDZlOV83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS92Mi00MmQ2NWY3MmZjZTQ3Y2Y0ODE4MDUzZTZlMDU1MjZiNF9iLndlYnA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi03NzBlN2RiNTNhY2NiNWI1ZmNlMDI1YjE4M2NiZGJjNl83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWNiLnpoaW1nLmNvbS84MC92Mi00MmEwYjRmNGU0ZjM1MjlmNDAzZjExOWNjZDEwMTczZF83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWNiLnpoaW1nLmNvbS84MC92Mi0zMmVkYTk1OGFlMmFiNWQwNjdiNjMwYTE2NzdlZmU1Yl83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1hYzI3YmYzYTllMDJkODg0MzgyYTI5MDBiZDE4ZDk2Ml83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1jODcwMTdjNTYyYWMyZjE2ZjZhYWRiNTAzNjIzYWRlM183MjB3LmpwZw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1kOTdmNzdiNWEzMDllNzdlZGYwNzBlZDIzOWZjNjc3Nl83MjB3LmpwZw?x-oss-process=image/format,png