js
关注
分享
扫一扫
文章平均质量分 58
js
Lvan的前端笔记
十年磨一剑
展开
-
js：简单入门rxjs
rxjs原创 2024-06-20 16:52:52 · 878 阅读 · 0 评论 -
js：关于颜色处理的一些常用函数
js：关于颜色处理的一些常用函数。原创 2024-06-05 14:27:11 · 326 阅读 · 0 评论 -
js：创建n个字符串的几种方式
创建n个字符串的几种方式原创 2023-09-14 18:37:10 · 270 阅读 · 0 评论 -
js：正则表达式常用方法总结test、exec、match、matchAll、replace、replaceAll、search
正则表达式常用方法总结test、exec、match、matchAll、replace、replaceAll、search原创 2023-05-15 16:09:08 · 2083 阅读 · 0 评论 -
js：手写一个promise
如何实现一个promise？原创 2023-04-10 15:51:13 · 588 阅读 · 0 评论 -
js：详解eventHub发布订阅写一个事件监听函数
发布订阅模式与eventHub原创 2023-03-24 18:00:24 · 298 阅读 · 0 评论 -
js：入门web component
web component是个啥原创 2023-02-26 20:58:55 · 486 阅读 · 0 评论 -
js：使用递归闭包写一个倒计时功能
使用递归闭包写一个倒计时功能原创 2023-02-17 17:46:03 · 316 阅读 · 0 评论 -
js：什么是编译时和运行时
编译时、运行时，傻傻分不清楚~原创 2022-11-20 16:13:45 · 2199 阅读 · 0 评论 -
js：js中加载js文件
这个问题，之前没怎么想过，因为现在大部分时间我们都在搞 react、vue + webpack 这种有模块化的，所以基本上用 es module 就可以。一般最终形态都是 html 引入 script 标签，一些老项目可能需要一个 script 标签里的 js 引用另一个 js 文件，怎么办呢。原创 2022-11-15 18:18:25 · 2848 阅读 · 0 评论 -
js：with语法
性能低调试代码困难。原创 2022-11-08 21:01:47 · 75 阅读 · 0 评论 -
js：查找树的完整路径
这里第三个参数，如果你的数据结构参数 key 的名称也叫 name、code、children的话就不需要加了，不一样的话再传入对应的key就行。我们做项目的时候经常用到这种树形结构，如果给你一个 code，让你返回这个 code 所在的完整路径，应该怎么写呢？原创 2022-10-31 11:28:11 · 877 阅读 · 0 评论 -
一文讲清楚什么是类型化数组、ArrayBuffer、TypedArray、DataView等概念
JavaScript 类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。js 在处理图像、音频视频编辑等方面，通常需要处理大量相同类型的数据，比如一张图片的像素点数据，坐标数据等等。而使用普通的 js 数组，存储的对象能动态增多和减少，并且可以存储任何 JavaScript 值，性能可能会有问题。所以 js 引入了类型化数组。类型化数组的创建要明确数据类型和长度，所以处理起来效率会高很多，而且不支持 push pop 等操作。类型数组拆分为两部分：缓冲由 ArrayBuffer 对象原创 2022-06-27 15:01:05 · 574 阅读 · 0 评论 -
js：使用canvas检测图片亮度
使用canvas检测图片亮度原创 2022-06-04 20:38:48 · 932 阅读 · 0 评论 -
js：bind、call、apply的区别
文章目录概念bindcallapply实践bindcallapply总结概念bind语法：function.bind(thisArg[, arg1[, arg2[, ...]]])参数说明thisArg调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数，则忽略该值。当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为原创 2022-05-15 20:23:24 · 559 阅读 · 0 评论 -
web自定义相机拍照
背景我们平常可能有需求是要自定义拍照，比如在相机界面加上一些自定义的辅助线、遮罩等等，但是前端不像原生开发可以自定义相机，我们只能另辟蹊径了。常用拍照方案首先总结一下常用的拍照方案，这里只说 web 开发。方案一通过 <input type="file"> 控件调用移动端的摄像头，实现拍照。优点兼容性好缺点拍照调取系统相机，无法自定义方案二通过 video 控件，通过捕获 video 的流，使用 canvas 截取 video 中的图像实现拍照优点可以实现对拍原创 2022-05-06 11:58:17 · 1324 阅读 · 0 评论 -
抽象语法树AST以及babel原理
什么是AST？借用一下百度百科的解释：在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。其实意思就是将代码以树的格式展现出来，举个例子你就明白了：大家可以在这个网站 https://astexplorer.net/ 上输入代码，会被解析为 AST，如图：可以看到，代码的每一个字符都以树的形式展示了出来。AST的应用原创 2022-04-10 23:47:29 · 1323 阅读 · 0 评论 -
js：如何在命令行使用项目中的node_modules包
背景我们项目中下载了一个 npm 包，一般使用我们会 import 或者放在 package.json 的 script 里来使用，但是如果我们想在命令行直接运行呢？使用找到这个包的 package.json 文件，查看 bin 字段：然后就可以直接使用啦...原创 2021-12-07 17:52:54 · 1163 阅读 · 0 评论 -
js：使用patch-package修改node_modules的文件并加入版本控制
背景我们日常开发中会遇到 npm 包有问题，通常的修复方法有两种1、提交 PR 或 issue，等待作者修改2、copy 源码到本地修改然鹅，两种方法都不太科学，弊端太明显，那么使用 patch-package 是如何修改的。patch-package1、安装yarn add patch-package -D2、在 node_modules 找一个包修改源码，如图这里我找的 lodash 的 cloneDeep.js 文件，增加一行代码3、生成补丁npx patch-package原创 2021-12-07 15:06:04 · 1674 阅读 · 6 评论 -
使用npm仓库的优先级以及.npmrc配置文件的使用
说明一、文件位置全局配置文件：/etc/npmrc用户配置文件：~/.npmrc项目配置文件：$项目根目录/.npmrc通过 npm config 修改的是用户配置文件~/.npmrc// 本次从淘宝仓库源下载npm install xx --registry=https://registry.npm.taobao.org install// 设置淘宝源npm config set registry https://registry.npm.taobao.org// 设置公司的源n原创 2021-11-29 22:58:35 · 5446 阅读 · 0 评论 -
js：高阶函数与函数柯里化
原创 2021-08-05 14:57:46 · 114 阅读 · 0 评论 -
js：如何优雅的实现按钮防重复
原创 2021-07-09 17:19:09 · 972 阅读 · 0 评论 -
js：可选链操作符?.和空值合并运算符??以及相关babel配置
可选链MDN这个日常开发很常见，比如我们有一个嵌套对象：const obj = { a1: { a2: { a3: 'hello' } }}我们想拿到 a3 就需要这么写，因为当 a1 或 a2 为空，就会报错obj.a1 && obj.a1.a2 && obj.a1.a2.a3有了可选链我们可以这么写：obj.a1 ?. a2 ?. a3空值合并运算符MDN平时我们写空值判断会这么写：const name = 'zy'con原创 2021-07-03 14:31:06 · 1826 阅读 · 0 评论 -
js：动态修改document.title失效问题
问题当在页面异步调接口，拿到 title 后赋值给 document.title，无法修改标题。原因页面加载完后 title 已经确定了，所以不再监听 title 的 change 事件。解决document.title = this.title;let iframe = document.createElement('iframe');iframe.src = require('/favicon.ico');iframe.style.display = 'none';// 这个就是我们异原创 2021-06-08 18:56:52 · 4821 阅读 · 0 评论 -
js：在浏览器中使用es module
想当年，我们想在 js 中直接引入模块是不行的，但是有了 es module 之后，这些变为了可能举例index.html<!DOCTYPE html><html lang="en-US"> <head> <meta charset="utf-8"> <title>测试</title> <script type="module"> import A from './index.原创 2021-05-26 17:20:27 · 693 阅读 · 0 评论 -
js：虚拟dom与diff算法
虚拟dom库snabbdom库可以模拟vdom，vue、react也是模仿这个虚拟dom的，但其实虚拟dom的结构是没有标准的。h函数vdom数据结构patch函数js模拟dom结构diff算法原创 2021-05-05 17:03:04 · 160 阅读 · 0 评论 -
react和vue的一些对比和个人感悟
文章目录1、条件判断、列表渲染等vuereact2、表单vuereact3、数据流vuereact4、虚拟domvuereact5、模板和JSXvuereact6、用法reactvue7、生态reactvue1、条件判断、列表渲染等vue有v-if、v-for等vue指令react完全是js控制，只不过用了jsx2、表单vuev-model双向绑定，其实是oninput的一个语法糖react完全js控制，用onChange实现双向绑定，但是react叫受控组件，也就是input的文字是受原创 2021-04-28 13:41:54 · 1111 阅读 · 0 评论 -
js：冷门但好用的es6语法
数组findIndex()findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。var objs = [ {type: 'baidu', name: '百度'}, {type: 'alibaba', name: '阿里巴巴'}, {type: 'tengxun', name: '腾讯'},]有以上数据，想通过 type 查到 name遍历的方式：let name = ''objs.forEach(item => { if (it原创 2021-04-23 14:37:02 · 261 阅读 · 1 评论 -
js：基于fabric的图片标注功能
fabric几个坑点事件绑定：canvas事件单个对象的事件（如circle、rect）这里可以看到全部的事件 http://fabricjs.com/events举例：// canvas对象的事件绑定// 可以在这里检测到canvas上所有对象的事件，比如我们鼠标滑到canvas上的一个circle上，那么e.target就是这个circlecanvasObj.on('mouse:over', e => { // do something ... e.target.set原创 2021-03-28 15:33:40 · 1849 阅读 · 0 评论 -
js：使用canvas做一个图片标注功能
canvas相关库的选择名称star（2021.3）文档备注fabricjs18.2khttp://fabricjs.com/--------konva6khttps://konvajs.org/----------react-konva3.8k同上---------vue-konva682同上----------react-canvas2.8k-2007年不维护了，不支持react16，慎用绘制复杂的画布图形。可以让我们原创 2021-03-19 19:38:50 · 4022 阅读 · 1 评论 -
js：遍历套异步的问题
问题const arr = [1,2,3,4,5,6]function recurTest(arr) { arr.forEach(item => { setTimeout(() => { // 处理业务 console.log("正在处理arr中的数字" + item); }, Math.random() * 2000) })}recurTest(arr);// 正在处理arr中的数字1// 正在处理arr中的数字5// 正在处理ar原创 2020-11-20 17:55:10 · 283 阅读 · 3 评论 -
js：package.json文件一些不常用字段的含义
bin字段bin项用来指定各个内部命令对应的可执行文件的位置。"bin": { "someTool": "./bin/someTool.js"}上面代码指定，someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。Npm会寻找这个文件，在node_modules/.bin/目录下建立符号链接。在上面的例子中，someTool.js会建立符号链接node_modules/.bin/someTool。由于node_modules/.bin/目录会在运行时加入系统的PA原创 2020-10-11 19:00:32 · 241 阅读 · 0 评论 -
js：前端如何拿到远程静态服务器的一份配置文件并解析
需求前端需要读取一份配置（例如一个省市区组件的数据），但是这个配置可能需要不定时的更改。解决办法：方法1： 配置放在后端，调后端接口拿配置数据方法2： 配置文件放在前端代码里，每次改动需要改前端代码方法3： 配置文件直接放在 cdn 服务器上，前端直接去读取接下来我们主要讲第三种方法如何实现思路我们要放在 cdn 上的文件叫 position.jsvar dataPosition = [ { key: 1, label: '医师' }, { key: 2,原创 2020-10-10 16:40:02 · 2053 阅读 · 0 评论 -
js：精度问题
文章目录精度问题浮点型小数转化为二级制解决精度问题今天项目遇到一个问题，后端传给我的数字我要转化为百分比，我想这还不简单，直接const num = '0.59'(parseFloat(num) * 100) + '%'然后就发现一个问题：然后你会发现加减乘除都有问题console.log(0.1 + 0.2); //0.30000000000000004console.log(2.22 + 0.1); // 2.3200000000000003console.log(1.0 -原创 2020-09-02 12:31:49 · 287 阅读 · 0 评论 -
js：详解es6的类class
基本写法es6 只是一个语法糖，底层还是原型链。例如：// 构造函数写法function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);// es6 类的写法class Point { constructor(x, y) {原创 2020-05-27 19:24:20 · 358 阅读 · 0 评论 -
js：js和php中的关联数组和索引数组
不知道你有没有这样的疑问，在 js 里对象的表示是这样的：var obj = {}obj.a = 1但是在 PHP 中却是叫关联数组：<?php //创建一个关联数组，关联数组的键“orange”，值是“橘子” $fruit=array('orange'=>'橘子'); echo $fruit['orange']; ?> 而 PHP 中的对象指的是：要创建一个新的对象 object，使用 new 语句实例化一个类<?phpclass foo{原创 2020-05-12 14:23:51 · 445 阅读 · 0 评论 -
js：rest 参数和扩展运算符...的用法
函数的rest 参数ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。function test() { return arguments;}test(2, 5, 3) // [2, 5, 3]的伪数组function test(...values) { return values;}test(2, 5, 3) // [2, 5, 3]数组的扩展运算符原创 2020-05-09 17:48:30 · 1735 阅读 · 0 评论 -
js：实现一个简单的模板编译
看阮一峰的字符串扩展和自己的小工具，后续更新原创 2020-05-09 17:07:01 · 511 阅读 · 0 评论 -
js：详解js中的伪数组
伪数组的特性如果一个对象的所有键名都是正整数或零，并且有length属性，那么这个对象就很像数组，称为伪数组。典型的伪数组有函数的arguments对象，以及大多数 DOM 元素集，还有字符串。具有length属性；按索引方式存储数据；不具有数组的push()、pop()等方法；举例例子1：<ul> <li>1111</li> <li>1111</li> <li>1111</li>原创 2020-05-09 16:55:00 · 1193 阅读 · 0 评论 -
js：浅谈函数式编程
背景函数式编程是一种编程思想，其余的还有声明式与命令式函数式举例假设我们要把字符串 functional programming is great 变成每个单词首字母大写var string = 'functional programming is great';var result = string .split(' ') .map(v => v.slice(0, 1).toUpperCase() + v.slice(1)) .join(' ');整个过程就是 join(m原创 2020-05-09 15:18:02 · 544 阅读 · 0 评论