- 博客(40)
- 收藏
- 关注
原创 判断iOS系统;判断iPhoneX及以后版本;判断微信环境;判断网络
这里写自定义目录标题判断IOS系统判断iPhoneX及以后版本判断微信环境判断网络判断IOS系统function getIsIOS(){ const UA = navigator.userAgent.toLowerCase(); const isAndroid = /android|adr/gi.test(UA); const isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid; return isIos
2020-09-03 11:25:07
818
原创 React web端 高德地图引入
1.逆向地理编码(将经度纬度转换地址)时报错10009(USERKEY_PLAT_NOMATCH),明明用的是web端的key值,为什么会报不匹配的bug呢?可能的原因是:在逆向地理编码的时候用的不是逆向编码的url,正确的url地址如图:2.写地理编码时报错:AMap.Geocoder is not a constructor,网上查到的解决方法有:1)入口index.html文件的引入的script的key值后面加上plugin=AMap.Geocoder2)或者是在key值后面接&
2020-06-02 10:29:46
1492
原创 截取视频首帧图片
基本框架:antD upLoad组件上传视频 +视频消息推送+ canvas截取视频首帧图片<Upload name="myfile" data={ { _token: getConfig()._token, }} listType="picture-card" className="avatar-...
2020-03-27 20:59:17
1336
原创 antD Table表头气泡提示自定义
本文很详尽地介绍了如何利用antD的Table组件,动态展示接口返回的表头和表格信息。若表头对象的气泡提示字段存在,实现气泡悬浮提示内容的自定义。希望能帮助大家避坑~
2020-03-10 11:55:10
4595
原创 动态获取查询条件和table展示区字段 typeScript
背景:切换菜单栏的“请假”、“测试”,能够获取不同的formCode,根据formCode的不同,搜索区动态获取查询条件。接口返回的数据结构为:搜索区动态搜索条件的数据结构:对应代码实现:{/* 动态搜索条件 */} <Row gutter={24}> {dynamicDomData && ...
2020-01-19 15:31:13
687
原创 关于移动端滚动区域滑动卡顿,不顺畅问题
解决方法一:overflow-scrolling:touch;给滚动区域添加overflow-scrolling:touch;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;解决方法二:overflow-y:visible;overflow-y: visible;...
2019-07-11 11:33:38
4499
原创 antD Calendar组件ios手机下拉加载上一个月份困难
bug描述:在ios手机上加载上一个月数据时非常困难,经常加载不出来同组的同事也用过这个组件,但无此bug,基本确定是我自身外码影响所致。而将calendar同级代码都注释掉后发现,该问题仍存在。所以可以基本可以确定是外层样式产生的干扰了。经排查,果然是外层的ovetflow-scrolling:touch样式产生了影响。移动端上下滑动时不顺畅时,应立马想到利用-webkit-overf...
2019-07-11 11:25:41
886
1
原创 antD使用二三事-设置主题色 && 不同组件间对antD的样式修改互不干扰
设置主题色前期准备:npm install babel-plugin-import --save-devnpm install antd --save1. webpack.config.theme.js中,设置主题色primary-color,并导出module.exports={ "primary-color": "#0ba29a", "link-color": "...
2019-07-05 14:18:32
3124
2
原创 项目中引用自定义 iconfont字体库
项目中引用自定义 iconfont字体库前期准备字体源文件下载进入“我参与的项目”,下载项目拷贝至项目src/assets/iconfont拷贝到该路径下后,将iconfont.css文件命名成自身项目名,如evaluiconfont.css。将除去demo的其他文件拷贝到项目。字体命名为防止与 iconfont官方字体库冲突,需为自身项目字体设置新的字体名。在evalui...
2019-07-05 11:39:59
871
原创 redux同组件内多个值赋值覆盖问题
项目背景:用户提交修改结果时,需要将修改后的状态和该状态对应的开始考勤时间存到redux中(editedState和stateStartTime),便于在数据展示页更新相应数据item。但由于改成某些特定状态时是不需要修改初始时间的,所以存在只给editedState赋值,而不给stateStartTime赋值的情况。bug描述:只修改editedState而不修改stateStart...
2019-07-03 15:47:48
1097
原创 实现table全选组件
selectedIdArr:存在已选择item的idallIdArr:所有数据的id组成的id全集通过操作selectedIdArr数组中的元素增减来实现选中/取消
2019-07-03 15:15:34
1038
原创 fixed布局兼容写法
DOM结构<div> <div className={styles.tableMock}> <div className={styles.tableHeader}></div> <div className={styles.ulWrap} style={{height:`calc(${document.b...
2019-07-03 14:24:52
287
原创 关于边框1px
手机端1像素边框在iphoneX上遇到的问题:一开始是简单粗暴写了border-bottom:1px solid #e5e5e5;后面改成了scaleY的写法。在网上查证了原因是因为1px的边框在devicePixelRatio = 2的retina屏下会显示成2px。比较灵活的写法是用参考链接:https://segmentfault.com/a/1190000...
2019-06-24 18:37:38
378
原创 react-router 多路由共用同个组件,切换不刷新
先描述下需求吧。从服务端获取菜单栏要展示的菜单项(如校园公告,乐课网,课程消息,乐答消息,作业消息,...,待办通知),其中校园公告,乐课网和代办通知是一定会有的菜单项(下文称为“常驻嘉宾”),而消息类(如课程消息,乐答消息,作业消息,...)根据运营后台的配置不同而不同(下文称为“本期特邀嘉宾”)。接口返回数据:实现思路:根据type区分不同菜单类型,故可以用type来区...
2019-06-20 11:46:53
12506
原创 箭头函数 setTimeout this指向
今天面试的时候被问到了箭头函数和普通函数中的程序输出问题,归来实践验证一下。本文核心的三大理论依据:普通函数的this指向看调用,箭头函数的this指向看声明,指向声明时候的父级作用域; setTimeout会延迟函数的声明example1:分析:根据第1条,可知,声明时就已经确定了this的指向为父级作用域,也就是window所以输出undefined;example...
2018-12-17 23:45:38
10630
原创 reflow回流 repaint重绘 硬件加速
浏览器处理动画顺序获取dom:获得我们所有的dom树 分割图层:浏览器根据z-index,和脱离了原来dom层的dom解构进行分层。 计算样式:分解图层完毕后,将所有的图层批量进行样式计算。这里有些属性是CPU去计算的,有些属性是GPU去计算的,具体哪些,请看下文。 reflow-relayout-paint set up-repaint:这一系列过程其实是页面从回流到重绘发生的步骤...
2018-12-05 12:52:08
364
原创 vue-router前端路由
前端路由定义:在单页面应用中,前端对url自行管理,控制页面展示不同的内容或页面。优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户缺点:使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的...
2018-11-28 12:11:33
244
原创 vue 虚拟DOM
虚拟DOM:Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。由页面渲染过程可知,虚拟DOM可以理解为保存了一棵DOM树被渲染之前所包含的所有信息。目的:虚拟dom就是为了减少js与DOM的交互而设计的。步骤:以虚拟dom的形式存储旧的dom信息; 检测到数据更新,先在JavaScript中将需要修改的节点全部修改完成; 将最终生成的虚拟DOM更新到视图中去...
2018-11-28 09:07:31
402
原创 浏览器/页面渲染过程
1.网络通信用户输入网址,输入url后会开一个新的网络线程 DNS域名解析,查询出相应的IP地址 发起TCP三次握手,建立连接 为什么不是两次握手: 3次握手完成两个重要的功能。既要两方做好发送数据的准备工作(两方都知道彼此已准备好),也要同意两方就初始序列号进行协商,这个序列号在握手过程中被发送和确认。如今把三次握手改成仅须要两次握手。死锁是可能发生的。作...
2018-11-27 16:58:28
300
原创 排序算法-快速排序,直接插入排序,二分法排序,冒泡排序
快速排序思想:每次选出一个基准值,经过一趟比较,比基准大的都在右侧,比之小的,都在左侧;递归左右子区间 function quickSort(arr) { if (arr.length <= 1) return arr; var middleIndex = Math.floor(arr.length / 2); var middleNum = ar...
2018-11-26 21:14:46
309
原创 Vue 简单MVVM实现思路
实现方式:数据劫持结合发布者-订阅者模式MVVM的实现核心:Observer监听器劫持并监听data内的所有属性,如有变动,拿到最新值并且通知订阅者Watcher订阅者收到属性的变动通知,执行指令绑定的回调函数,从而更新视图起到桥梁作用Compiler解析器对每个DOM节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数页面上每一个与数据相...
2018-11-26 14:32:45
490
原创 本地代码上传至github仓库
在学习webpack配置时写了一个小的练习项目,写完之后觉得过段时间可用于复习查阅,遂决定上传到github仓库。github建立仓库初始化本地仓库1&gt; 进入要上传的项目文件(我的是mooc_learning)cd mooc_learning/2&gt; 创建readme文件touch README.md3&gt; 初始化本地仓库git initgit init执行...
2018-11-19 17:28:05
227
原创 webpack4配置详细过程及采坑
新建项目文件夹 如mooc_learning没有进到mooc_learning,进行安装时,会报错Failed to execute ‘/usr/local/bin/node /usr/local/lib/node_modules/npm/xxx’新建src文件夹,并建立文件src-&gt;app.vue&lt;template&gt; &lt;div id="test"&a
2018-11-16 00:33:09
749
原创 webpack知识点整理
官网中,将webpack定义为: 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。入口Entry入口指示一个入口起点(或多个入口起点)。默认值为 ./src。是构建依...
2018-11-15 16:05:38
268
原创 我与LeetCode的50天之JavaScript实现
first day:**求二叉树的深度**:描述:// 输入一棵二叉树,求该树的深度。// 从根结点到叶结点依次经过的结点(含根、叶结点)形成树的一条路径,// 最长路径的长度为树的深度。知识点:节点的左右孩子节点表示为node.left node.right递归方法实现function TreeDepth(pRoot){ // 参考实现为:https:/...
2018-11-14 14:45:43
181
翻译 观察者模式
定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。 好处 (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案。 (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口。两对象轻松解耦。 参考解释: http://blog.csdn.net/ligang2585116/ar
2017-08-02 14:32:39
197
原创 重绘与回流(repaint和reflow)
reflow:回流 回流:指计算页面布局。render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流,每个页面至少需要一次回流,就是在页面第一次加载的时候。 repaint :重绘 重绘:当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
2017-08-02 10:01:08
424
原创 css画圆
半圆(不同颜色)<style>.half-circle{ border-width: 100px; width: 0px; height: 0px; border-color:red blue transparent transparent; border-style: solid; border-radius: 50%; transfor
2017-07-31 19:10:58
814
原创 disabled 与 readonly的区别
disabled指当 input 元素加载时禁用此元素。input内容不会随着表单提交; readonly 属性规定输入字段为只读。readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。input内容会随着表单提交。 ## 无论设置readonly还是disab
2017-07-11 20:59:27
420
原创 hr设置线条颜色
border: none; background-color: #f2f2f2; height: 1px;color:针对字体颜色; 线条:需要用background-color;其实,hr是有默认的border的,所以在给线条设置颜色之前,我们需要将它的边框去掉,设为border:none单纯的将背景色设为蓝色是不够的,线条还是灰色的,我们需要给线条一个高度,也就是我们需要的1px
2017-05-11 10:58:22
2051
原创 border-color
border-color::[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ] 上 右 下 左 图例即为:border-color:transparent #169bd5 transparent transparent;
2017-05-11 10:45:10
446
原创 position:relative相对定位
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
2017-05-11 10:23:19
480
原创 split()和splice()
split()方法:将字符串分割成字符串数组语法: stringObject.split(分割符,返回的数组长度)举例:<script type="text/javascript">var str="What are you doing now?"document.write(str.split(" ") + "<br />")document.write(str.split("") + "
2017-03-22 20:29:05
395
原创 声明
变量声明:各种varvar str= "qwer";函数声明:functionfunction addNums(){ ...}一维数组声明:有三种方式var str = new Array();//创建的新数组是空数组,没有值,如输出,则显示undefined。str = [10,20,30];第二种方式是:var str = new Array(10,20,30);还有一种方式是:va
2017-03-22 19:20:22
341
原创 alert confirm prompt
alert-警告 语法是:alert(字符串或变量); 按顺序弹出括号内的内容。 confirm-确认 语法:confirm(在消息对话框要显示的文本); 返回:Boolean值(用户点击确定,返回TRUE)。 多跟if else结构搭配,根据用户的不同选择,做出相应的判断输出。prompt–提问 语法:prompt(显示在消息对话框中的文字,文本框中的可修改内容); 返回值:点
2017-03-21 20:46:11
321
原创 js位置
JavaScript中js文件的位置放在头部中<head> <script>j....</script></head>放在body内<body> <script>......</script></body>浏览器在对HTML进行解释的时候,是按照先后顺序的,所以前面的script就先被执行。因此,一般将进行页面显示初始化的js必须放在head中,因为初始化(如页面body
2017-03-21 19:33:18
586
原创 Windows和Mac环境下的sublime快捷键
Sublime快捷键-Windows版VSMac版本 作为一个时常需要在Windows和Mac环境下写代码的初级程序媛,每次记快捷键真是一件头疼炸裂的事情。熟练使用快捷键不仅能加快代码速度,更主要的是,当你的盆友不经意路过的时候,你假装随意的一个快捷键组合,绝对是装逼界的制霸神器,秒杀代码渣渣不残留好么! 那就让我们从最简单的快捷键开始,2017,3,21!记住这个日子,因为从今天开始,你的装1
2017-03-21 16:41:52
388
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人