技术分享:前端开发小技巧
一般人不知道的黑科技
今天, 我们来说几个前端比较冷门, 不是很常用的小玩意
标签语句
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>
来看一下结果
- [前端与移动开发] 【前端技术分享】Web前端性能优化的9大问题
- 活动预告,8月14日我会就我的书,对前端开发做一个技术分享,请大家多支持
- 活动预告,8月14日我会就我的书,对前端开发做一个技术分享,请大家多支持
- 教你正确的学习web前端开发技术的方法分享
- WebStorm前端开发分享:基于html5+css+js开发前端项目,用ajax技术获取后端数据
- 8月19日BBUG:电信技术开发经验分享与前景展望
- 有哪些关于前端开发技术(HTML、CSS 和 JavaScript 等)的值得推荐的书籍?
- Web前端开发技术 HTML、CSS、JavaScript pdf
- 分享10个实用的jQuery代码开发小技巧
- 从程序员到技术总监,分享10年开发经验 [转 ]
- 济南第二期技术沙龙我的分享-网络开发那些事
- Web前端知识分享:3个优化Web性能的小技巧!
- WEB前端开发都应知道的jquery小技巧及jquery三个简写
- 【技术干货】前端开发之IONIC移动端开发
- 前端开发工程师 -- 技术路线图
- 【华为云技术分享】深度理解AI概念、算法及如何进行AI项目开发
- 4. web前端开发分享-css,js工具篇
- 通往成功的钥匙--Web前端开发技术
- HTML5/CSS3跨平台开发技术分享(一)
- Docker原理(开发技术分享转发)