前言：
目前各位老铁们对“web前端style”大致比较看重，朋友们都需要了解一些“web前端style”的相关知识。那么小编在网摘上网罗了一些有关“web前端style””的相关资讯，希望朋友们能喜欢，朋友们一起来学习一下吧！一般人不知道的黑科技
今天, 我们来说几个前端比较冷门, 不是很常用的小玩意
标签语句
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 workerJS 是单线程的, 那么到底能不能同时做两个事情呢
利用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.jsconsole.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.jsconsole.time('test for')var sum = 0for (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>来看一下结果
标签： #web前端style #cssleftmarginleft
