自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(35)
  • 收藏
  • 关注

原创 多行文本溢出最后一行显示省略号

1.我们经常遇到一行数据多出来,一般处理方法设置了宽度,做以下设置:overflow:hidden;white-space:nowrap;text-overflow:ellipsis;2.多行文本 display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;效果:...

2021-11-10 11:14:49 145

原创 css动画实现鼠标移入图片放大,移出缩小的功能

图片样式:img { width: 150px; height: 150px; transition: all .3s ease-in 0s; }

2021-11-05 09:46:46 22

原创 react父子组件传值报错

场景:调用子组件1)分析问题:Type 'XXX' is not assignable to type 'Omit<WrappedComponentProps<any>, "intl">'.子组件的类型好像有问题,且和intl国际化有关,去掉子组件的国际化和路由2) 还是会报错报错:类型“{ pageValue: pageValue_type | undefined; }”与类型“IntrinsicAttributes & { chil..

2021-11-03 11:44:08 12

原创 webpack入门学习

1.概念来自官网:本质上,webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。简单总结一下:1)它是一个j前端打包工具;2)我们普通的前端程序,是由html、js、css等文件,还有许多资源组成,而webpack,会把他们全部整合成一个包,讲这些...

2021-10-27 23:42:23 34 1

原创 如何画一个对话气泡框(css实现)

如何实现类似于下图的对话气泡框呢​​​​首先我们明确思路:一个正方形的div框和一个三角形组成,纯css实现下面我们一步步实现效果。1.先画出一个矩形框.div{ border: 2px gray solid; background-color: yellow; width: 150px; height: 100px; border-radius: 10px; margin-top: 50px;

2021-10-24 14:10:54 13

原创 js读取txt文件中的内容

拿到file文件对象之后1)新建一个fileReadervar reader = new FileReader();2)读取文件中的内容reader.readAsText(file, "UTF-8");3)需要读取文件中的内容reader.onload = function (e) { const val = e.target.result;}注:再回调函数中使用读取的数据下面直接写一个例子:实现了读取多个文件并展示文件的内容<!DOCTYPE h

2021-10-14 17:14:32 58

原创 【总结记录】Superset中dashboard图表进行html的编辑并转为pdf下载

需求:使用superset搭建的BI项目,需要在dashboard模块中,可以编辑所选的图表,并且将html下载为pdf格式的文件。BI页面展示大体如下:功能分析1.首先,我们需要一个预览功能,那就点击右上角三个点的按钮,弹出弹窗展示范围内的图表即可,这个实现的话主要就是把图表拿过来的过程,这个具体看代码如何实现;2.然后我们需要在弹窗对html进行编辑操作,我们看到可操作性的不知图表还有text、table以及input输入框等内容,我们需要一个专业的插件的开完成,于是我们找到了jodi.

2021-08-24 15:33:54 44

原创 React中将HTML对象渲染在dom页面中

如果在html的页面中,我们使用复制并渲染一个dom对象应该:获取dom元素(html 对象)====>转为htm字符串el.outerHTML====>拿到将要复制到的dom使用innerHTML进行赋值操作,如下所示:在react中不能使用这种方式,那我们就要用到dangerouslySetInnerHTML对象,它是一个object类型,我们的html通过属性__html(string类型)传入:const [html_str, set_html_str] = useS.

2021-07-28 16:05:17 39

原创 前端性能优化

在工作学习中积累记录一些优化的方法一.代码层面1.循环①有一个等差数列求和我们可能优先会想到for循环,如下:let arr = [1, 2, 3, ..., 100];let sum = 0;for (let i = 0; i < arr.length; i++) { sum += arr[i]}console.log(sum);上面有两种方式可以优化一下,比如arr.length,可以提前声明一下,因为每次求长度的动作计算机还是回去算一下,我们这样:le

2021-07-07 23:49:58 20

原创 深拷贝与浅拷贝

1.如何区分深浅拷贝简单来说:存在一个对象或者数组A,将A赋值给B,若改变B中的一个属性或者元素,如果导致了A的变化,那么这就是浅拷贝,反之是深拷贝,之前在数据类型中学习了,对于引用数据类型,只有地址重新声明了,那么改变数据就不会影响之前赋值的数据,这就是深拷贝。2.深浅拷贝的方法对于基本数据类型,每次声明都会开辟一个新的栈地址,所以理论上每次赋值都是深拷贝,所以这里我们只讨论引用数据类型。1)浅拷贝①对于数组或者对象,直接用等于号赋值的话,就属于浅拷贝,如下:let arr1 =

2021-07-07 00:01:29 14

原创 数据的存储形式-堆栈

1.什么是堆和栈堆:计算机中引用类型数据的存储空间栈:计算机中基本数据类型的存储空间2.他们是如何存储的每一个基本数据类型声明的时候都会开辟一个新的栈,例如:let a = 1; let b = a; console.log(b);我们现在打印出b,没有问题它将a的值赋给了b,所以这里是1;那么我们改变b的值将它赋值为2;那么我们可以想到b就变成了2,那么a的话就是1,因为他们在计算机中存储开辟了两个栈的存储空间,改变b的值并不会影响到a的值;那么按照上面的方式,我

2021-06-30 23:43:54 29

原创 js中数据类型判断

拉代码的时候报错:猜测是权限问题网上找了一些资料试了一下有效,解决方法:我是重新下载,带上自己的用户名称:git clone http://姓名@xxxx.com.cn

2021-06-29 23:46:23 29

原创 关于react路由和ngnix代理的路径冲突报错404

最近踩了一个坑:前端路由可正常跳转,但是刷新之后就会报错404 not founda.前端配置的代理如下:location /app { proxy_pass https://api-appbuy-ews.axa.wise-paas.com.cn/v1; }b.写路由的时候也配置了一个app的路径:<Route path='/appInfo/:appName/lang/:lang' component={AppInfo} />进

2021-06-24 13:47:20 33

原创 报错:Cannot find module ‘xxx.svg‘ or its corresponding type declarations.ts(2307)

rreaceact1.react项目中直接引入图片报错问题我想可能是不能直接引用图片进来,应该需要设置才行,从报错来看的话就是ts检查的问题查询了一些资料得出结论,有ts项目的项目中,不能直接引用图片资源的,因此我们需要去主动声明这类资源(.d.ts文件),原因就是这样;2.解决方法https://www.cnblogs.com/chen-cong/p/10445635.htmlhttps://segmentfault.com/a/1190000038874526不做无用功了,两

2021-06-21 10:08:49 1529

原创 react项目中实现滚动页面后 导航栏固定在页面顶部

1.有个css需求:每一个卡片需要占一行,但是他的宽度又需要随着卡片里面的内容变化,你会怎么解;答:我设置了一个display: inline-block,将div从k

2021-06-09 10:05:57 244

原创 【React小技巧】如何解决上传文件时onChange选择相同文件不会再次触发

场景:上传文件后,再次选中相同文件上传,onChange事件不会再次触发分析:在第一次上传后,如果不清除input框的value值,那么它就是一直存在的,只要在上传未完成后,手动将val

2021-06-04 10:17:34 109

原创 Flex布局实践

1.什么是flex布局,它能做什么flex布局翻译为弹性布局,就是会根据外层容器的变化,呈现不同状态,使布局更加灵活方便,任意一个容器都可以被定义为flex布局,我们在平常开发中,移动端使用多一些,像水平排列的导航栏,还有页面上的元素布局,都可以使用flex布局。看了一些文档,我们照猫画虎,也从它的6个属性出发实践一下,GO!!注:六个属性分别是---flex-direction、flex-wrap、flex-flowjustify-content、align-items、align-cont.

2021-05-20 18:19:17 35

原创 es6及以上版本开发学习记录

1.es6语法1)Array.find寻找数组中满足条件的第一个元素,没有找到返回undefinedeg:找到数据中心instance不存在的对象我们查看一下代码及打印结果,去掉否定,代码帮我们可以找到第一个不是undefined的元素,...

2021-04-23 11:05:06 23

原创 函数防抖和函数节流

无论是从网站的性能还是易用性方面,函数防抖和函数节流都是我们学习前端绕不开的内容,一些大厂的面试也经常会问到,下面我们就结合实例来看一下。函数防抖1.什么是函数防抖 要弄清函数防抖,我们就要知道函数为什么会抖,比如:有一个输入框,当我们每次输入数据的时候,就会触发change函数,继而会触发一系列的逻辑操作,这个还没什么,要是每次change都触发了接口,那就会大大降低网站的性能,消耗服务器的资源,在短时间内重复触发函数这种场景就是函数抖动。 那么函数防抖就出现了...

2021-03-15 23:30:03 50

原创 【react原理】demo实现render方法及React.createElement方法+解析

react源码学习及实现参考文章:https://blog.csdn.net/weixin_44135121/article/details/109360907;项目demo + 解析文档地址:https://github.com/xa-fz/miniReact

2020-12-24 01:00:30 152

原创 React的Diff算法

1.React的渲染机制 要掌握react的Diff算法我们必须先了解一下其渲染的机制:在每一次的状态或者属性更新的时候,react组件的render方法会进行渲染,返回一个虚拟DOM对象,这个就是react的渲染机制。2. React的Diff算法 但是这里就有个问题,每次生成新的DOM结构,也还是要转化为真实的DOM,还是会带来大量的真实DOM的操作,会影响程序的执行效率。这时就涉及了react的比较状态变化前后的两个树的Diff算法:在状态变化后通过比较两次虚拟DOM...

2020-12-13 13:45:29 93

原创 Js数组去重

js数组去重 参考《web高效编程与优化实践》--李银城著let arr = [3,62,11,5,1,33,23,33,18,33];1.使用Set+Arrayfunction uniqueArray(arr) { return Array.from(new Set(arr));}优点:代码简洁,速度快;缺点:Set和Array都需要另外分配存储空间;2.Arrayfunction uniqueArray(arr) { let ret...

2020-12-08 23:35:23 36

原创 实践一下css中的position属性

总结一下position属性的各种值,直接开始1.position:static没有定位,处于上下文中,或者说是文档流中,从下面两幅图中我们可以看到,它会忽略left、right等属性(z-index也会忽略,这里不再实验);如果给word外面加一层div,下图所示:它会相对于父元素进行margin-left:20px,这就是上面说的他在文档流中;2.position:absolute我们从页面可以看到,abs的div和word的div重合了,这也就是说,absolute绝对定位

2020-12-02 16:15:48 56

原创 【二】跟着react官网学习__Refs and the DOM

由一个日常开发的demo展开学习:react项目,想在无状态组件中获取input的dom节点,使用ref报错:提示中可以看到无状态组件中应该是不能使用ref获取DOM节点的,但它给出提示React.forwardRef,我们去查询一下它的用法,查询了react官网(链接在这里https://reactjs.bootcss.com/docs/refs-and-the-dom.html)。1.让我们记住官网说明的这两句话1)你只要记住不能在无状态组件上使用ref,因为没有实例,this根本无法指

2020-10-29 01:16:56 54

原创 【一】跟着react官网学习__Context

Context提供了组件之间数据共享的解决方案,相比之下,若组件嵌套过深,或者在多个组件使用,props传递则显得较为不便,我们熟悉的react-redux它的原理其实也是使用了context原理,使用provider将数据分发到包裹的组件中,实现数据的共享,下面我们就结合官网中的例子开始context的学习。1.基础用法首先举了一个两层嵌套,在三个组件中数据传递的例子,就是将属性使用props.属性从第一个组件传递到第二个,再传递到第三个组件,如下图所示:如果使...

2020-09-08 15:56:20 58

原创 理解js的原型链及继承方法

一. 认识原型链JS的构造函数 在ES6之前没有class关键字,使用构造函数来实例化一个对象,构造函数方式方法首字母需要大写,如下: function GetMsg(name, age){ this.name = name; this.age = age; } ...

2020-01-28 16:22:04 103

原创 react常见面试问题(持续更新)

1. React16的周期函数React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps,componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。getDerivedStateFromProps:组件每次被 reren...

2019-10-30 23:12:07 526

原创 认识ref及其使用场景

本文是参考自-《React进阶之路》简介Ref是react提供的是一种特殊属性,可以获取任意DOM元素甚至可以获取组件的实例,灵活使用ref可以给我们带来便利,例如控制元素的焦点或者文本的选择等,ref会设置一个回调函数,这个回调函数会在组件挂载的时候接收DOM元素或者实例作为参数,这样我们就可以去操作它们了,下面我们具体介绍它的使用场景。使用场景在DOM元素上使用ref这个场景是最...

2019-10-29 23:45:15 338

原创 在react脚手架中添加less预编译工具

直接开整,你需要官方下载的一个react脚手架项目即可。1.切换到项目下,npm install less less-loader安装less组件依赖;2.react脚手架并不像vue一样文件是全部暴露的,你需要执行npm run eject,暴露出config文件;3.找到webpack.config.js中line41,修改为:/\.(css|less)$/;支持css和less后...

2019-05-25 00:17:34 210

原创 在create-react-app官方脚手架中引入redux数据管理工具

前言:从安装脚手架到引入redux管理数据直接开始1.使用npm安装脚手架工具1)打开命令行,全局安装create-react-app脚手架工具npm install create-react-app -g2)选择好项目需要安装的位置进行安装,这里安装在d盘,这个过程事件稍微长一些,因为有很多依赖包需要去安装执行create-react-app mydemo,这里已经安...

2019-05-18 00:06:10 1334

原创 在js中避免单击事件和双击事件的冲突

1.场景:一个对象上需要同时绑定单击和双击事件。2.冲突:双击事件也可理解成两次较快的单击事件,这就造成当你执行一次双击事件时引发两次单击事件,产生了冲突。3.解决:设置定时器当执行双击事件时,单击事件会被首先执行,且执行两次再去执行双击事件;解决方法如下:1)首先给单击事件设置定时函数为500ms也就是0.5s,就是在执行完双击时间后执行单击事件,代码如下:let tim...

2018-12-17 00:10:46 902

原创 【文件上传】使用jquery.form.js来实现表单提交

过程十分简单,我们直接进入正题1.在网上下载jquery.form.js插件百度云:https://pan.baidu.com/s/1kWx6iG3密码:443c直接使用表单上传无法获得回调的函数数据,可以使用ajax来上传,不过这就失去了表单上传的意义,所以我们选择用jquery提供的插件2.引入文件3.使用 html:form id="fileF

2018-01-30 12:32:50 254

原创 【css预编译器】stylus入门学习

随着前端技术不停在发展,对我们前端人员的要求也不仅仅在于写页面,除了数据交互外,我们对于基本的css、html更好的使用,才会使我们开发起来游刃有余。阅读了很多stylus以及sass和less的介绍,就来简单记录一下stylus吧。stylus官网:stylus-lang.com1.简单介绍    简单来说stylus就是一种针对css的开发语言,想必大家在写css的

2017-12-28 15:08:58 905

原创 vue2.0从项目环境模板搭建,到封装自己的插件并发布在npm,再到上传至github仓库

使用vue2.0也有大半年时间了,因为它周边衍生了许多插件和UI组件库,所以平时开发的时候都是直接拿来用,获益良多,这里先感谢一下,爱技术,爱开源。

2017-12-27 10:42:22 1926

转载 详解ajax请求的优点与缺点

ajax工作原理  在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景、原理、优缺点等各个方面都很少涉及null。这次写这篇文章的背景是因为公司需要对内部程序员做一个培训。项目经理找到了我,并且征询我培训的主题,考虑到之前Javascript、CSS等WEB开发技术都已经讲解过了,所以决定针对AJAX这一块做一个比较系统的培训,所以这篇文章实际

2017-12-26 20:39:01 3051

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除