百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

前端开发小技巧

xsobi 2024-11-26 10:14 1 浏览

一般人不知道的黑科技

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



标签语句

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>

来看一下结果


相关推荐

好用的云函数!后端低代码接口开发，零基础编写API接口

前言在开发项目过程中，经常需要用到API接口，实现对数据库的CURD等操作。不管你是专业的PHP开发工程师，还是客户端开发工程师，或者是不懂编程但懂得数据库SQL查询，又或者是完全不太懂技术的人，通过...

快速上手:Windows 平台上 cURL 命令的使用方法

在工作流程中，为了快速验证API接口有效性，团队成员经常转向直接执行cURL命令的方法。这种做法不仅节省时间，而且促进了团队效率的提升。对于使用Windows系统的用户来说，这里有一套详细...

使用 Golang net/http 包:基础入门与实战

简介Go的net/http包是构建HTTP服务的核心库，功能强大且易于使用。它提供了基本的HTTP客户端和服务端支持，可以快速构建RESTAPI、Web应用等服务。本文将介绍ne...

#小白接口# 使用云函数，人人都能编写和发布自己的API接口

你只需编写简单的云函数，就可以实现自己的业务逻辑，发布后就可以生成自己的接口给客户端调用。果创云支持对云函数进行在线接口编程，进入开放平台我的接口-在线接口编程，设计一个新接口，设计和配置好接口参...

极度精神分裂:我家没有墙面开关，但我虚拟出来了一系列开关

本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：iN在之前和大家说过，在iN的家里是没有墙面开关的。...

window使用curl命令的注意事项 curl命令用法

cmd-使用curl命令的注意点前言最近在cmd中使用curl命令来测试restapi,发现有不少问题,这里记录一下。在cmd中使用curl命令的注意事项json不能由单引号包括起来json...

Linux 系统curl命令使用详解 linuxctrl

curl是一个强大的命令行工具，用于在Linux系统中进行数据传输。它支持多种协议，包括HTTP、HTTPS、FTP等，用于下载或上传数据，执行Web请求等。curl命令的常见用法和解...

Tornado 入门:初学者指南 tornados

Tornado是一个功能强大的PythonWeb框架和异步网络库。它最初是为了处理实时Web服务中的数千个同时连接而开发的。它独特的Web服务器和框架功能组合使其成为开发高性能Web...

PHP Curl的简单使用 php curl formdata

本文写给刚入PHP坑不久的新手们，作为工具文档，方便用时查阅。CURL是一个非常强大的开源库，它支持很多种协议，例如，HTTP、HTTPS、FTP、TELENT等。日常开发中，我们经常会需要用到cur...

Rust 服务器、服务和应用程序:7 Rust 中的服务器端 Web 应用简介

本章涵盖使用Actix提供静态网页...

我给 Apache 顶级项目提了个 Bug apache顶级项目有哪些

这篇文章记录了给Apache顶级项目-分库分表中间件ShardingSphere提交Bug的历程。说实话，这是一次比较曲折的Bug跟踪之旅。10月28日，我们在GitHub上提...

linux文件下载、服务器交互(curl)

基础环境curl命令描述...

curl简单使用 curl sh

1.curl--help#查看关键字2.curl-A“（添加user-agent<name>SendUser-Agent<name>toserver）”...

常用linux命令:curl 常用linux命令大全

//获取网页内容//不加任何选项使用curl时，默认会发送GET请求来获取内容到标准输出$curlhttp://www.baidu.com//输出<!DOCTYPEh...

三十七，Web渗透提高班之hack the box在线靶场注册及入门知识

一.注册hacktheboxHackTheBox是一个在线平台，允许测试您的渗透技能和代码，并与其他类似兴趣的成员交流想法和方法。它包含一些不断更新的挑战，并且模拟真实场景，其风格更倾向于CT...

一周热门
最近发表
标签列表