- 博客(96)
- 收藏
- 关注
RSS订阅原创 使用docker构建react项目失败问题（The build failed because the process exited too early）
使用docker进行前端项目构建时报错，但是本地构建正常。完整报错信息The build failed because the process exited too early. This probably means the system ran out of memory or someone called kill -9 on the process.
2022-06-06 08:30:00
1567
原创 使用github免费部署前端项目
前言在平时学习或者开发时，有时候会自己写一些项目和demo出来，当你想要给别人在线展示一下自己写的效果时在本地就会非常的不方便，当然我们也可以购买云服务器来自己搭建部署项目但是麻烦不说还需要花费一定的费用，那么有没有其他办法来部署自己的前端项目呢？答案是：当然有。github上就有可以部署前端项目的功能，下面就让我们一起看下怎么免费又快速的将自己的项目部署成功吧。1、创建项目首先登录到github官网（没有账号的需要自己根据步骤创建一个），然后点击右上角选择New repository （参考第一张
2022-04-27 08:15:00
2980
原创 前端拖拽事件解析-react实现拖拽效果demo
前言在平时开发中会有一些涉及到通过拖拽效果完成的业务需求，那么我们就需要了解和学习拖拽相关的知识，在html5中就有原生的拖拽api，下面就来使用这些api实现一个灵活拖拽的demo。拖拽流程简单来说完成拖拽一共需要三步： 开始拖拽 -> 拖拽中 -> 结束拖拽。在这些步骤中又会有许多更细节的步骤需要处理，完整流程如下：1、设置指定元素为可拖拽元素（使用draggable属性，只有设置了draggable属性，元素才可以被拖动）2、点击拖拽元素开始进行拖拽并监听拖拽开始事件（设置拖拽
2022-04-26 08:30:00
5169
原创 react中的slot插槽功能
在vue中当我们封装组件的时候，经常会用到slot插槽功能用来扩展自己组件使其拥有更多场景的适用，但是在react中是没有插槽这个概念的也没有可以直接使用的slot属性的，下面看下在react中是怎么实现类似插槽功能的。1、props.childrenreact中在组件上传递的参数，都会被子组件中的props属性接收并使用，props除了接收传递参数的这些属性外还有一个隐藏属性children，当使用的组件中间放入东西的时候就会自动的被props中children属性接收,这时我们就可以根据jsx语法的
2022-04-21 08:30:00
8524
原创 react中的computed计算属性-useMemo
在vue中需要根据某些属性进行计算或者映射出别的值时，可以使用computed计算属性，只有当所需要依赖的值改变时才会从新进行计算否则就会直接返回上一次计算的值。在react中时是没有直接这样的属性的，那么下面一起看下在react中时怎样实现计算属性功能的呢？
2022-04-07 08:00:00
2506
原创 react中的watch监视属性-useEffect
在vue中可以使用watch属性，去监视一个值，当这个值进行变化的时候就去执行一些操作。在react是没有这个属性的，但是它也一样可以达到相同的效果.
2022-04-06 08:30:00
9873
原创 react中v-for列表循环
前言：在vue中如果想要将数组中的数据进行循环的时候可以直接使用封装好的v-for指令进行实现，但是在react中是没有这种指令的，那么在react中是怎样实现列表的循环呢，下面一起看下react中是怎样实现的。1、数组中的数据渲染在平时开发中我们经常会遇到数组包含一系列数据的情况，然后在页面上展示出符合条件的数据，在react的jsx语法中我们可以直接将数组循环并将需要渲染的元素返回即可，如：import React from 'react'const listData = [ { i
2022-03-16 09:00:00
4546
原创 react中的v-if条件渲染
前言：在vue中根据变量或者表达式来控制dom元素和组件的展示与隐藏，但是在react中没有封装好的指令可以使用，下面一起看下在react中是怎样实现v-if类似的效果。1、单个元素（组件）渲染在react中使用了jsx语法，在jsx语法中可以直接将表达式和元素写在一起，所以在react中实现条件渲染就可以直接使用js中的 && 运算符，如：import React, { useState } from 'react'export default function Condition
2022-03-14 09:00:00
10485
原创 react中通过dom元素属性传递和获取参数的方法
react中通过dom元素属性获取参数的方法我们在平时开发中遇到一个列表展示很多内容，然后点击列表中的某一项进行操作时需要获取当前项数据的参数，一般来说都是使用事件函数直接传参的方式进行获取，今天记录另一种通过dom元素自身属性获取参数的方式。1、通过事件函数传参首先来看下通过事件回调函数进行的传参方式，完整代码如下：import React from 'react'const dataList = [ { id: 1, name: '小明',
2022-02-27 15:25:45
1310
原创 wangEditor富文本编辑器自定义图片上传
wangEditorV4版本自定义图片上传给大家推荐一个好用又轻量级的富文本编辑器wangEditor v4版本。wangEditor富文本的文档也比较全面，而且易上手。文档地址：wangEditorV4虽然文档想对来说比较详细但是在使用上传图片的过程还是遇到了一点点小问题在此记录下来问题描述：wangEditor自己在上传图片的时候直接上传到阿里云服务器跨域问题（wangEditor支持直接配置上传的地址进行图片上传，但是我门的图片不上传到自己的服务器而是推到阿里云，所以直接上传就会有跨域问题）
2021-10-21 10:34:15
3386
原创 js中数组flat方法的使用和实现
js中数组flat方法的使用和实现定义flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。语法var newArray = arr.flat([depth])参数depth 可选指定要提取嵌套数组的深度，默认值为 1。返回值一个包含将数组与子数组中所有元素的新数组。（就是扁平化后的每一项重新组成的数组，所以不会改变原数组。）使用示例扁平化数组，不传递参数的时候默认为一层let arr = [1,2,[3,[4,[5]]]]
2021-09-15 11:50:48
25954
1
原创 vue中监视多个属性，执行同一个方法，初次加载只执行一次
Vue中监视多个属性，执行同一个方法，初次加载只执行一次，防止重复执行需求：当form表单的多项内容每一项改变后，都会去请求接口返回实时的数据。原解决方法：在watch中分别监视改变的数据，当数据改变时就触发请求的方法。如：问题：这样做其实需求功能可以正常实现，但是因为表单中的数据在初始化的时候会反显，所以此时监视到数据变化就会多次触发同一个方法。其实初始化只需要执行一次就可以。优化方法：首先将表单中多个需要监视的属性放到计算属性中如：然后去监视这个添加的计算属性，触发后执行请求的方法
2021-08-05 21:56:31
3991
原创 js中数组indexOf方法的使用和实现
js中数组indexOf方法的使用和实现IndexOf方法定义indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。IndexOf方法语法arr.indexOf(searchElement[, fromIndex])参数searchElement要查找的元素fromIndex 可选开始查找的位置（默认从0 开始）。返回值首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1详细描述indexOf方法查找到第一个传入的元素，并返回当前元素的
2021-08-02 11:32:10
27040
原创 js中数组find方法的使用和实现
js中数组find方法的使用和实现find方法定义find() 方法返回数组中满足传入函数条件的第一个元素的值。否则返回 undefined。find方法语法arr.find(callback(element [, index[, selfArr]]) {} [, thisArg])find方法参数callback在数组每一项上执行的函数，接收 3 个参数：（1）element当前遍历到的元素。（2）index可选当前遍历到的索引。（3）array可选调用find方法的数组本身。
2021-08-01 14:45:01
11521
原创 js中数组reduce方法的使用和实现
js中数组reduce方法的使用和实现reduce方法定义reduce() 方法对数组中的每个元素执行一个传入的callback回调函数(升序执行,空值和已删除的除外)，将其结果汇总为单个返回值。reduce方法语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])reduce方法参数callback自己传入的为数组中每个值 (如果没有传入 initialValue则第一个值除外)执
2021-07-28 20:21:18
1085
原创 js中数组filter方法的使用和实现
js数组中filter方法的使用和实现MDN定义filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。语法var newArray = arr.filter(callback(element[, index[, selfArr]])[, thisArg])参数callback循环数组每个元素时调用的回调函数。回调函数返回 true 表示保留该元素，false 则不保留。它接受以下三个参数：（1）element数组中当前正在处理的元素。（2）index可选正在
2021-07-24 15:31:52
9194
3
原创 js中数组map方法的使用和实现
js中数组map方法的使用和实现MDN中定义map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。语法var new_array = arr.map(function callback(currentValue[, index[, selfArray]]) {// Return element for new_array}[, thisArg])参数callback生成新数组元素的函数，使用三个参数：（1）currentValuecallback 数
2021-07-22 09:59:31
6063
原创 js中数组forEach方法的使用及实现
js中数组forEach方法的使用及实现首先来看下mdn中的介绍描述forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过。（说白了就是去循环数组中的元素，每循环一次就调用一次传入的函数。并且在被调用时，不会改变原数组）语法arr.forEach(callback(currentValue [, index [, arrSelf]])[, thisArg])参数描述callback为数组中每个元素执行的函数，该函数接收一至三
2021-07-17 15:19:24
5591
原创 基于element-ui中table表格组件进行二次封装
基于element-ui中table表格组件进行二次封装在平时开发的时候很多情况都会使用到表格和分页功能，所以根据用到的表格功能做一个基础的封装并记录下来，如果有其他功能需要添加直接在此基础上进行扩展即可。基础功能1、 表格内容的正常显示2、 表格内容需要处理后显示（如时间戳转换，枚举值转换等）3、 表格添加标签、按钮或者操作列内容显示4、 全选功能5、 其他原有的属性，如宽度，内容对齐等等属性可以值接使用6、待扩展封装组件1、 基于element-ui的table组件和Paginati
2021-07-14 20:01:02
3549
5
原创 js中的bind方法并模拟实现自己的bind方法
Js中bind方法使用和实现前面我们已经模拟实现了call和apply方法，今天来实现下同样可以改变this指向但是又有点不同得方法 bind方法。定义首先来看下bind方法在mdn中得定义，bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。语法function.bind(thisArg[, arg1[, arg2[, …]]])参数thisArg 调用绑定函数时作为 th
2021-07-04 21:06:16
617
原创 js中的apply方法并模拟实现自己的apply方法
apply方法定义call()方法，在mdn中的定义：apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。（它的作用和使用和call方法一致，唯一的区别就是call方法传递的是一个个参数的列表，apply方法传递的是参数的数组集合。Call方法详细请看call方法解析）语法func.apply(thisArg, [argsArray])apply方法传递两个参数，第一个参数传递的是所要改变指向的值(当该函数处于非严格模式下，则指定为 null 或
2021-06-20 20:49:02
1266
原创 js中的call方法并模拟实现自己的call方法
定义先来看下call()方法，在mdn中的定义：call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。（其实就是改变函数的this指向，并且调用该函数）语法Function.call(thisObj, res1, res2, …);call方法传递两个参数，第一个参数传递的是所要改变指向的值(当该函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。)，后面是所要传递的参数（参数可以为多个）。返回值返回调
2021-06-02 20:23:34
905
原创 js中的设计模式之发布订阅模式
发布订阅模式是什么它其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。（如微信公众号一样有无数个订阅者，有一个发布者，当发布者发布文章的时候，订阅者都可以收到发布的文章。）平时使用前端在之前使用jq的时候就有使用到发布订阅模式例如有trigger和on方法，现在vue中也经常使用到如：事件总线进行组件间的传值、子父组件间的传值、vue实现双向绑定等等。手动实现我们平时用的发布订阅模式需要有订阅on方法和发布emit方法，所以我们首先实现一个最简
2021-05-25 20:20:12
3708
1
原创 纯css实现tooltip文字浮框
在平时开发中会遇到展示不全的信息或者一个图标，鼠标移入后展示出更详细的内容浮框需求，现在使用的组件库都有这个功能组件，直接引入使用即可。但是有时候项目没有引入组件库，或者无法使用组件的时候，自己可以使用纯css来实现自己的tooltip浮框。一、全部使用伪类实现思路1、 在文字显示的标签内增加浮框的内容2、 使用伪类：：before设置浮框3、 使用伪类：：after设置三角形（实现三角形设置元素宽高为0，三个边框颜色透明）4、 使用定位设置浮框和三角形距离文字标签的距离5、 给元素设置不同属
2021-05-23 10:15:54
1283
原创 js中new操作符做了什么并实现自己的new操作符
我们通过new运算符的使用，来探寻new操作符在执行的过程中究竟做了哪些操作，并且根据操作实现自己的new运算符。定义new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。使用先看正常使用new运算符调用构造函数function Test(testText) { this.testText = testText;}Test.prototype.console = function() { console.log(this.testText);}let
2021-05-15 11:54:04
1790
原创 es6中的set和map类型
Set与mapEs6中新增加了两个数据类型set和map类型，下面就看下这两个类型的特性和用法。一、 Set特性和定义Set它是一种有序列表并且它的值没有重复。创建 Set 并添加项目Set 使用 new Set() 来创建，如果想要往Set中添加值可以使用add()方法进行添加。查看Set中有多少项值，使用 size 属性 。如： let mySet = new Set(); mySet.add(1); mySet.add("1"); console.log(m
2021-05-09 11:02:47
546
原创 js中instanceof方法的使用和实现原理
instanceof方法的定义MDN上对instanceof方法的定义非常的简洁明，instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。MDN 地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instaniceof使用下面是一些根据定义简单的使用方法，右边参数的prototype 属性在左边参数的原型链上时就返回true，否则返回fals
2021-04-30 09:44:04
1544
原创 js中获取数组中的值出现的次数
如果我们想获取数组中每一项值出现的次数，可以使用下面的几个方法。方法一思路利用对象存储数组每一项的值为key，然后判断是否已经存在对象中。步骤1、 先创建一个空的Object2、 然后循环目标数组的每一项3、 将目标数组循环的项作为空对象的key，判断key对应的值是否存在4、 不存在就添加当前项为对象的key并把值设置为1（也就是第一次出现）5、 如果已经存在的话，则把当前的值+1即可。代码如下let arr1 = [1,2,2,3,3,3,'a','b','b','c','c','
2021-04-29 09:31:39
12969
原创 es6中箭头函数解析
特性：1、 没有 this 、 super 、 arguments ，也没有 new.target 绑定。2、 不能更改 this 。3、 不能被使用 new 调用。4、 没有原型。5、 没有 arguments 对象。6、 不允许重复的具名参数： 箭头函数不允许拥有重复的具名参数，无论是否在严格模式 下。语法箭头函数的语法有很多变种，当只有单个参数时就是参数跟着一个箭头然后直接接返回值，就会把箭头后面的值返回不用使用return关键字。如：var arrFn = value =>
2021-04-24 09:24:56
276
原创 es6中函数的默认参数用法和解析
带默认值的参数函数中的参数可以传入默认值，当有实参传入的时候就赋值实参，当没有传递实参的时候或者指定传递的参数为undefined时，形参就会使用默认值。如：function getNum(num1, num2 = 5) { return num1 + num2;}console.log(getNum(1)); // 6console.log(getNum(1, 1)); // 2console.log(getNum(1, undefined)); // 6参数默认值表达式函数参数
2021-04-18 15:21:53
553
1
原创 es6中的解构赋值
一、 对象的解构对象结构赋值的语法就是在表达式的左侧使用了对象的字面量方式，将对象中的值赋值到左侧相同的变量上。语法如下： let obj = { name: '姓名', age: '年龄' } let { name, age } = obj; console.log(name, age); // 姓名 年龄上面的对象结构都用于变量声明，也可以在赋值的时候使用解构,在声明变量后改变他们的值（注意：必须用圆括号包裹解构赋值语句，否则报语法错
2021-04-17 11:26:11
385
原创 js中的模板字符串
es6中增加了模板字符串，使字符的操作更加灵活和解决复杂的问题。语法：使用反引号( ` )来包裹普通字符串。如：let message = `Hello world!`; console.log(message); // "Hello world!"console.log(typeof message); // "string"console.log(message.length); // 12在模板字符串中可以将任何有效的 JS 表达式嵌入到模板字面量中，并将其结果输出为 字符串的一部分。
2021-03-28 16:57:40
634
原创 前端进行页面跳转和页面刷新的方法
Js中进行页面跳转的几种方法一、 在当前窗口进行跳转1、 使用a标签进行跳转<a href="//www.baidu.com/">跳转</a>2、 使用window.location.hre进行跳转window.location.href = '//www.baidu.com';二、 打开新的窗口进行跳转1、 使用a标签进行打开跳转<a href="//www.baidu.com" target="_blank">跳转</a>2、 使用
2021-03-15 20:24:59
3302
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人