前端粉刷匠-优快云博客

2022 年 3 月 29 日，React 团队React 18现在已经可以在npm上使用了!在上一篇文章中，我们分享了将您的应用升级到 React 18 的分步说明。在这篇文章中，我们将概述 React 18 的新特性，以及它对未来的意义。我们最新的主要版本包括开箱即用的改进，如自动批处理、startTransition 等新 API，以及支持 Suspense 的流式服务器端渲染。React 18中的许多特性都是建立在我们新的并发渲染器之上的，这是一个幕后的变化，它开启了强大的新功能......

2022-06-27 16:19:34 647

原创前端埋点数据上传应该怎样实现？

这是一篇埋点总结，刚处理了公司内项目的埋点方案（神策），思考一下如果我自己实现一个埋点，会有什么方案？通常埋点监控的主要功能是：统计PV（页面访问次数）、UV（页面访问人数）、用户点击操作行为等等。还可以进行页面性能分析（首屏加载时间，白屏时间）。监控收集错误报警信息。怎样发送数据使用img的src做请求发送优点：不用做特殊处理，没有跨域的限制，script标签，img标签都可以直接发送跨域的GET请求，兼容性比较好，有些页面可能禁用了脚本，这时script标签久不能使用了。img就没有这个限制。

2022-05-31 15:44:02 1333

原创 mongodb问题：SocketException: Error connecting to 127.0.0.1:27017... mongodb连接失败

错误原因mongodb没有启动解决办法进入mongodb 》bin文件夹中执行下面命令mongod --dbpath ../data/db

2022-05-02 17:46:18 1596

原创重排(reflow) & 重绘(repaint)

在页面的生命周期中：至少会发生一次渲染，在用户访问的过程中，还会不断的触发重排(reflow)重绘(repaint)重绘和重排都会影响性能，尤其是重排，会使我们付出高昂的性能代价。页面生成的过程（浏览器的渲染机制）浏览器采用流式布局模型（Flow Based Layout）HTML被HTML解析器解析成DOM TreeCSS被CSS解析器解析成CSSOM Tree结合DOM树和CSSOM树，生成一棵渲染树（Render Tree）生成布局(flow),浏览器在屏幕上画出渲染树中的所有节点计

2022-04-27 16:05:58 1396

原创 Vue组件间通信方式

props父组件可以通过props向下传递数据给子组件静态的Props通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的动态Props在模版中要动态的绑定父组件的数据到子模版的props，与绑定任何普通的HTML特性相类似，用v-bind，每当父组件的数据发生变化的时候，该变化会传导给子组件props验证可以为组件的props指定验证规则，如果传入的数据不符合规则，Vue会发出警告props: { // 基础类型检测 (`null` 意思是任何类型都可以) prop

2022-03-28 16:03:22 1750

原创 Vue3.2 script setup语法糖阶段一

什么是script setup语法糖？Vue3.0中暴露变量需要return出来，这样template中才能使用，这样用起来极为不方便。Vue3.2中的一个新语法糖，在setup函数中，所有的ES模块导出都被认为是暴露给上下文的值，并包含在setup()返回对象中，相对于之前的写法，语法变得简单。<script setup> ...</script>自动注册组件<tempalte> <Test/> <div>

2022-03-25 10:52:03 1773

原创 Fabric.js 常用基本操作

Fabric.js是一个功能强大且简单的HTML5画布库，它给canvas上的元素提供了交互式对象模型。借助Fabric.js，你可以轻松地绘制各种图形线条图片，对它们进行拖拽、旋转、形变等操作，并且支持丰富的事件方法安装npm install fabric --save// 或者<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/451/fabric.js"></script>创建canvas容器impor

2021-12-27 20:29:24 14659

原创 JavaScript音频编辑

截取音频实现方式：将音频文件数据裁剪，然后复制一份重新存储起来。<body> <input type="file" onchange="printFile()"> <script> const audioCtx = new AudioContext(); function printFile() { var file = document.querySelector('input[type=fi

2021-12-18 17:24:01 4032 1

原创 wavesurfer.js基本使用

音视频

2021-12-17 11:13:52 12858

原创 Nuxt常用生命周期

asyncData官方描述：你可能想要在服务器端获取并渲染数据。Nuxt.js 添加了asyncData方法使得你能够在渲染组件之前异步获取数据。asyncData只限于页面组件调用。第一个参数为context它调用的时机在组件初始化之前，运作在服务端环境。所以在asyncData生命周期中，无法通过this获取当前的vue实例，也没有window对象和document对象。asyncData只在首屏被执行，其他时候相当于created或mounted在客户端渲染页面。⚠️首屏：通过页面地址直接访

2021-11-24 21:04:58 1402

原创 NuxtJS context中常用属性

context是nuxt额外提供的对象。在asyncData，plugins，middlewares，modules，store，nuxtServerInit等特殊的nuxt生命周期区域中都会使用到context。app官方描述：包含所有插件的 Vue 根实例。例如：在使用 axios 的时候，你想获取 axios可以直接通过context.app.axios 可以直接通过 context.app.axios可以直接通过context.app.axios 来获取app是context中的重要属性。类

2021-11-23 10:37:58 2008

原创 pm2入门指南

pm2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控，自动重启，负载均衡等。安装 npm install -g pm2常用命令启动–watch:监听应用目录的变化，一旦发生变化，自动重启。如果要精确监听，不监听的目录。通过配置文件-i --instance:启用多少个实例，可用于负载均衡。如果-i 0 或者 -i max，则根据当前机器核数确定实例数–ignor-watch:排除监听的目录/文件，可以是特定的文件名，也可以是正则,–ignore-

2021-11-22 11:33:25 1445

原创 nuxt.js发布部署

nuxt.js提供三种部署方式，服务端渲染部署，静态应用部署，单页面应用部署。部署前远程服务器需要安装node，pm2，nginx服务端渲染部署nuxt.config.js 配置 target: 'server', // 服务端渲染需要将target设置为server 默认是server首先执行build打包 npm run build将".nuxt(隐藏项目)，static，nuxt.config.js, package.json"这四个文件放在服务器中 np

2021-11-20 20:15:40 4867

原创字体压缩工具

方法1：sfnttoolsfnttool.jar是Google开源项目sfntly中的一个工具可以对指定字体提取出想要的文字，导出更小体积的字体下载地址：https://github.com/googlefonts/sfntly这个必须在有java环境中去允许。所以没有java环境的可以先安装java环境将sfntly项目下载到本地安装ant，java的build工具，下载后解压，配置到环境变量中（具体方法百度ant使用方法）下载完成之后进入到sfntly/java，执行ant 打包，编译的包

2021-11-09 11:02:37 5051

原创 List集合toArray方法和toArray(T[] a)方法

作用：将列表List中的元素导出为数组toArray()toArray()方法导出的是Object[]返回的数组是一个新数组，多次运行toArray方法会生成多个数组对象(存储的引用地址是不同的)，但是这些数组中的内容是一样的。toArray返回的数组是安全的，可以对生成的数组做任意的修改。 public static void main(String[] args) { List<String> list = new ArrayList<>();

2021-08-10 21:40:13 755

原创 video标签

video属性src：视频链接poster：视频封面preload：是否预加载autoplay：自动播放loop：循环播放controls：浏览器自带的操作按钮width：视频宽度height：视频高度 <video id="media" src="./test.mp4" controls width="200px" heigt="400px"></video> //audio和video都可以通过JS获取对象,JS通过id获取video和audio的

2021-07-26 15:03:40 2408

原创 jpg和jpeg的区别

JPEG 是Joint Photographic Experts Group（联合图像专家小组）的缩写，是第一个国际图像压缩标准。JPEG图像压缩算法能够在提供良好的压缩性能的同时，具有比较好的重建质量，被广泛应用于图像、视频处理领域。jpg和jpeg的区别这两种后缀的文件实质上是相同的，严格来说，JPEG的扩展名位.jpeg,但是由于DOS时代的8.3文件命名原则，PC机使用了.jpg的扩展名，由于Mac并不限制扩展名的场长度，因此当时苹果机上都是用了.jpeg的后缀名，虽然现在windows也可以支

2021-07-21 21:34:47 15986 1

原创 H5在全屏webview中双端适配刘海屏

ios适配补充：上面的px单位和我们在web中的px单位虽然一样，但是web所需的px实际为iOS中的pt值，px转pt需要根据设备的ppi(Pixels Per Inch:像素密度进行转换)：px:pixel像素，是屏幕上的显示的基本地，并不是长度单位，这个点可大可小，点小的话就很清晰，我们称之为“分辨率高”，反之就是"分辨率低"，所以像素是一个相对单位。pt:point准确的说死一个专用印刷单位“镑”，大小为1/72英寸，是一个长度单位，也是绝对长度。通过上面表可以看到ios中的px转pt

2021-06-19 20:40:17 3025

转载 sequelize多数据源

config.sequelize = { datasources: [ { delegate: 'model', // 加载所有的模型到 app.model and ctx.model baseDir: 'model', // 要加载的模型目录`app/model/*.js` database: 'db', dialect: 'mysql', host: 'ip', port: 'port',

2021-06-18 21:11:23 448

原创 react-lazyload 源码解析

懒加载也叫延迟加载，指的是在长网页中延迟加载dom(jquery时期常用于延迟加载图片，现在也会用于延迟加载复杂组件)，是优化网页性能的方式之一。当dom不在可视区内时，dom使用占位符展示，当到达可视区后再进行真实dom加载渲染。所以我们首先要判断我们想要加载的内容是否在可视区域。这里应该有一个父级元素和子元素（如果没有父元素，浏览器适口就充当父级元素的角色）来定义”可视区域”的大小。react-lazyload通过监听各个react生命周期，监听scroll，resize两个事件执行相应的操作va

2021-05-14 19:30:35 936

原创 React中的context

context出现的缘由：react中，数据都是自顶而下的传递方式，如果在顶层state中存储数据，如果在不借助第三方的状态管理框架的情况下，想要在自组件中过去数据，就必须一层层传递下去，但是有时候传递的某些层级的中用不到这些数据，这时候层级越深越可怕。正式因为有了上面的这种场景，官方提供了context机制，通过context就可以在自组件里获取祖先组件里的值，而不需层层传递，在react16.3之前context只是官方的实验性API，官方是不推荐开发者使用的，由于有很多开发者使用，所以官方在reac

2021-04-14 17:39:55 1967

原创 Casing of ./index.less does not match the underlying filesystem

问题： Casing of ./index.less does not match the underlying filesystem解决办法：@/pages/User/userList/index.less

2021-03-29 16:20:35 4212

原创仅当 “module“ 选项设置为 “esnext“ 或 “system“，并且 “target“ 选项设置为 “es2017“ 或更高版本时，才允许使用顶级 “await“ 表达式。ts(1378)

仅当 “module” 选项设置为 “esnext” 或 “system”，并且 “target” 选项设置为 “es2017” 或更高版本时，才允许使用顶级 “await” 表达式。ts(1378){ "compileOnSave": true, "compilerOptions": { "moduleResolution": "node", "alwaysStrict": true, "charset": "utf8", "declaration": false

2021-03-11 11:09:15 13050

原创 swiper3 匀速无缝滚动

swiper中最坑的就是版本区别，坑非常多。所以专门总结了一篇自己用过的一个版本安装：npm install vue-awesome-swiper@3 --save-dev自动轮播参数swiperOption: { // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper， // 也就意味着你可以在第一时间获取到swiper对象，<br data-filtered="filtere

2021-02-01 15:06:40 1589 1

原创 JSBridge

JavaScript提供调用Native功能的接口。让混合开发中的前端部分可以方便地使用Native的功能（地址位置、打开摄像头，查看本地相册，指纹支付）JSBridge是Native和非Native之间的桥梁，他的核心是构建Native和非Native间消息通信的通道（而且这个通信的通道是双向的）。双向通信的通道：JS向Native发送消息：调用相关的功能、通知Native当前js的相关状态等Native向JS发送消息。回溯调用结果，消息推送。通知js当前Native的状态等H5与Nati

2021-01-26 22:00:12 2925

原创 axios封装总结

基础的axios封装配置。欢迎大家扩展/libs/request.jsimport HttpRequest from '@/libs/axios'const axios = new HttpRequest(process.env.VUE_APP_URL)export default axios/libs/axios.jsimport axios from 'axios'class HttpRequest { constructor(baseUrl) { this.b

2021-01-19 17:34:45 260

原创 swagger2 使用方法

Swagger为我们提供了一套通过代码和注释自动生成文档的方法，这一点对于保证API文档的及时性将有很大的帮助。可以帮助我们设计、构建、记录以及使用Rest api引入依赖  <dependency> <groupId>io.springfox</group

2021-01-17 20:56:47 484

原创 JS动态添加css3 @keyframes 踩过的坑

这里为什么要动态加呢？因为在@keyframes中px无法转化为vw，所以需要动态计算，计算完成之后再将@keyframes insertRule到style中const myFirstkeyframes = `@-webkit-keyframes myfirst{ 0% { margin-top: ${marginTopOne}vw;

2020-12-17 20:16:02 1540

原创前端工程CDN部署

大型的web引用对于速度的追求不仅仅局限于浏览器缓存，浏览器缓存只是为了提升二次访问的速度。对于首次访问我们需要从网络层面进行。最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速，通过将静态资源缓存到距离用户很近的相同网络运营商的CDN节点上，不但可以提升用户访问的速度，还能节省服务器的带宽消耗。降低负载。不同地区的用户访会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效。如果有效则立即响应缓存内容给用户，从而

2020-12-14 16:11:39 5052

原创 vue项目 H5落地页vue.config.js配置

请大家帮我看看，这个配置中那些地方是多余的，哪些地方需要补充。共同进步。共勉const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const path = require('path');const webpack = require('webpack')const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipEx

2020-12-10 16:39:59 1075

原创多种方案实现图片的懒加载

方案1:clientHeight、scrollTop、offsetTop使用统一的占位图片，当页面滚动到元素的位置之后将默认图片替换掉。 <img src="template.png" data-src="http://cdn.shanguangshipin.com/v_m_v2/e1bad341970243bfb942cbe553b8cf6b.png" /> let img = document.getElementsByTagName("i

2020-10-09 17:35:03 154

原创防抖&节流加强版

节流在定时器的时间范围内再次触发，则不执行，等当前定时器完成，才能启动下一个定时器任务。// setTimeout方法， function throttle1(fn, interval) { let flag = true; return function (...args) { let that = this; if (!flag) return;

2020-10-09 16:27:46 171

原创 react生命周期

16.0版本之前的生命周期生命周期一共费为四个阶段：initialization(组件初始化阶段)，mounting(组件挂载阶段)，update(组件更新阶段)，unMounting(组件卸载阶段)。initialization(组件初始化阶段)import React, { Component } from 'react';class SetWord extends Component { constructor(props){ super(props) }

2020-09-07 15:17:47 312 1

原创 eslint 简单配置

EslintesLint是一个开源的JavaScript代码检查工具，代码检查是一种静态的分析，常用语寻找有问题的模式或者代码，并不依赖于具体的编码风格，对于大多数的语言来说都会有代码检查功能，一般来说编译程序内会内置检查工具。esLint所有的规则都设计成可插入的，eslint的默认规则与其他插件并没有什么区别，规则本身和测试可以依赖同样的模式，因此可配置，插件式式eslint的最大特点。配置方式使用JavaScript注释把配置信息直接嵌入到一个代码源文件中。配置文件式上面两种方式中’配

2020-08-17 21:27:38 818

原创最简dva入门

目前流行的数据流方案：Flux，单向数据流方案：reduxReactive，响应式数据流方案，Mobx上面的缺点是需要引入多个库，会导致项目解构复杂。dva的出现就是将之前的复杂的解构简化。dva的核心概念State：Model中的状态，存储整个应用的状态View：react构成的视图层Action：描述一个事件，改变State的唯一途径connect：绑定state到View，返回的是一个React组件，通常称之容器组件，他是原始UI组件的容器，在原始UI组件外面包了一层State

2020-07-23 17:53:32 433

原创 Ant Design 表单常用组件总结

Form通过Form.useForm()对表单数据域进行交互 const [ form ] = Form.useForm(); // 创建form的控制实例 // form.setFieldsValue 设置表单的值，可以用于表单的回显操作 form.setFieldsValue({ keyword:'测试' }) // form.getFieldsValue 获取字段名对应的值， const keyword = form.getFieldValue('keyword') // 测试

2020-07-22 16:04:17 505

原创 options请求

大家关注到没，在时候开发项目的过程中发送ajax网络请求有时候会有一个option的请求，让我们看起来感觉是请求了两次，刚开始没当回事，今天我们就来剖析一下这个option请求是干嘛的？说这个之前我们先了解一下CORS(cross-origin sharing standard)–跨域资源共享标准。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持，整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来

2020-07-15 22:39:21 572

原创 ES7，ES8，ES10新特性

ES7ES7在ES6的基础上增加了三项内容求幂运算符 **console.log(3 ** 2 ) // 9 Array.prototype.includes()方法includes()的作用是查找一个值在不在数组中，接受两个参数：搜索值和搜索的开始索引。如果没有传递参数默认的索引是0// 下面的这两种方法是等价[1,2,3].indexOf(2) > -1 // true;[1,2,3].includes(2) // true;两种方法都使用的是 === 操作符作值比较，

2020-07-01 16:02:34 542 2

原创 ES6 Module的语法与实现

ES6之前模块的加载方案有：CommonJS(服务器)和AMD(浏览器)两种,ES6中出现这个功能之后完全替代可前面两者。成为浏览器和服务器通用的模块解决方案。ES6模块与CommonJS的差异CommonJS输出的是一个值得拷贝，ES6模块输出的是值的引用CommonJS输出的是一个拷贝，所有模块内部的变化无法影响其他模块。ES6模块加载的机制：只要遇到一个模块加载import就会生成一个只读的引用，等真正执行脚本的时候，再根据这个引用到被夹在的模块中取值，所以ES6模块是动态引用的，并不会缓

2020-06-24 18:34:19 323

空空如也

空空如也