JavaScript - JavaScript.net.cn 「线球实验室」

JavaScript

拖放事件有的事件在被拖放元素上触发，有的事件则在放置目标上触发。可拖动元素在某个元素被拖动时，会触发以下事件: dragstart、 drag、dragend 。在按住鼠标键不放并开始移动鼠标的那一刻，被拖动元素上会触发 dragstart 事件。拖动开始时。 dragstart 事件触发后，只要目标还被拖动就会持续触发 drag 事件。当拖动停止时，会触发 dragend 事件。给一个元素添加 draggable="false" 属性，可以拖动元素。目标元素把元素拖动到一个有效的放置目标上时，会依次触发以下事件: dragenter、dragover、dragleave 或 drop。把

admin  2023-09-19  58

JavaScript Node.js

Node.js 控制台进度条实现原理

1，实现在终端同一行输出不同内容import readline form 'readline'; console.clear(); setInterval(() = { //删除光标所在行 readline.clearLine(process.stdout, 0); //移动光标到行首 readline.cursorTo(process.stdout, 0, 0) process.stdout.write(new Date().toLocaleString(), 'utf-8'); }, 1000); 2, 实现进度条import readline form 'readline

admin  2023-08-11  146

CSS JavaScript

JavaScript 和 CSS 检测横屏适配

很多视口我们要对横屏和竖屏显示不同的布局，所以我们需要检测在不同的场景下给定不同的样式：1 JavaScript检测横屏window.orientation:获取屏幕旋转方向window.addEventListener("resize", ()= { if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋转180度 console.log('竖屏'); }; if (window.orientation === 90 || window.orientation === -9

admin  2023-07-21  165

JavaScript 算法

JavaScript 中 0.1 加 0.2 不等于 0.3 的原因和解决方法

在 JavaScript 中直接输出 0.1 + 0.2 结果是 0.30000000000000004。原因如下：JavaScript 使用 Number类型表示数字（整数和浮点数），计算机遵循IEEE 754标准，所有语言都会有这个问题。通常用64位来表示一个数字：第0位：符号位，0表示正数，1表示负数(s)；第1位到第11位：储存指数部分（e）；第12位到第63位：储存小数部分（即有效数字）f。十进制转换为二进制方法是，小数本身乘以2，取整数位作为二进制表示位，然后取其小数位参与计算（乘以2），如此循环往复，只至小数位乘以2的结果为零。结果0.1和0.2的二进制，后面无限循环多余的数将会

admin  2023-07-17  238

JavaScript

JavaScript 代码混淆加密工具 javascript-obfuscator

由于 JavaScript 暂时无法直接编译成可执行的二进制代码，对 JavaScript 代码进行混淆加密，就是 JavaScript 代码保护的正确方法。JavaScript 混淆加密有不少产品可用，有免费开源的，也有商业的。免费的比如uglifyjs 、javascript-obfuscator、商业的比如jscrambler、JShaman，特别值的一提的是jshaman，不但强大，而且是国产的，是具备研发能力，有核心竞争力的国内产品，在js代码保护领域，jscrambler是国际顶级的厂商，而国内的jshaman比它毫不逊色。比如一段js代码：function NewObject(p

admin  2023-03-27  629

JavaScript

MySQL 数据库中货币单位如何存储

阿里巴巴 Java 编程规范，【强制】任何货币金额，均以最小货币单位且为整型类型进行存储。为什么要这样做呢，因为常常出现数据库里的数据获取后，直接返回给前端的。因为在数据传输过程中使用的是2进制，数据在进制转换时会丢失精度。浮点数使用JSON等格式传输数据时，会被转为二进制，二进制下很多浮点数是无限小数，而传输数据时候又不可能把无限制的传输这个数，只能把它截断，当浮点数被截断后，再转回十进制，就不是一个精确值了，所以就会出现接口返回{"a":0.3}，但是调用接口实际获得{"a":0.30000000000000004}的问题。参考：https://javascript.net.cn/arti

admin  2023-01-09  579

JavaScript

用 JavaScript 实现数字增加滚动动画

用 JavaScript 实现数字增加滚动动画方案一： h1 id="numBox" /h1 script function numRunFun(num, maxNum){ var numBox = document.getElementById("numBox"); var num = num; var maxNum = maxNum; var timer = setInterval(function(){ num++; if(num = maxNum){ numBox.innerHTML = ma

admin  2023-01-03  514

JavaScript 前端

JavaScript 检查 Date 是否为 Invalid Date

使用 new Date(string) 构造 Date 对象，如果传入非日期格式的字符串，仍然能构造出 Date 对象，输出date，结果为Invalid Date使用typeof判断date的类型，得到结果为“object”使用instanceof检测date是否为Date类型，结果为true。使用Date的getTime()方法，Invalid Date对象返回的是一个NaN，可以利用这点来检查Date对象是否为Invalid Date。 new Date(dateString)参数dateString一个符合 RFC2822 或 ISO 8601 日期格式的字符串（其他格式也许也支持，但

admin  2022-11-07  1474

JavaScript Node.js 前端

Node.js 的 URL 的模块

使用 url.parse() 函数转换'https://www.yuque.com!.evil.com' 'https://www.yuque.com%0a.evil.com' 会变成：'https://www.yuque.com/!.evil.com' 'https://www.yuque.com/%0a.evil.com' 可以看到 legacy API 并不认为 ! 字符属于域名的一部分，所以原始的 www.yuque.com!.evil.com 域名其实是非法的，而为了不抛异常，legacy API 尝试对它进行了一次转换，把它当成 www.yuque.com/!.evil.com 来

admin  2022-11-07  730

JavaScript

JavaScript 中的数据类型自动转换为 Boolean 状态

JavaScript中的数据类型自动转换时，空数组[]或空对象{}都的布尔类型不是false,而是 true当JavaScript遇到预期为布尔值的地方（比如if语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。因此除了以下六个值，其他都是自动转为true:undefinednull-00或+0NaN''（空字符串）

admin  2022-11-04  660

JavaScript Node.js 前端

JavaScript console 的用法

1 console.log在console.log()中，可以用%s设置字符串，%i设置数字，%c设置自定义样式，console.log()接受的两个参数，前者是描述性的语言，而第二个参数是与第一个参数位置对应的字符console.log(' %c %s %s %s', 'color: yellow; background-color: black;', '–', '测试信息', '–');2 console.table()很多的时候，你可能会有一堆对象需要查看。可以用console.log把每一个对象都输出出来，也可以用console.table语句直接把所有的对象都直接输出成为一个表格3

admin  2022-06-23  617

JavaScript Node.js 前端

Node.js 18.x 开始支持内置单元测试

单元测试很重要，很多新兴的编程语言都是会内置对应的能力，但 Node.js 这块一直都是由社区来实现，前端同学耳熟能详的 Test Runner 有 Mocha、Jest。2022年04月19日正式发布的 Node.js 18.x ，终于，官方支持了 Test 能力。Fetch API 也被集成到这个版本中了。测试 API 接口在一定程度上代替 SuperTest 了。代码：import test from 'node:test'; import assert from 'assert/strict'; // 等价于 describe() test('asynchronous passing

admin  2022-04-28  单元测试  582

JavaScript 前端开发

Rollup 教程

简介Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用ESM。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。Webpack 的理念是“万物皆是模块”，rollup.js 从一开始，就没有那样宏大的愿景，它描述自己是：“一个 JavaScript 模块打包器”。致力于“将小块的代码编译成大的复杂的代码”。快速使用Rollup 可以通过命令行接口(command line interface)配合可选配置文件(optional configuration fil

admin  2022-03-03  rollup  511

JavaScript Node.js

支持 Selector API 的 HTML 解析器 node-html-parser

简介做爬虫解析 HTML，之前一直是用 cheerio，随着 jQuery 的渐行渐远，使用 cheerio 的类 jQuery API 已经成为一种负担，我使用这个支持 Selectors API 的解析器 node-html-parser 来代替 cheerio。前后端的 HTML Selectors API 终于统一了。官方地址：https://www.npmjs.com/package/node-html-parser在 npmjs.com 的周下载量是：1,777,505。 cheerio 的周下载量是 6,696,323。执行速度上：cheerio :12.072

admin  2022-02-28  爬虫  850

JavaScript Node.js

Node.js 使用 Jest 和 supertest 做接口测试

var assert = require("assert"); var request = require('supertest'); // describe('接口测试', async function () { const http = require('http'); const app = require('../../app'); const PORT = process.env.PORT || 3003; const SERVER = http.createServer(app.callback()); it('获取 API 版本信息', (done) = { let

admin  2022-02-22  单元测试  646

JavaScript Node.js

Node.js 使用 Jest 做单元测试

Jest 简介Jest 是一个越来越流行的测试框架，使用率渐渐超过了Mocha, 这些项目都在使用 Jest：Babel、 TypeScript、 Node、 React、 Angular、 Vue 等等！Jest 的目标是在大部分 JavaScript 项目上实现开箱即用，无需配置。从 it 到 expect - Jest 将整个工具包放在同一个地方。好书写、好维护、非常方便。快速上手npm install --save-dev jest 下面我们开始给一个假定的函数写测试，这个函数的功能是两数相加。首先创建 sum.js 文件：function sum(a, b) { return

admin  2022-02-22  单元测试  640

CSS JavaScript

JavaScript 获取和修改 CSS 变量

Window.getComputedStyle()Window.getComputedStyle()方法返回一个对象，该对象包含元素的所有 CSS 属性的值。获取元素属性 style #elem-container{ position: absolute; left: 100px; top: 200px; height: 100px; } /style div id="elem-container" dummy /div div id="output" /div script function getTheStyle

admin  2021-12-27  398

JavaScript

Nginx NJS 模块，在 Nginx 中运行 JavaScript

njs 简介Nginx 是C语言开发的，很多人扩展 Nginx 的功能，并未使用 C 语言开发，更常见的是使用 Lua 扩展和定制 Nginx 服务。比较著名的是 OpenResty 使用 lua-nginx-module 模块运行 Lua 语言，并集成了大量精良的 Lua 库、第三方模块，可以方便地搭建能够处理超高并发、扩展性极高的 Web 服务。就像Atwood定律所描述一样，该来的又来了。现在最新版本的 Nginx 1.9.11+ 已经推出了 njs 模块，可以在 nginx 的配置中引入 JavaScript 脚本，从而实现一些更复杂的 nginx 配置功能。NJS 模块并不是运行一个

admin  2021-12-25  nginx  786

JavaScript Node.js

JavaScript 的异步 IO 和事件循环概念

一，进程和线程简介进程是资源分配的最小单位，线程是CPU调度的最小单位进程：进程是一个有独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。进程是一种抽象的概念，一般定义是：进程由程序，数据集合和进程控制块三部分组成。（进程是资源分配的最小单位）。线程：在早期的操作系统中并没有线程的概念，随着计算机的发展，为了应对进程之间的切换带来的巨大开销，就发明了线程，线程是程序执行中一个单一的顺序控制流程，一个进程可以有一个或多个线程，各个线程之间共享代码和数据空间，每个线程有独立的运行栈和程序计数器(PC)，线程切换开销小。（线程是c

admin  2021-12-07  404

JavaScript Node.js

console 输出彩色日志

格式：\033[背景色编号;字色编号m 颜色属性：字色编号：30黑，31红，32绿，33黄，34蓝，35紫，36深绿，37白色背景编号：40黑，41红，42绿，43黄，44蓝，45紫，46深绿，47白色例子：console.log('\033[42;30m Error \033[40;32m 出错了 \033[0m'); 用绿底（42）黑字（30）显示“Error”，然后使用黑底（40）绿字（32）显示余下的信息，最后关闭所有属性（\033[0m）其他标记：\033[0m 关闭所有属性 \033[1m 设置高亮度 \033[4m 下划线 \033[5m 闪烁 \033[7m 反显

admin  2021-12-01  393