伍什kay-优快云博客

原创 JS PC端调用摄像头录视频截图上传文件

创建 Catcher 类。直接在HTML文件中调用。

2023-06-19 15:16:43 1163

原创 Vue3 Antdv 表格分组合并指定列

数据中group值相同的视为一组，dataMerge方法为每一行添加merge属性，同组内首行的merge属性为这一组的长度，也就是要合并的行数，组内其他数据行内的merge属性都将值设置为0，至此才可以完成指定列的分组合并。项目特殊需求：依照数据中的分组标签以及指定的列进行数据分组合并。

2023-06-06 15:40:58 982

实现长度为500的字母组合数组，如以下代码所示：/** * fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串， * 该方法是 String 的静态方法，字符串中的每个字符都由单独的 Unicode 数字编码指定。 */ // 此方法来自一位群友 const combin1 = () => { const arr = [] for (let i = 0; i < 500; i++) {

2023-03-15 10:38:25 333

原创 JS 数组对象根据某属性去重

三种方式，大同小异，也不难理解，希望对你有帮助。

2023-03-13 15:43:10 2143 4

原创 JS 商品SKU算法

笛卡尔乘积是指在数学中，两个集合X和Y的笛卡尔积（Cartesian product），又称直积，表示为X × Y，第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员。简单的实现一下商品SKU算法。

2023-03-13 15:30:26 606

原创使用 React + Ant design5 实现主题定制

使用 React + Ant design5 实现主题定制

2023-02-27 15:41:17 2413 2

原创 Vue 实现虚拟列表

使用Vue实现虚拟列表无限滚动

2022-12-23 15:10:16 449

原创 Vue 实现全屏滚动效果

Vue 实现全屏滚动效果

2022-12-20 16:27:00 1427

原创 setTimeout实现简单排序

代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>settimeout排序</title> </head> <body> <script type="text/javascript"> const nums = [3, 7, 8, 9, 4, 6, 5, 1, 2] const sort

2022-05-06 09:59:48 193

原创使用npm发布一款简易图形验证码插件

一、编写插件代码代码很简单，没有特别复杂的逻辑，所以不过多赘述export default class VerificationCode { constructor(options) { this.options = { id: "", //容器ID canvasId: "", // canvas的ID width: "80", height: "30", code: "", }; if (Object.pro

2022-02-10 15:28:56 1214 2

原创 React Native应用创建及初始化项目目录

安装工具在Windows平台上开发React Native需要安装以下环境和工具：1、Node2、Android Studio安装Node.js略。。安装Android开发工具Android Studio可以到Android开发者官网进行下载：developer.android.com。因为Android开发者官网的服务器设在国外，国内没有翻墙的用户通常情况一下是无法打开的，为此Google在2016年开发者大会上公布了developer.android.google.cn，这个特别为中国

2021-12-27 11:13:39 1952

原创 pm2的使用：使用pm2执行npm命令

全局安装npm install -g pm2npm run dev 等同于 pm2 start npm – run devnpm start 等同于 pm2 start npm – start给进程命名：pm2 start npm --name test -- run devpm2 start npm --name test -- start 语法：pm2 start npm --watch --name – run ;其中 – watch监听代码变化，-- name重命名任务

2021-12-27 10:31:42 6288 2

原创 JS实现千分符

1、正则法function format (num) { var reg=/\d{1,3}(?=(\d{3})+$)/g; return (num + '').replace(reg, '$&,'); }2、for循环function format(num){ num=num+'';//数字转字符串 var str="";//字符串累加 for(var i=num.length- 1,j=1;i>=0;i--,j++){

2021-12-27 10:20:17 1924

原创 Promise.all()、Promise.allSettled()原理及实现

Promise.all()原理简述：MDN：Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入。并且只返回一个Promise实例，输入的所有promise的resolve回调的结果是一个数组。Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的pro

2021-12-27 10:11:34 1109

原创 Call()、Apply()、Bind()用法及简单手写实现

call()call() 方法可以是对象重用其他对象上的方法，此方法是JS预定义的，可以用来调用所有者对象作为参数的方法用法示例：const fully = { fullName: function() { return this.firstName + " " + this.lastName; }}const p = { firstName:"Jhon", lastName: "Park",}fully.fullName.call(p);

2021-12-24 11:02:01 175

原创 React Native：react-native-code-push 报错

问题描述react-native-code-push 安装后项目启动就报错。查找原因原以为是插件版本与RN版本不匹配导致，所以查了一下不同版本所对应的code-push插件：项目中的RN是0.66.3，但是并没有于此相匹配的版本，索性查看下所有版本吧，执行命令：npm view react-native-code-push versions有点儿意外。。并没有更高的版本问题解决参考了此篇文章1、修改 android\settings.gradle 文件rootProject.n

2021-12-15 08:51:18 3237

原创 Ubuntu 安装 mysql

1、更新软件包，运行命令sudo apt update2、安装 mysql，运行命令sudo apt install mysql-server这里会提示需要大概261M的磁盘空间3、配置安全设置，运行命令sudo mysql_secure_installation这里询问是否要对密码验证组件进行配置，这里我选择的是y这里询问设置密码强度，这里我选择了第二个，并设置了中英文的密码这里询问是否要移除匿名用户，我选择了 y输入 y这里我选择保留，输入 n输入 y输入 y4、检查

2021-10-25 08:54:22 260

原创 Sequelize DatabaseError: ER_WRONG_FIELD_WITH_GROUP: Expression #2 of SELECT list is not in GROUP

项目部署后报错SequelizeDatabaseError: ER_WRONG_FIELD_WITH_GROUP: Expression #2 of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘mysql.category.id’ which is not functionally dependent on columns in GROUP BY clause; this is incompatible

2021-10-21 13:54:49 1054

原创 React Hooks项目 require()使用动态（变量）路径引入文件

需求描述：根据后台返回的图片名称，加载静态资源中所对应名称的图标为了方便，项目期初并没有将静态资源放到类似于 OSS 这样的静态服务器上面，而是放到了项目中问题描述：组件渲染过程中需要动态渲染img元素，于是使用了node的require模块，再使用es6模板字符串动态拼接src路径：<img className="w-16" src={require(`assets/images/weatherIcons/${weatherInfo?.icon}.png`)} alt="" /&gt

2021-07-16 17:35:06 2615 1

原创 React Ts项目 react-hot-loader 热更新，类型“NodeModule”上不存在属性“hot”

配置热更新会报：类型“NodeModule”上不存在属性“hot”。由于使用了ts，在类型检查过程中对于不存在的属性就会抛此种格式的提示，解决方法也很简单，使用as关键字将 module 断言成 any 类型：if ((module as any).hot) { (module as any).hot.accept('./App', () => { const NextApp = require('./App').default; render(NextApp); })}

2021-07-16 16:13:44 1113

原创 reduce 计算数组中每个元素出现的次数和数组去重

var series = ['a1', 'a3', 'a1', 'a5', 'a7', 'a1', 'a3', 'a4', 'a2', 'a1'];var result= series.reduce(function (accumulator, current) { if (current in accumulator) { accumulator[current]++; } else { accumulator[current] = 1;

2021-06-28 10:08:48 540

原创 vue监听store.state中对象的变化不起作用

store.state中的对象属性发生改变，引用state的组件中却监听不到变化，深度监听也不起作用，如下代码：// state.jsnoticeParams: [ { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null}, { CODE: null, NoticeType: null} ]// 所引用组件export default { methods: { profileJump(p

2021-06-23 16:00:24 5287 3

原创 antdv 报错 ReferenceError: h is not defined

源代码如下<template> <div class="notice-table"> <a-table :columns="columns" :data-source="list" size="middle" :pagination="{ pageSize: 10 }" :customRow="rowClick" > <template slot

2021-06-23 10:23:22 1643

原创 vue provide / inject实现页面刷新

需求中有刷新路由的必要，原生reload页面体验很不友好，所以选择了 provide / inject 选项。vue文档中是这样描述的：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效示例：// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' }, // ...}// 子组件注入 'foo'var Child = { inject:

2021-06-11 16:30:41 255 1

原创 antdv vue upload自定义上传结合表单提交

表单内联多个文件上传组件使用antdv的upload组件时发现个怪异的问题，上传文件状态每次改变后都会触发change事件，所以上传成功、失败、删除都会触发，而怪异的就是删除后触发change，见下图就算返回是空的，但只要出发了change，change都会默认返回如下结构的对象：{ file: { /* ... */ }, fileList: [ /* ... */ ]}也因为如此，每次表单提交的时候就算没有附件也不会去校验，所以放弃了upload组件的change事件，采用表单的

2021-06-10 20:40:29 2908

原创 JS 数组操作（递归）

多维度数组取其中符合条件的属性，数组扁平化并将所取属性存入数组// 递归获取数组对象属性export const traverse = (arr, newArr = []) => { for (let i = 0; i < arr.length; i++) { let a = {...arr[i]} if(a.children !== null){ newArr.push(a.caption) traverse(a.children, newA.

2021-06-02 15:57:06 2318

原创 crypto报错：“crypto“: require.resolve(“crypto-browser“)

报错详细“Module not found: Error: Can’t resolve ‘crypto’ in ‘D:\Projects\webpack-basic\webpack-ie-test\node_modules\crypto-js’BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify i

2021-05-27 16:29:28 6786 2

原创 webpack（六）code split

code split概念：将一个文件打包生成多个文件，这样做可以将一个大的文件分割成多个小的文件同时并行加载。同时分割成多个文件还可以实现按需加载的功能，按需加载在项目中也是很重要的，比如开发单页面应用，其体积相对来说本身就是庞大的，所以就需要按需将不同的资源加载进来这时就需要webpack的代码分割技术了。第一种方式创建demo1webpack最基础配置const { resolve } = require('path');const HtmlWebpackPlugin = requir

2021-03-26 14:22:44 762

原创 webpack（五）tree shaking

tree_shaking概念把应用程序想象成一棵树，把引入的第三方库或者源代码可以理解为绿色的树叶，而没有引入的库和无用的源代码可以理解为灰色的恶枯萎的树叶，tree_shaking 这一操作就是为了去除这些灰色的无用的树叶（代码），这样会使我们的代码体积更小，请求速度更快，加载速度也更快。tree_shaking前提条件必须使用ES6模块化；开启production环境：mode: ‘production’,简单实现创建demo项目中新建名为test的js文件，定义两个方法，将两个方法

2021-03-26 10:50:51 265

原创 webpack（五）性能优化之缓存

随着前端项目日益增大，code splitting盛行，通过缓存资源文件、实现增量更新来优化用户体验是非常重要的。一般来说，对于静态资源，我们都希望浏览器能够进行缓存，那样以后进入页面就可以直接使用缓存资源，页面直接直逼火箭速度打开，既提高了用户的体验也节省了宽带资源。当然浏览器缓存方法有很多种，这里只简单讨论下 webpack 利用 hash 方式修改文件名，以达到缓存目的。webpack hashwebpack 内置了多种可使用 hash，官网解释分别如下：hash：the hash of .

2021-03-26 09:53:28 452

原创 webpack（四）devtool

devtool可以理解为一种代码调试工具，其配置如下module.exports = {devtool: ‘source-map’}devtool大概有以下几个值，下面是对各个值的作用说明和有无生成外部文件。source-map：外部错误代码的准确信息和源代码的错误位置inline-source-map：内联只生成一个内联source-map错误代码准确信息和源代码的错误位置hidden-source-map：外部提示错误代码的错误原因，但是没有错误位置不能追踪源代码错误，只

2021-03-24 17:55:11 858

原创 webpack（三）生产环境基本配置

所用插件：mini-css-extract-pluginoptimize-css-assets-webpack-pluginhtml-webpack-plugin配置代码及说明注释如下：const { resolve } = require('path');// 将css提取到单独的文件const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 压缩cssconst OptimizeCssAssetsWebpac.

2021-03-24 14:22:43 145

原创 webpack（二）开发环境基本配置

const { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [

2021-03-24 14:17:26 149

原创 webpack：Unknown option: .useBuiltIns，Maybe you meant to use

由于webpack版本的不同各个配置的写法令人头疼，在使用core-js过程中报了如下错误（此时我用的4.0版本）Unknown option: .useBuiltIns. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options. Maybe you meant to use以下是具体报错信息在配置core-js的时候少写了一层use所以会报这个错，加上就可以了。{.

2021-03-23 16:52:53 2406 2

原创手写一个new

new的原理创建一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向 prototype 属性所在函数的指针。而通过这个构造函数，可以继续为原型对象添加其他属性和方法。创建了自定义的构造函数后，其原型对象默认只会取得 constructor 属性；至于其他方法，则都从 Object 继承而来。当调用构造函数创建一个新实例后，该实例的内部将包含一个指

2021-02-19 17:32:12 125

空空如也

安装了crypto-js，却提示找不到模块，怎么解决