C_心欲无痕-CSDN博客

原创前端对文件转换处理的一些常用方法

注意：不要把视频文件转成base64，因为base64格式本质是一串很长的字符串，如果在手机端上传大一点的视频文件并有`转bsee64的操作`，那么就会导致页面自动刷新、程序崩溃、甚至浏览器直接被系统杀掉，因为视频的base64字符串太大会撑报内存的。

2023-08-18 11:20:18 1360 1

原创 React - useEffect函数的理解和使用

`useEffect` 是 `react v16.8` 新引入的特性。我们可以把 useEffect hook 看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个生命周期的组合。可以让你在函数式组件中执行一些副作用操作；

2023-08-11 10:59:32 8085 3

原创 Redux - Redux在React函数式组件中的基本使用

reduce的本质就是一个函数，作用是初始化状态和加工状态。reduce函数里面接收两个参数，第一个参数是state的初始值，第二个参数是一个action对象，对象里的第一个属性是`type`也就是函数的名称，第二个属性就是传进来的值，用于后续更改state；

2023-08-10 17:44:47 2120

原创 vue3 - 使用reactive定义响应式数据进行列表赋值时，视图没有更新的解决方案

上面的代码 `reactive([{name:'Eula'}]) `创建了一个响应式数组，返回一个Proxy包装的对象由`userInfo`变量进行存放，但是后面我又把一个普通的数组（也就是后端返回的数据）赋值给`userInfo`，注意这时`userInfo`这个变量存放的已经是一个普通的数组了，当然也就不具备响应式了；

2023-08-09 16:34:43 12021 1

原创 ES6 - 对象新增的一些常用方法

再ES5中比较两个值是否相等，只有两个运算符：相等运算==和严格相等运算符===但它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及`+0`等于`-0`。

2023-08-04 11:17:55 1327

原创 ES6 - 数组新增的一些常用方法

`Array.from()`方法用于将两类对象转为真正的数组：类数组对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。

2023-08-03 17:25:39 1875 3

原创 ES6 - 字符串新增的一些常用方法

includes() 返回布尔值，表示是否找到了参数字符串；startsWith() 返回布尔值，表示参数字符串是否在原字符串的头部；endsWith() 返回布尔值，表示参数字符串是否在原字符串的尾部；

2023-08-02 17:51:22 897

原创 ES6 - generator和async函数

Generator 函数是ES6提供的解决异步编程的方案之一；整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。Generator 函数的执行方法如下。

2023-08-02 15:49:39 451

原创 ES6 - Iterator迭代器和for...of 循环

遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

2023-07-31 12:29:01 745

原创 ES6 - promise.all和race方法的用法详解

Promise用来解决异步回调问题，由于js是单线程的，很多异步操作都是依靠回调方法实现的，这种做法在逻辑比较复杂的回调嵌套中会相当复杂；也叫做回调地狱

2023-07-28 17:22:18 1320

原创 SVN - 记录一下无法提交代码提示：被锁定（locked）

今天遇到一个问题，svn 在提交代码的时候出现了svn is already locked，导致代码无法提交和更新（update）

2023-07-27 17:01:58 2238

原创 vue - 优雅的vue2项目总体结构

在多人合作的 Vue 项目中，或多或少会使用到 vue-router / vuex / axios 等工具库。本文在基于 vue-cli webpack模板生成的目录结构基础上，建立一个`利于多人合作`、`扩展性强`、`高度模块化`的 vue 项目目录结构。

2023-07-24 11:31:22 2899 3

原创 js - 关于BOM浏览器对象模型

Boml浏览器对象模型 ,一个浏览器的窗口就是一个window对象，定义了一套操作浏览器窗口的API，可以看做js的顶层对象。

2023-07-21 15:28:02 552

原创 js - 关于防抖和节流函数的使用和细节

事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。必须等待规定时间后才执行此函数；

2023-07-21 09:46:14 342

原创 vue3 - 插槽 Slots的使用

我们知道子组件能够接收父组件任意类型的 js变量作为 `props`进行使用，那如果父组件想要传递给子组件 html标签、模板片段、甚至是一个组件呢，那么子组件应该怎么接收呢？

2023-07-20 09:59:34 1023

原创 js - 关于ES6 Module模块化的跨域报错

`来自orgin的null`已被CORS策略(同源策略)阻止:跨源请求只支持协议方案:http，数据，chrome, chrome-extension, https。

2023-07-19 14:25:47 1802

原创 js - 对forEach()函数的一些理解

forEach()`方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach()对于空数组是不会执行回调函数的。

2023-07-18 17:36:30 4160

原创 vue - 常见的性能优化

在 Vue2 中 v-for 优先级更高，所以编译过程中会把列表元素全部遍历生成虚拟 DOM，再来通过 v-if 判断符合条件的才渲染，就会有多余的逻辑判断和造成性能的浪费，因为我们希望的是不符合条件的虚拟 DOM都不要生成；

2023-07-17 15:44:38 1074

原创 vue的生命周期和执行顺序

首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated再次进入缓存页面：beforeRouteEnter --> activated --> deactivated

2023-07-17 14:24:05 1222

原创 vue Router(v3.x) 路由传参的三种方式详解

vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。

2023-07-14 16:15:00 15416 1

原创 ios中关于video标签poster属性兼容问题（ios视频截帧）

ios中关于video标签poster属性兼容问题（ios视频截帧）要想在video标签中显示首帧画面, 需要添加poster属性, 属性值应该是图片的url；或者直接使用img标签替代video的位置，当点击播放的时候再弹层展示需要播放的视频；

2023-07-14 15:14:43 5087 3

原创 nvm的安装和使用

nvm全名node.js version management 它是一个nodejs的版本管理工具；通过它可以安装和切换不同版本的nodejs；

2023-06-16 17:18:59 440

原创 vue3 - 内置组件Teleport的使用

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。也就是说我有一个全屏的弹出框（模态框）或 Toast 轻提示组件，可能会在多个组件中使用到，但是由于节点嵌套的太深，我想把它的dom元素放在最外层的容器上面；通过组件传参控制它的显示于隐藏；

2023-06-13 16:32:01 5302 3

原创 react-routerV6 路由传递参数的三种方式

react-router V6 传递参数的三种方式：search 传参的方式比较简单，参数的形式以问号拼接到地址后面params 方式传参要求会多一些，需要我们在`路由表配置`的位置添加一个参数占位使用state传参时，参数需要放到state对象里面；

2023-06-07 14:20:42 5969

原创 js - 匿名函数和箭头函数理解

匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！（在ES5中就已经有了匿名函数）箭头函数是ES6中新增一种语法，属于匿名函数；将函数更加简单化的写法

2023-05-19 16:38:05 4850 1

原创 css - 盒子水平垂直居中的几种方式

前端div盒子水平垂直居中的几种方式:使用子绝父相，利用css3新增`transform的translate`属性来进行垂直居中；translate可以同时传两个属性，第一个是水平方向移动距离，第二个是垂直方向的移动距离；translate中的%百分比相对的是自身的，也就是向左向上走自身的%50来实现居中效果；

2023-05-11 09:17:22 1299

原创 js - typeof与instanceof类型判断的区别

`instanceof`：用于检测构造函数的 `prototype` 属性是否属于某个实例对象的原型链上；它有两个必传参数，左侧必须为某个实例对象，右侧必须为某个构造函数。返回值为 Boolean 类型;这说明`instanceof`是与原型和原型链有关系的，在弄懂instanceof之前我们就必须要了解什么是原型和原型链；

2023-05-09 17:05:59 672

原创 js - 原型和原型链的简单理解

函数即对象，每个函数都有一个prototype属性，而这个属性就是这个函数的原型对象，在原型对象上定义的属性或方法，会被该函数的实例对象所继承，实例对象可以直接访问到原型对象里面的属性或方法。

2023-05-09 14:39:39 404

原创 vue - 常见的移动端rem适配方案

rem是一个相对单位。是相对于根元素html的font-size宽度值。大多数浏览器默认字体宽度是16px(如果没有设置过)，也就是 1rem = 16px;

2023-05-05 18:07:35 4887 1

原创 vue - 移动端实现对div的拖动功能

主要是改变定位元素的定位值来实现位置的移动；定位值 = 手指滑动中的位置 - 手指刚触摸时候的初始位置和距离限制；

2023-05-01 12:26:56 2916

原创 vue - pc端实现对div的拖动功能

vue中pc端实现对div的拖动功能1，`mousedown()` 鼠标按下时需要计算位置差，因为clientX和offsetLeft的属性返回的位置不一样要相减得到鼠标在拖动元素内实际点击的位置，后面每一次拖动时都要减去这个差值否则就会造成你拖动的位置一直都是元素的左上角而不是你之前点击的位置；

2023-04-27 18:04:03 4717

原创 vscode - 配置Prettier插件和.editorconfig文件使用介绍

Prettier是一个固执己见的代码格式化程序。它通过解析代码并使用自己的规则重新打印代码来强制实现一致的风格，这些规则考虑了最大行长度，并在必要时包装代码。

2023-04-27 17:17:48 10550 1

原创 js - 关于循环中有await等待异步操作的情况

有上传多个文件的需求，要求上传的时候要求对每一张图片打水印操作，但是打水印这个操作是异步的，想要保证图片上传的顺序和上传完成的结果；需要我们在循环中使用 await等待这些异步操作，保证他们是按照顺序依次执行完成的；会有以下几种处理方法：> 1，普通的for循环> 2，使用 forEach( ) 循环 `注意：此方法不支持还是异步循环的`> 3，利用promise.all( ) 方法

2023-04-21 19:19:12 1896