- 博客(52)
- 收藏
- 关注
RSS订阅原创 判断某一个元素是否处于可视范围之内
今天遇到一个小需求：判断某一个元素是否处于可视范围之内，这里记录一下var node = element.getBoundingClientRect();const top = node.top;const right = node.right;const left = node.left;const bottom = node.bottom;const viewPortWidth = window.innerWidth || document.documentElement.clientW
2021-08-11 23:06:20
393
原创 window.open新开的标签页获取不到最新的redux数据
最近遇到一个小问题，在tab1标签页点击一个按钮，然后期望的效果是点击之后新开一个标签页，在该新的标签页里面可以查看对应的图片信息，图片信息是在前一个页面中获取到的。对此我首要的解决方案就是使用redux，但是开发完发现在新开的标签页中读取到的store数据都是redux中的初始化store数据，前一个页面中store中更新的最新数据根本获取不到，后来查看资料后才知道，通过window.open打开的新标签页其获取的state和前一个页面的state是分离的，所以无论前一个页面如何保存数据，新开的标签页
2020-08-05 11:25:19
754
原创 记录一种js获取本机ip地址的方法
首先一个获取当前客户端的IP地址的网址：http://net.ipcalf.com/Chrome和Firefox浏览器会默认隐藏内网的IP地址，所以需要设置一些额外的东西才可以将IP地址显示出来Chrome：在Chrome浏览器地址栏中输入：chrome://flags/搜索#enable-webrtc-hide-local-ips-with-mdns该配置 并将属性改为disabled之后按照chrome的指示重启一下IP地址就正常了。Firefox：在地址栏中输入：absout:..
2020-07-15 20:43:39
2901
原创 图片上传413
图片在移动端上传接口总是会提示413，上传的内容过大。后来通过压缩将图片压缩之后，上传还是会提示413，但是在我本地却是可以直接上传成功的。因为我本地没有走nginx服务器，直接是setupProxy来代理请求的。而测试环境都是通过nginx服务器转发的，这样的话我就怀疑是nginx做了某些限制，导致图片上传不能成功。后来百度一查413，果然是nginx服务器的限制，其默认最大的请求体是1M，但是我们的图片大小即使是压缩时候也超过1M了。nginx官方文档给出了说明，需要配置client_max_bod
2020-07-05 10:56:55
1043
原创 antd Form表单读取不到input的值
今天上午突然反馈了一个问题，表单中的一个输入框用户明明输入了，但是提交到后台之后是没有数据的。我在本地测试了一下，发现也是同样的情况。后来仔细看了一下代码，原来的input的外面包裹了一个Fragment元素，后来我将Fragment元素修改为div或者其他标签，都是可以正常获取到这个input的值的，但是就是Fragment包裹起来的话获取到始终都是undefined。从rc-form中看getFieldDecorator源代码其是调用React.cloneElement来返回一个最终元素的，但是不知
2020-05-28 16:20:52
2802
原创 图片按照顺序上传
最近遇到一个文件上传的需求，这里记录一下：产品希望的效果是可以按照在客户端选择的顺序上传，并且展示在页面中这里我使用的组件是antd的Upload组件，该组件支持多文件上传，但是其对于多个文件上传的处理通过在控制台中就可以看到其实是一个一个文件调用接口上传的，这样的话因为文件大小不一致，小的文件就会先返回回来，大的文件就会慢一点，这样的话就会导致最终传递到后端的文件链接顺序和当初选择的顺序...
2020-05-07 21:56:46
3502
1
原创 create-react-app创建项目
最近公司的项目不再推荐使用react-app-rewired框架封装项目，基本上都使用create-react-app弹出配置来自定义实现配置功能，这里记录一下：创建模板：npxcreate-react-appmyApp --templatetypescript，这里使用是typeScript模板，如果不需要可以去掉 弹出配置：yarn run eject 配置antd实现按需加载，...
2020-04-30 17:24:31
179
原创 记录富文本编辑器
最近项目中需要使用到富文本编辑器，我们使用的是react开发项目，所以想找一个基于React开发的富文本编辑器，首先找到是braft-editor，但是后来发现这款富文本编辑器在呈现表格，a链接，图片等html元素的时候和实际的效果差别有些大，所以为了能够完美的展示富文本编辑器的内容，后来选用了umeditor,这是一款mini版本的百度富文本编辑器，而且是基于React开发，后来选用了这款富文本...
2020-04-25 16:42:56
275
原创 React Hooks依赖项数组中使用antd中的form导致页面陷入死循环
最近在逐渐将函数写法从class组建从函数组件转变，在开发的过程中遇到了一个表单中的小问题，这里记录一下：场景：页面有两个下拉框，有联动关系，第二个下拉框需要根据第一个下拉框的值发生变化，所以在第一个下拉框的onChange的回调函数中完成数据获取之后，需要调用form.setFieldsValue将第二个下拉框中的值更新掉，但是hooks插件会提示你缺少了一个form依赖项，当把form依赖...
2020-04-18 16:26:24
1756
原创 React中打印页面，样式不起作用
从网上搜索的结果来看，一种方法就是使用内联样式，但是很明显如果我们的页面中有很多元素，并且页面的动效多的时候，内联样式就不可取了，既不雅观将来也不好维护 。还有一种方式就是使用react-to-print这个插件来做，这里我并没有用到。我最近也遇到了React中调用window.print打印页面，但是样式不起作用的问题。我的解决方法是使用了媒体查询，把打印时需要用到的样式放到@media...
2020-02-20 16:39:41
2220
原创 React 项目本地运行成功，build时 Failed to minify the code from this file
今天部署项目的时候一直部署不成功，大概部署了五六次，每次都失败。开始以为是机器出了问题，后来就在同一台机器上部署另外一个项目，居然成功了。后来就在本地运行npm run build命令，发现失败，截图如下：原来是query-string库没有正常转换成ES5出的问题，将query-string. 错误版本：~6.0.0 降级版本：~5.1.1 就可以正常运行成功了...
2019-05-15 10:56:02
3101
原创 React中向事件处理程序传递参数
之前使用React的事件处理程序大都直接使用下面的两个形式：this.handleClick = this.handleClick.bind(this);// public class fields 语法handleClick = () => { console.log('this is:', this);}可是在程序中给事件处理程序传递参数的时候，如果还是直接用类似on...
2019-05-14 23:46:09
806
2
原创 日常开发中的一些小技巧
# 日常开发中的一些小技巧## console1. console.log + console.log是我我们日常开发中最常用的，但是console.log还有一些另外的用法，console.log支持格式化输出: console.log(msg, values) ``` console.log('I like %s but I do not like %s.', 'Sk...
2019-04-23 09:34:23
375
原创 前端html页面导出pdf文档，并且上传保存至服务器
1. 引入三个js文件<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>&
2019-03-06 11:49:48
6536
2
原创 记录HMAC-SHA256加密+base64转码
1. 引入cryptoku：<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>2. 需要向后端确认对应的密钥，一般来说是确定的或者是向后端请求得到的，var secret = *****3. 得到待加密的原始字符串，var str = "*******"...
2019-03-06 11:41:20
2823
原创 css中常见的At-rule
1. @chatset，用来提示css文件使用的字符编码方式，其一般在外部样式表文件中使用，如果它被使用，必须出现在最前面。该规则后面的分号是不可省略的，如果省略了该分号，会生成错误信息。使用方式:@charset<charset>;一般常用的编码方式有两个，世界统一编码：utf-8，中文编码：gb23122. @import，用来引入一个css文件，除了@chars...
2019-02-25 19:26:14
649
原创 Failed to set the 'value' property on 'HTMLInputElement'
记录今天遇到的一个小问题，文件上传格式不对，我想直接对file类型的value赋值，但是当运行到这一行的时候，页面会报错，并且显示Failed to set the 'value' property on 'HTMLInputElement'这样的错误，这里提示说不能直接赋值，所以我就使用了setAttribute这个API函数，发现页面不报错了，但是value还是没有重置为空字符串，虽然没有报错...
2019-02-18 11:23:36
5374
1
原创 Invariant Violation: Minified React error #130问题解决
今天遇到一个问题，我本地的项目是好的，但是发布到线上环境之后，一点击页面的按钮就会报：Invariant Violation: Minified React error #130这个错误，页面展示一片空白。按照react官方网站的说法，出现这个错误是因为传递的参数不对，所以我debugger了半天，发现所传入的参数都是可以获取得到值的，后来才发现在返回Input.Password这个密码框组建...
2019-02-01 13:48:28
16062
1
原创 react-document-title
前几天在代码中看到react-document-title这个插件，一查才明白原来它可以实现在单页应用中根据不同路由来改变文档的title，正好有时间就看一下其内部实现的原理是怎么样的该组件内部主要使用的是一个高阶组件，通过修改document.title来实现文档的title改变的功能，这个高阶组件就是react-side-effect。该组件主要接受两个参数：reducePropsToSt...
2019-01-22 14:00:38
2854
原创 relative布局--块级元素
今天实现一个简单的功能：就是td里面内容超出左边一部分，并覆盖掉左边的边框。一般情况下我是设置外层的父元素为relative，并且设置一个z-index,之后设置里面的元素同样是relative,设置其背景覆盖外层边框即可。但是后来发现文字上面的空白部分一直实现不出来，使用margin-top是无效的，但是我记忆中当元素设置为position:relative之后元素就变成了一个块级元素，...
2019-01-21 18:13:08
769
原创 git配置
首次加入公司，初次配置git记录一下。配置git的用户名和邮箱，邮箱是公司分配给你的邮箱，用户名一般没有定性的限制。到这一步就可以通过http链接来拉取对应的项目代码了。但是通过ssh还不行，需要配置对应的公钥，主要执行下面的两个命令：ssh-keygen -t rsa -C ‘公司邮箱’cat ~/.ssh/id_rsa.pub获取到对应的公钥之后，加入到公司的代码托管网站中...
2019-01-18 14:33:06
93
转载 面试题
1. 隐式类型的转换var object1 = {toString:function(){return 'object1'}, valueOf:function() {return 10}}var object2 = {toString: function(){return 'object2'}, valueOf: function() {return 20}}var object3 =...
2019-01-04 23:43:45
95
原创 前端面试习题收集
1. React相对于传统的框架来说其优势是什么？ 框架本身就是为了更好更方便而诞生的，而框架最具优势的就是各种使用便捷，接口规范的插件 插件是框架的灵魂。其本质的好处就是以框架规范代码，使项目工程化，提高可维护性。 （1）虚拟dom，可以减少dom的操作，减少dom的操作就是提高浏览器的渲染性能 （2）学会了jsx这个语法，你不尽可以使用react来写web，同时可以使用react-native...
2018-06-12 20:52:28
1241
转载 css3实现一个div设置多张背景图片及background-image属性
CSS3/CSS1 background-image 属性语法:background-image：<bg-image> [ , <bg-image> ]*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-line...
2018-03-11 09:47:48
3185
原创 可以设置inline元素的padding和margin吗？
对于这个问题，我的第一感觉就是不能，后来查看资料才知道原来我把inline元素设置了width和height无效和题目搞混了，经过查资料和实际验证后，得出以下结论： 1. inline元素设置width，height属性无效 2.inline元素的padding和margin可以设置，但是水平方向的padding-right，padding-left，margin-right，marg...
2018-03-06 23:00:10
3949
原创 左右两列定宽，中间自适应的方法
1. 使用flex布局<div class="container"> <div class="left">left</div> <div class="middle">middle</div> <div class="right"
2018-03-06 15:37:43
495
转载 CSS盒模型的深度思考及BFC
题目：谈一谈你对CSS盒模型的认识专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面：（1）基本概念：content、padding、margin。（2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。（3）CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。（4）JS如何设置、获取...
2018-03-06 11:26:38
147
原创 HTML实体
对于HTML而言，有一部分字符是预留的，不能出现在HTML中，如果在html中使用小于号（<）和大于号（>），浏览器会误认为是标签。如果希望可以正确显示标签，那么就必须在html源代码中使用HTML字符。下面是常用的HTML实体的对应表格：显示结果描述实体名称 空格&nbsp;< 小于号&lt;> 大于号&gt;&和号&amp;"引号...
2018-03-05 21:13:27
111
转载 判断两个参数是否相等
function diff(obj1, obj2) { if(typeof obj1 !== typeof obj2) { return false; } else { switch (typeof obj1) { case "number": case "string": ca...
2018-03-04 19:06:56
1032
原创 判断是否是数组的几种方法
1. objName instanceof Array2. objName..constructor == Array3. Array.isArray(objName);4.Object.prototype.toString.call(objName) == "[object Array]"
2018-03-03 21:35:03
563
原创 4种方法生成三个并排的大小相等的元素
基本的dom结构如下：div class="container"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">ite
2018-03-03 17:08:01
512
转载 前端性能优化（CSS动画篇）
原理现代浏览器在使用CSS3动画时，以下四种情形绘制的效率较高，分别是：* 改变位置* 改变大小* 旋转* 改变透明度层？重绘？回流和重布局？图层重组？首先要了解CSS的图层的概念（Chrome浏览器）浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是：1. 获取DOM后分割为多个图层2. 对每个图层的节点计算样式...
2018-03-02 19:03:47
241
转载 HTTP协议GET和POST请求的区别
浏览器中输入网址访问资源一般都是通过GET方式；在FORM提交中，可以通过Method指定提交方式为GET或者POST，默认为GET提交。Http协议定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET、POST、PUT、DELETE。URL全称是资源描述符，可以认为一个URL地址用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查 ，改 ...
2018-03-01 20:54:12
123
原创 判断一个js对象是否是Array,arr为要判断的对象
在一般情况下我们可以使用instanceof,但是instanceof会在跨iframe对象构建的场景下失效，尽管说现在已经不常使用iframe。但是还有一个可靠的方法可以在任何时候都可以调用： Object.prototype.toString.call(arr) === '[object Array]'通过判断上述语句是否为真，就可以确定arr是否是Array的一个实例...
2018-02-12 15:03:06
1875
原创 javaScript中的 RegExp 对象的原生方法
JavaScript RegExp 对象有 3 个方法：test()、exec() 和 compile()。(1) test() 方法用来检测一个字符串是否匹配某个正则表达式，如果匹配成功，返回 true ，否则返回 false；(2) exec() 方法用来检索字符串中与正则表达式匹配的值。exec() 方法返回一个数组，其中存放匹配的结果。如果未找到匹配的值，则返回 null；(3) comp...
2018-02-12 14:35:31
157
原创 换行属性
通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。值描述normal使用浏览器默认的换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。white-space 属性设置如何处理元素内的空白。值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本...
2018-02-12 10:02:35
193
转载 web网页 页面布局的几种方式
网页基本布局方式：（1）流式布局 Fluid流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同。固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性。换句话说，通过设置百分比，我们不需要考虑设备尺寸或者屏幕宽度大小了，可以为每种情形找到一种可行的方案，应为你的设计尺寸将适应所有的设备尺寸。流布局与媒体查询和优化样式技术密切相关。
2018-02-06 23:18:56
5361
转载 CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的:focus,:hover以及标签的:link、visited等，伪元素较常见的比如:before、:after等。其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念，并且在
2018-02-06 22:42:16
191
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人