Javascript
文章平均质量分 59
前端小小白zyw
一只路过的小码农。。。
展开
-
JS 事件捕获、事件冒泡、事件委托
JS 事件机制原创 2024-03-11 17:54:18 · 1602 阅读 · 2 评论 -
JS实现chatgpt数据流式回复效果
处理下,然后代码片段着色利用。原创 2024-03-07 10:17:39 · 1648 阅读 · 0 评论 -
Electron 多显示器渲染
【代码】Electron 多显示器渲染。原创 2024-03-04 15:27:18 · 1507 阅读 · 0 评论 -
JS利用Worker多线程大文件切片上传
在做前端上传时,会遇到上传大文件,大文件就要进行分片上传,我们整理下思路,实现一个分片上传,最终我们要拿到每一个分片的值, 分片索引,以及分片: 我们先创建一个文件,用于处理选择文件,进而分片,这里利用获取文件hash值: 默认一个分片5M,这里要向上取整,计算出分片数量然后循环处理对文件进行切片,利用对文件进行切片处理可以看到,切为若干份然后获取切片的值,最终返回然后对返回的结果进行批处理,这里我们可以打印下处理的时间可以看到,处理了4秒左右,主要是花费在处理文件上,获取文件为同步任务,且原创 2024-03-01 19:40:54 · 2011 阅读 · 3 评论 -
Electron 主线程和渲染线程通信
Electron 主线程和渲染线程通信。原创 2024-01-23 21:39:42 · 1622 阅读 · 0 评论 -
Web Animation API
接下来,点击页面,小球会移动到点击的地方。先简单的写一个页面,一个背景,一个小球。工作中经常会遇到需要动画的场景,很比较吃力,也不是不能实现,需要。动画解决方案**,并且。,,但是如果遇到需要。原创 2024-01-15 17:43:48 · 2228 阅读 · 0 评论 -
JS 监听网络状态
我们在开发过程中会遇到监听用户网络状态的需求,通过。除了以上监听事件外,还可以轮训监听,1秒获取一次。可以获取当前的网络状态,包括。原创 2024-01-09 09:55:06 · 2733 阅读 · 1 评论 -
JS 手写 new 函数
先创建一个构造函数,原型上添加一个方法。一个构造函数生成一个实例对象,那么。的过程中发生了什么呢,我们今天梳理下。然后,我们实现一个自定义。工作中我们经常会用到。打印看下,看到完美输出。原创 2024-01-04 16:59:10 · 1247 阅读 · 0 评论 -
JS 封装数字滚动插件
先计算一个倍率,结束 - 开始 / 执行时间,利用。原创 2023-12-28 14:26:24 · 572 阅读 · 0 评论 -
JS + CSS 实现高亮关键词(不侵入DOM)
以上就是关于的使用方法:1. 获取文字节点2. 创建选区3. 创建高亮4. 自定义样式**文本颜色 `color`背景颜色 `background-color`文本修饰 `text-decoration`文本阴影 `text-shadow`文本描边 `-webkit-text-stroke`文本填充 `-webkit-text-fill-color`以下是兼容性,比较差,目前谷歌只兼容Chrome 105以上。原创 2023-12-28 14:04:12 · 2155 阅读 · 0 评论 -
JS 获取视频中某一个时间点的图像信息
获取某个时间点的图片信息:url。原创 2023-12-27 14:26:05 · 556 阅读 · 0 评论 -
JS 嵌套循环之退出顶层循环
我们常常写循环的时候,可能会遇到嵌套循环,如果出现退出循环,一层还好,多层循环就费劲了,传统做法是加。原创 2023-12-27 10:44:38 · 801 阅读 · 0 评论 -
Linux arm架构下构建Electron安装包
上篇文章我们介绍Electron基本的运行开发与windows安装包构建简单流程,这篇文章我们从零到一构建Linux arm架构下安装包,实际上Linux arm的构建流程,同样适用于Linux x86环境,只不过需要各自的环境依赖,Linux arm坑更多并且有些依赖官方并不适用于arm环境,比如fpm,这里的基础配置去上篇文章找就行,好了,不多比比,开搞。原创 2023-12-14 14:46:43 · 3903 阅读 · 5 评论 -
Electron 跨平台打包
最近利用Electron制作跨平台安装包,记录步骤,踩坑多多。首先,一步步搭建项目。原创 2023-12-14 10:42:01 · 2022 阅读 · 0 评论 -
Node.js 调用 fluent-ffmpeg
ffmpeg一款跨平台多媒体处理工具,可以进行视频转码、裁剪、合成、音视频提取、推流等操作。原创 2023-09-21 16:16:16 · 1336 阅读 · 1 评论 -
原生JS实现拾色器功能
纯JS实现取色器原创 2023-08-23 17:33:33 · 498 阅读 · 0 评论 -
Object.setPrototypeOf 与 Object.create() 的区别
①:字面量方式创建对象。②:构造函数式创建对象。原创 2023-04-06 16:16:35 · 687 阅读 · 3 评论 -
JS 优化之 document.Documentfragment 片段
渲染主线程的优化方案原创 2023-04-06 11:00:56 · 748 阅读 · 0 评论 -
JS 跨标签通信(实时)
跨标签通信原创 2023-02-10 20:29:24 · 913 阅读 · 0 评论 -
JS 实现抛物线动画案例
我们这里简单实现,一个按钮,一个购物车图标,样式这里直接跳过,最终。至此,我们便实现了简单的购物车抛物线动画。接下来,我们一步步实现逻辑。原创 2023-02-10 14:55:45 · 3936 阅读 · 1 评论 -
JS console.log 和 console.dir 的区别
【代码】JS console.log 和 console.dir 的区别原创 2023-02-09 17:00:01 · 251 阅读 · 0 评论 -
详解 Intersection Observer API ( 交叉观察器 )
提供了一种方法可以监听目标元素是否展示到视口(viewport)图片懒加载滚动动画…上述的需求,以往一般监听scroll事件,利用方法获取目标元素的位置信息。由于监听scroll事件,不断地触发回流,对性能有一定的影响,不过可以通过函数节流解决,但是方法对性能造成的影响无法有效优化的。!!!所以,浏览器为了解决上述难题,推出了,由于方法是异步的,不影响主线程的执行效率。原创 2022-12-02 20:23:32 · 3830 阅读 · 0 评论 -
Pinia 是否可以代替 Vuex ?
Pinia 是否可以代替 Vuex ?原创 2022-07-27 18:04:40 · 521 阅读 · 0 评论 -
Vite 配置 Eslint 规范代码
Vite 配置 Eslint 规范原创 2022-07-26 17:50:57 · 2131 阅读 · 0 评论 -
Webpack 4.X 自定义 loader 和 plugins
文章目录Loader1、介绍loaderPluginsLoader1、介绍loader因为webpack只识别js文件,遇到非js文件,需要利用loader处理我们开发常用的loader:诸如:babel-loader url-loader style-loader css-loader postcss-loader 等等今天,我们手写一个简单的loader,用来写入我们要编译的源代码index.js 源代码export default function () { console.log原创 2020-06-24 11:27:36 · 765 阅读 · 0 评论 -
Webpack 各版本 ( v1 - v4 ) 的区别
前不久,研究了Webpack 4.X的整体配置,本篇文章我们研究 webpack各版本的区别 包括 v1,v2,v3,v4文章目录Webpack:v1 与 v2 的区别Webpack:v1 与 v2 的区别新增对ES6语法的支持支持tree-shaking(减少打包后的体积)...原创 2020-06-03 18:41:35 · 6402 阅读 · 0 评论 -
Webpack 4.X 配置cdn加载资源
众所周知,SPA单页应用,首次访问需要加载近全部资源,从而导致首页渲染速度很慢。继而,出现很多性能优化方案:图片/资源懒加载、减少http请求、减小请求资源大小,减少dom操作避免触发回流重绘,gzip压缩,cdn加速等等今天,我们就具体介绍cdn加速:我们使用webpack 4.X打包配置cdn加速在配置前,我们讲一个属性 :externals按照官方文档的解释,如果我们想引用一个库,但是又不想让webpack打包,并且又不影响我们在程序中以CMD、AMD、ES6等方式进原创 2020-06-01 18:23:03 · 2957 阅读 · 0 评论 -
Webpack 4.X 从零配置SPA单页应用
在三大框架潮流的推动下,大大小小的SPA单页面应用层出不穷,工程化 / 模块化 / / 自动化 渐渐成为开发的核心思想,但是他们都有一个特点:源代码无法在浏览器里直接运行,必需通过编译才行因此也带来了很多构建工具的兴起;诸如具有代表性的 Gulp、Grunt、webpack 等等今天,我们具体介绍 webpack 4.X,webpack也从V1过渡到V4,不久之后发布V5版本( lz学不动了!!!)一、初始化安装npm init // 可选属性创建npm init -y // 自动创建npm原创 2020-05-29 16:44:09 · 1125 阅读 · 0 评论 -
Node.js + express + react + echarts 从零搭建数据可视化平台
最近负责搭建公司 大屏可视化平台,前端用到 vue + echarts ,后端 java 以及 大数据 提供数据支持。过程中踩过许多坑,于是准备在项目上线后,自己搭建响应式数据可视化平台。技术栈reactechartsnode.jsexpress标签响应式布局Websocket服务Velocity.js 提供动画支持...原创 2020-05-26 16:45:57 · 4206 阅读 · 4 评论 -
Node.js 搭配 Socket.io 实现与客户端实时通信
最近准备用react搭建node搭建一个大数据可视化平台,并且服务端利用到socket.io,客户端利用到socket.io-client这里基本总结一下基本使用方式:安装:npm i express socket.io socket.io-client -S服务端:let express = require('express') // 引入express中间件let app = express()let http = require('http').Server(app) // 引入so原创 2020-05-26 09:53:44 · 1954 阅读 · 0 评论 -
浏览器是多进程还是单进程?
*浏览器是多进程的,每一个tab页代表一个进程,如果多个空的tab页会合为一个进程 (webkit))每个进程下面有很多线程,我们具体介绍下:GUI 渲染线程渲染引擎的主要工作是将HTML/XML与CSS结合,解析为布局,最后绘制为页面...原创 2020-05-09 15:12:53 · 2028 阅读 · 0 评论 -
javascript高级 --- 函数柯里化
一、介绍函数柯里化(currying)又称部分求值,一个currying函数首先接受一部分参数,该函数不会立即求值,而是返回另外一个函数,刚才传入的参数通过闭包存起来,当真正需要求值时,一次性返回。二、案例函数求值普通函数function add (x, y) { return x + y}add(1,2)我们用柯里化实现function add(x) { return f...原创 2020-04-16 11:59:37 · 327 阅读 · 0 评论 -
javascript高级 --- 函数防抖和函数节流
一、介绍在某些特定场景下,函数可能会被频繁的调用,回调中又会发生DOM操作,浏览器继而重排与重绘,造成很严重的性能问题。二、案例例如:window.onresize / window.onscroll、频繁的onmousemove onkeyup解决类似问题:函数防抖(debounce)、函数节流(throttle),核心就是限制一个函数的频繁触发函数防抖:顾名思义,利用函数实现防抖...原创 2020-04-13 18:24:17 · 482 阅读 · 0 评论 -
javascript高级 --- 惰性函数
一、介绍惰性函数表示在函数执行的过程中,函数会在首次被成功调用的时候覆盖当前函数,成功后的逻辑不会被执行。二、案例因为浏览器行为之间的差异,我们在处理一些差异的同时,必须考虑其兼容性问题,例如:addEventListener 、removeEventListener、event、preventDefault、stopPropagation 等等,此时我们就需要根据当前的浏览器环境执行对应的...原创 2020-04-13 17:47:08 · 253 阅读 · 0 评论 -
vue实现下载excel表格俩种方式
一般类似功能都会放到后端来做,当然作为一项扩展技能,前端开发人员也应该掌握。今天,给大家介绍前端实现excel表格下载的俩种方式方式一、const jsonData = [{order:1,name:'小明',age:12},{order:2,name:'小张',age:20}]if (!jsonData.length) return// 表格的列标题 如果出现科学技术法或者其他格式 使...原创 2020-04-08 17:13:36 · 3951 阅读 · 2 评论 -
ts中定义类、类的继承、修饰符
首先,简单介绍ES6的class类class Foo { constructor(name,age){ // 实例前的构造函数,实例添加name/age属性 this.name = name this.age = age } getName () { // 原型添加getName()方法 return `My name is ${this.name} age : ${this....原创 2020-04-08 16:05:22 · 1351 阅读 · 1 评论 -
Javascript之原型继承和class类继承
一、原型继承先创建一个构造函数Person,添加属性原型添加方法function Person(name,age) { this.name = name this.age = age}Person.prototype.getName = function () { return this.name}再创建一个构造函数Student 并且调用Person构造函数func...原创 2020-04-01 18:39:56 · 347 阅读 · 0 评论 -
Axios利用拦截器处理重复请求
我们在开发时 经常会遇到类似场景提交表单时,连续点击提交表单,导致后台重复处理写一个连续点击脚本,不停发送请求,并发量导致服务器瘫痪今天,我们解决类似问题:一、重复请求处理流程:开始请求拦截响应拦截判断数组是否含有当前请求如果存在cancelToken取消当次请求如果当次请求成功数组中清除掉当次请数组存储当前请求开始请求拦截响应拦截代码:request.jsimport ax...原创 2020-03-26 18:04:27 · 3572 阅读 · 0 评论 -
前端AES加密/解密
一、下载npm i crypto-js -S二、封装创建encryption.jsimport CryptoJs from 'crypto-js'class Encryption { constructor (keyStr) { this.keyStr = keyStr || 'abcdefgabcdefg123456' // 秘钥 } /...原创 2020-03-13 15:06:32 · 606 阅读 · 0 评论 -
浅谈 for in 与 for of 的区别
最近做项目,项目中有些地方使用到 for in 循环,遇到一个头痛的问题,遍历的时候总会多出一个方法,找了很久(头痛),最后发现我在 Array 原型上添加了方法,自己测试了几遍,终于找出问题的关键点:// 原型添加方法contains 和属性 subTitleArray.prototype.contains = function() { return null } Array.protot...原创 2019-09-07 12:00:42 · 1267 阅读 · 0 评论