- 博客(30)
- 收藏
- 关注
RSS订阅原创 react中虚拟DOM，diff算法
什么是DOM：说到虚拟DOM，就要知道什么是DOM，DOM就是结构化文本抽象表达形式，特定于web中，这个结构化文本就是html文本，html中每个元素都对应DOM中某个节点，这样因为HTML元素都逐级包含关系，DOM节点自然就构成了一个树形结构，成为DOM树。浏览器为了渲染HTML格式的网页，会先将HTML文本解析以构建dom树，然后根据DOM树渲染出用户看到都界面，当要改变界面内容都时候，去改变DOM树上都节点。操作DOM缺点：在前端开发中，性能消耗最大的就是DOM操作了，而且DOM操作这部分代码
2020-05-12 16:40:31
270
原创 immutable的应用
既然说到immutable,那什么是immutable呢？immutable Data就是一旦被创建，就不能再被更改的数据，对immutable对象的任何修改，包括增删改查都会返回一个immutable对象，他实现的原理是Persistent Data Structure持久化数据结构，也就是使用旧数据创建新数据的时候，要保证旧数据可用且不变，同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，immutable使用了Structure Sharing(结构共享)，即：如果对象数中一个节点发生
2020-05-11 22:52:03
354
原创 web worker介绍以及应用场景
web worker介绍以及应用场景什么是web worker ?为什么要用web worker ？怎么使用web worker ?1.主线程采用new 命令，调用worker构造函数，Worker中接收两个参数，一个url，就是worker执行计算的脚本的路径url(为必须参数)，worker线程所要执行的任务，这个脚本必须来自网络，放到服务器上，如果脚本没下载成功，就会失败，第二个参数是配置对象，该对象可选。它的一个作用就是指定 Worker 的名称，用来区分多个 Worker 线程；2.javascr
2020-05-11 19:03:21
1791
原创 Git在mac电脑上同时连接公司的gitlab和自己的GitHub
Git在mac电脑上同时连接公司的gitlab和自己的GitHub参考文章：https://www.jianshu.com/p/63c3389eb537遇到问题：github和gitlab都连接之后，gitlab连接成功，GitHub出现以下问题，解决问题参考：https://www.cnblogs.com/wmr95/p/7852832.html...
2019-06-03 17:05:48
1012
原创 axios onUploadProgress
上传文件进度条，使用axios的onUploadProgress<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&qu
2018-07-25 10:26:38
10642
原创 根据日期来划分一个数组，将同一日期的归为统一的数组中
例如： /* *由[{ * activityId: '121', // 操作Id * projectId: '122222', // 所属项目Id * activityType: 1, // 操作类型，如增删改查，0表示新增、1表示更新、2表示删除 * fileName: '分析实验', // 操作内容名称 * ...
2018-06-07 11:54:13
1627
原创 表单checkbox非多选，给一个空数组添加元素，如果有就删除这一项，如果没有就添加这一项
“` //主要逻辑HandleToggleChooseDeveloper = e => { console.log('getuserID', e.target.getAttribute('user-id')) let Node = e.target let Id = Node.getAttribute('user-id') let choose =...
2018-06-03 22:18:09
911
转载 textContent、innerText 以及Event事件兼容性问题
今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决. 这里主要讨论Firefox与Chrome的兼容性问题.textContent与 innerText在javascript中, 为了获取节点的文本, 我们可以考虑使用节点的textContent、或者innerText, 然而,两者都并不能很好对所有浏览器进行兼容.textContent: 不支持低版本 IE; 兼容...
2018-04-13 15:55:35
783
转载 html-webpack-plugin插件
Installation 使用 npm 安装这个插件$ npm install html-webpack-plugin@2 –save-devBasic Usage 这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：复制代码 var HtmlWebpac...
2018-02-25 18:02:04
930
原创 开发环境、测试环境、生产环境、UAT环境、仿真环境详解
开发环境(DEV)：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。测试环境(UAT)：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。生产环境(PROD)：是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。可以理解为包含所有的功能的环境，任何项目所使用的环境都以这个为基础，然后根据客户...
2018-02-25 17:05:36
14352
原创 Uncaught TypeError: Cannot read property 'number' of undefined
引用以下内容时报错： Uncaught TypeError: Cannot read property ‘number’ of undefinedstatic propTypes = { value: PropTypes.number.isRequired, onIncrement: PropTypes.func.isRequired, onDecrement: Pr
2018-02-02 14:12:02
1337
原创 webpack使用报错
问题一： throw new Error( ^Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pa
2018-01-20 15:26:16
1942
原创 移动端适配不同手机
移动端 1.不建议字号用rem原因： 考虑到字体的点阵信息，一般文字尺寸多会采用 16px 20px 24px等值，若以rem指定文字尺寸，会产生诸如21px，19px这样的值，会导致字形难看，毛刺，甚至黑块，故大部分文字应该以px设置。 一般标题类文字，可能也有要求随屏幕缩放，且考虑到这类文字一般都比较大，超过30px的话，也可以用rem设置字体。 2.移动端的1px边框问题解决方法：
2018-01-11 13:21:56
820
原创 抛掷方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
2017-12-19 23:55:57
261
原创 指滑轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>指滑轮播图</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
2017-12-19 23:52:44
674
原创 移动端拖拽事件
<script type="text/javascript"> var img = document.querySelector("#yangyang"); //信号量 var x = 100; var y = 100; var startX,startY,dx,dy; //触摸开始 img.a
2017-12-19 23:45:27
1626
原创 移动端触摸事件
ouchstart 开始触摸 touchmove 手指移动 touchend 结束触摸 touchstart 在手指触摸的一瞬间发生，如果有多个手指触摸，每个手指触摸的时候都会发生。 touchend 在手指离开屏幕的一瞬间发生，如果有多个手指离开，每个手指离开的时候都是触发这个事件。 绑定他们的时候，只能用DOM2级来绑定，不能用window.on*来绑定。** <script type
2017-12-19 23:40:37
691
原创 移动端要点
1.完整的meta设置： width=device-width 约束视口为出厂视口 initial-scale=1.0 默认视口1.0倍 minimum-scale=1.0 允许最小的视口1.0倍 maximum-scale=1.0 允许最大的视口1.0倍 user-scalable=no 不允许用户缩放视口 2.百分比布局： 1).子盒子占父盒子的百分比，无视父盒子的pa
2017-12-19 00:02:35
411
原创 将对象转为url中？后缀的参数
将对象转为url中？后缀的参数function changeJSON2QueryString(JSON){ var temp = []; for(var k in JSON){ temp.push(k + "=" + encodeURIComponent(JSON[k])); } return temp.join("&");}let obj = {
2017-12-15 23:55:14
1155
原创 js将一个数组分成二维数组
例如：let dataArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]; 将这个数组分成modifyArray = [[1,2,3,4,5,6,7],[8,9,10,11,12,13,14]]; let data = [3, 6, 4, 5, 6, 99, 55, 45, 33, 22, 90, 12, 54, 23, 33, 243, 2324, 12,
2017-12-13 15:03:10
6228
原创 js已知两个数组，这两个数组中有相同项，要把A数组中与B数组相同的项删除
let newInfo = this.state.allDataNew; for(let i = 0; i < newInfo.length;i++) { for(let j = 0; j < idArray.length;j++) { if(newInfo[i].id == idArr
2017-12-12 18:24:39
2339
原创 文章标题
1 检测是否是数字，包括整数，小数 var num = prompt(“请输入一个数字”); var reg = /^-?(0|[1-9][0-9]*)(.\d+)?$/; if(reg.test(num)){ alert(“right”); }else{
2016-10-25 20:46:27
224
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人