您的位置:首页 > Web前端

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

2020-08-25 13:56 921 查看

一般人不知道的黑科技

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

 

 

标签语句

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

比如看一下下面这段代码

[code]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()

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

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

[code]console.log('xxx')

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

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

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

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

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

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

console.log(obj)

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

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

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

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

[code]var obj = { name: 'Jack' }

console.log(obj)
// ...

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

console.log(obj)

展示出来的结果是这样的

比刚才舒服多了

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

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

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

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

contenteditable

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

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

[code]<div contenteditable>
hello world
</div>

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

[code]<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()

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

web worker

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

利用web worker是可以的

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

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

[code]// worker.js
console.time('test for')

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

console.timeEnd('test for')

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

[code]<script>

console.time('test timeout')

new Worker('./worker.js')

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

</script>

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

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

好吧我认了

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

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

可以利用 poseMessage 和 onMessage 来实现
在 worker.js 里面发出结果
[code]// worker.js
console.time('test for')

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

postMessage(sum)

console.timeEnd('test for')

在主线程接收结果

[code]<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>

来看一下结果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: