前端开发
An_cf
混合App开发者
展开
-
关于postcss-px-to-viewport的使用经验
最近在工作项目使用中新接触到postcss-px-to-viewport,在使用上遇到一个坑,也有段时间没更新啦,记录分享一下~希望对你有所帮助!直接上重点,节省在网站苦苦寻找有效答案的你 >>>我所遇到的坑:由于项目需要,需要适配不同分辨率的终端设备,比如我接到的项目需求是1920*1080以及1200*1920;如果使用过postcss-px-to-viewport的话,我们知道适配一种尺寸在配置时设置viewportWidth就可以,那如果适配两种呢?一开始我想到的是原创 2021-12-31 17:24:05 · 6388 阅读 · 3 评论 -
开源自己的react组件到npm
背景:公司让做一些开源的事情,至于目的大家都能猜到,这里就不多说了,无非就是增加团队影响力(个人觉得没有什么用,哦哈~)。对于个人来说,如果能有机会参与到开源项目还是非常不错的一个经历,毕竟做自己喜欢的事情是每个人所期待的。好了,闲话不多说了,先附上本次开源组件的链接,有兴趣的朋友可以直接在npm下载~npm:https://www.npmjs.com/package/react-colour-block源码地址:https://github.com/kafeihaoka/react-colour原创 2020-05-18 15:08:38 · 476 阅读 · 0 评论 -
Promise.race的用法
最近做项目让增加一个功能,当接口请求超过5分钟后,做个处理页面增加错误提示,于是想到了Promise.race的方法,下面来记录一下~let P1 = new Promise( resolve => { setTimeout(()=> { resolve('p1访问!') },4000)});let P2 = n...原创 2020-03-31 14:31:35 · 1701 阅读 · 0 评论 -
解决antd中RangePicker浮层位置问题
问题描述:最近开发中遇到antd中日期选择器浮层位置问题,之前我的项目中全局模块已经用到了RangePicker,并且自定义了样式,现在需要在项目的新页签里使用RangePicker选择器,然而浮层样式又需要重新定位。解决问题:1.定义className;2.添加API参数 getCalendarContainer={trigger => trigger.parentNode},...原创 2019-12-04 13:37:15 · 3109 阅读 · 1 评论 -
mac上git以及nvm安装使用
在公司用的window本,申请的mac本终于下来了,于是重新搭一下环境。因为基本环境搭建一次就不用去管了,所以步骤也忘得差不多了,这里再记录一下~# git1.首先查看电脑是否安装Git,终端输入:git2.如果没有安装过去官网下载:https://git-scm.com/downloads3.创建ssh key 配置git--- 设置username和emailgit ...原创 2019-11-28 18:22:37 · 777 阅读 · 0 评论 -
优化长列表
最近做的项目有一个列表模块数据量巨大,后端限制完数据后还有大概10000条数据,直接渲染的话会有明细的卡顿情况,于是撸起袖子开始重构。这里只回顾一下实现原理以便以后忘了能立马捡起来:1.保存原始列表数组数据;2.只渲染可视区域大小的元素;3.当滚轮滚动时,动态的计算当前的scrollTop的值,然后根据列表每条数据的高度动态的去获取可视区域应该展现的列表数组元素;4.做内外两次...原创 2019-04-23 16:13:44 · 523 阅读 · 0 评论 -
js对象引用问题
let arrtest = [1,2,3]; let arrcopy = arrtest; arrcopy[2] = 1; console.log(arrtest) // [1,2,1] console.log(arrcopy) // [1,2,1]js引用对象或者数组,直接引用当引用的值改变后,同样也会改变原始数组。问题解决起来很简单,但工作中一不注意常常就会犯这种错误。/...原创 2019-03-12 12:33:40 · 1061 阅读 · 0 评论 -
记录常用的chrome插件
谷歌网上应用商店:https://chrome.google.com/webstore/search/fireshotChrono下载管理器:做Chrome浏览器中最好的下载管理器Convertio:在线将文件从一种格式转换为另一种格式. 支持超过 2500 种不同的转换。Proxy SwitchyOmega:轻松快捷地管理和切换多个代理设置。React Developer Too...原创 2019-09-10 13:48:31 · 305 阅读 · 0 评论 -
js复杂数据结构对比问题
react项目,今天碰到一个头疼的问题,props改变了但componentWillReceiveProps未触发,一开始直接用浏览器调试没有找到原因,之后输出console才发现原来并不是componentWillReceiveProps没有触发,而是我在函数里做的当前数据与将要获取的数据对比时出了问题。问题并不复杂,但这个问题定位,额,让人头大,浪费了不少时间~一开始我是用toString...原创 2019-09-10 18:08:49 · 481 阅读 · 0 评论 -
开发记录
fusion design使用记录:初尝fusion design,使用起来感觉还不错。本人前端(本次选择react框架使用iceworks创建项目),暂时还未和UI配合使用过,但已经觉得fusion design使用开发起来简便了很多。下载iceworks后,使用它无障碍创建项目架构,不用再自己安装各种乱七八糟的依赖,不用再为选择版本号而发愁,而且一键添加依赖,还可以配置编辑器和git。物料...原创 2019-02-13 17:58:15 · 208 阅读 · 0 评论 -
js2D物理引擎插件
matter.js:http://brm.io/matter-js/ //轻量级、社区活跃、最新box2D:http://box2d.org/ //功能全p2.js:都推崇p2比box2D性能好点,但社区不太活跃,文档较少推荐简单的物理引擎可选择matter.js...原创 2019-01-07 13:12:01 · 1043 阅读 · 0 评论 -
git的使用
以前公司都用svn,git用的比较少,也就自己的github个人站上传代码会用到一些命令,现在公司是用的gitlab管理项目,git用起来也越来越顺手了,就记录一下平时常用和遇到问题不知道怎么办时使用的命令。阮一峰的关于git常用命令清单的日志:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html(很全面)基本操作:git stat...原创 2018-04-25 17:51:22 · 216 阅读 · 0 评论 -
开发记录
记录一些平时可能用到的网站:http://element-cn.eleme.io 饿了么团队vue开源组件 https://github.com/ElemeFE 项目地址http://momentjs.cn/ momentjs中文网https://docs.google.com 谷歌文档https://developers.weixin.qq.com/miniprogram/dev/co...原创 2018-05-11 16:28:23 · 225 阅读 · 0 评论 -
发布自己的模块到npm
由于工作中项目需要,需要把第三方的插件修改并上传到npm继续当做依赖模块使用,以下为本次经验总结。1.首先,在自己的项目目录下新建项目------npm init(一路回车,此步骤为创建配置文件package.json) 2.创建npm用户------第一种:https://www.npmjs.com/ 注册地址 第二种:npm adduser 依次填写name、passwor...原创 2018-05-15 14:39:02 · 430 阅读 · 0 评论 -
git使用记录
window本不能识别提交的文件的文件名首字母的大小写原创 2018-08-23 14:03:01 · 127 阅读 · 0 评论 -
react开发中setState失效的问题
在react项目的开发中碰到一个奇怪的问题,setState失效。我这里提到的失效不是说的setState由于异步而造成的数据延迟问题,如果有这个问题的话,你可以通过this.forceUpdate()的方式去强制更新;言归正传,我碰到的问题是由于我的子组件使用了componentWillReceiveProps而产生的setState失效假象。查资料并实验一番,发现当调用setState时,co...原创 2018-08-24 15:38:09 · 5328 阅读 · 0 评论 -
svg实现文本的垂直居中对齐样式
项目中用到表格内画折线趋势图,本人使用的svg绘制简单折线;没有数据的单元格显示文字,为了不影响表格的宽度自适应,就想到在svg上写文字。于是就有了在svg上对文字样式进行垂直居中的需求,上代码:<svg version="1.1" className={Style.svgLine}> <text x='50%' y='50%' className={Style.s...原创 2018-09-13 15:55:04 · 8228 阅读 · 1 评论 -
favicon.ico在线制作
制作网址:http://www.faviconico.org/favicon原创 2018-09-29 15:05:57 · 1919 阅读 · 0 评论 -
js实现数组排序
js对数组进行排序的方法还是很多的,最近刚好又有一个实现表格排序功能的需求,本来是让后台做的,但由于各种因素推到了前端。嗯,正好回顾一下数组排序的多种实现方式~1. JavaScript的sort()方法sort()方法按照升序排列数组项,会调用每个数组项的toString()转型方法,然后比较得到的字符串。compare()函数方法是一个比较函数,作为sort()方法的参数。fu...转载 2018-09-30 10:40:09 · 444 阅读 · 0 评论 -
Babel 7 发布
Babel 7在九月初左右的时候发布了,删除(并停止发布)任何年度 preset(preset-es2015 等)。@babel/preset-env取代了对这些内容的需求,因为它包含了所有年度所添加内容以及针对特定浏览器集兼容的能力。同时删除 "Stage" 等 presets (@babel/preset-stage-0等)转而选择使用单独的提案插件。同样,默认情况下从@babel/poly...原创 2018-09-30 15:21:48 · 575 阅读 · 0 评论 -
开发记录
开发背景:superset、Flask-AppBuilder、react需求:网站添加favicon.ico图标(注:主要针对不能设置icon图标的页面。例:直接打开的PDF文件页面;一般的页面可以link的方式添加图标)原理:Flask是一个基于Python可扩展的微型Web框架。网站需要设置独立的favicon.ico作为图形标志,对于Flask这样动态的Web应用来说,fav...原创 2018-11-29 14:54:31 · 280 阅读 · 0 评论 -
webpack配置字体编译问题
1.问题描述:在做公司的项目开发的时候遇到一个问题,字体加载失败报错404,如下:2.问题原因:起初没怎么在意,感觉应该是项目中引用了bootstrap的cdn字体或者是font-awesome的字体,之后找了好久发现并不是引用网络字体造成的,于是看到请求路径是项目的根目录,才灵光一现觉察到这是一个路径问题,因为没有找到这个路径下的字体文件它才会报错404,项目整体架构用的是super...原创 2018-12-06 15:42:48 · 1139 阅读 · 0 评论 -
webpack项目体积优化之旅
需求背景:在测试服务器上,需求觉得登录时间过长问题原因:于是看了一下项目包的体积,在4M左右,网速正常的情况下无关紧要,但还是有必要优化的~解决问题:也是重新查阅了大量的优化体积方案,项目基于react、webpack编译打包的。1.首先安装webpack的插件webpack-bundle-analyzer,对项目包体积进行可视化分析const BundleAnalyzerPlu...原创 2018-12-12 13:07:31 · 354 阅读 · 0 评论 -
网站增加代码监测
公司的react项目要使用ga(Google Analytics)做网站的代码监测,由于以前做过埋点类似的功能,本以为能很快结束,不过还是绕了一些弯路,废话不多说了,记录一下使用流程。官方文档:https://developers.google.com/analytics/devguides/collection/analyticsjs/events使用流程:首先,需要在你的入口文件(一般都是ma...原创 2018-04-19 14:47:06 · 1364 阅读 · 0 评论