Charlene_lx的博客

原创 react的diff算法

eact用 三大策略 将O(n^3)复杂度 转化为 O(n)复杂度策略一（tree diff）：只对同一层次节点 进行比较。Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。策略二（component diff）：组件D和组件G的结构相似，但是 React判断是 不同类型的组件,就会删除d创建G拥有相同类的两个组件 生成相似的树形结构，拥有不同类的两个组件 生成不同的树形结构...

原创 正则表达式

/i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找、忽略大小写)/ig(全文查找、忽略大小写)1、匹配中文:[\u4e00-\u9fa5]2、英文字母:[a-zA-Z]3、数字:[0-9] 或者 \d+/\d{2,}/g, 表示匹配至少二个数字至多无穷位数字replace(/\d+/g," "),\d表示数字, + 表示一个或多个，就是...

原创 编程题

1\实现两个字符串相加(大数字)2\冒泡排序3\快速排序3\二叉树反转5[1,2,3]变成[[1,2],[1,3],[2,1],[2,3],[3,1],[3,2]]高级版: 可以变成 [1, 2, 3] [1, 3, 2] [2, 1, 3] [2, 3, 1][3, 1, 2][3, 2, 1]6\去重function uniq(array){var temp = [];...

原创 算法

https://blog.csdn.net/Choicc/article/details/87970720https://blog.csdn.net/ZC_XY/article/details/81916423https://blog.csdn.net/weixin_34290352/article/details/88020061https://blog.csdn.net/weixin_4...

原创 Vue.js双向绑定的实现原理

var obj = { }; // 为obj定义一个名为 hello 的访问器属性, 三个参数，**要操作的对象**，**要定义或修改的对象属性名**，**属性描述符**。 Object.defineProperty(obj, "hello", { get: function () {return sth}, set: function (val) {/* d...

转载 AMD和RequireJS

require.js，就是为了解决这两个问题： （1）实现js文件的异步加载，避免网页失去响应；（2）管理模块之间的依赖性，便于代码的编写和维护。https://www.cnblogs.com/JoannaQ/p/3362588.html...

原创 requestAnimationFrame (定时&&动画)

requestAnimationFrame是HTML5新增的定时器,不需要设置时间间隔cancelAnimationFrame方法用于取消定时器requestAnimationFrame(调用函数)优点:1\性能好,页面处于不可见或不可用状态requestAnimationFrame会暂停渲染,setTimeout不会.1\它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘3\...

原创 实现拖拽

draggable="true"属性设置为true,即可以拖拽.通过在拖动dom上设置οndragstart="drag(event)"属性方法,在方法中进行ev.dataTransfer.setData(“Text”,ev.target.id);储存.在释放目标上设置οndrοp=“drop(event)” 属性方法,通过dataTransfer.getData("Text")进行获...

原创 div和textarea区别,div模拟textarea

<div contenteditable="true"></div>使用contenteditable="true"即可.input是单行文本,textarea是多行文本,并且可以通过cols 和 rows 属性来规定 textarea 的尺寸,也可以用width和height.textarea赋值:有val（‘222’）改变了输入框值,html(‘444’...

原创 canvas和svg的区别.

都是2D作图,svg是矢量图,canvas是位图,canvas是逐像素进行渲染的,适合游戏.svg缩放不影响显示,svg对象的属性发生变化，那么浏览器能够自动重现图形。canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象svg 1\不依赖分辨率 2\支持事件处理器 3\最适合带有大型渲染区...

原创 跨域和200,304和get/post的区别

304:如果cache-control：no-chache说明强制每次请求直接发送给源服务器，而不经过本地缓存版本的校验。如果cache-control：max-age=0有二种情况：1、max-age>0 时 直接从游览器缓存中 提取2、max-age<=0 时 向server 发送http 请求确认 ,该资源是否有修改有的话 返回200 ,无的话 返回304.防止304:...

原创 em和rem px css实现三角形

1\em相对长度单位,相对于父元素的.em会继承父元素的字体大小.2\remcss3新增属性,相对大小,相对于html根元素的.3\px常用的.

原创 tcp三次握手、在地址栏输入url后发生什么?(也可以说浏览器原理)

总的来说,分为网络通信和页面渲染.应用层(http)–传输层(tcp)–网络层(ip)–数据链路层(网络)1\dns解析域名(可能会查找缓存,页面相应时间不一致)2\tcp建立连接(三次握手)3\应用层客户端发送http请求(包括请求头和请求主体)4\网络层IP协议查地址.5\数据到达数据链路层,这时候客户端请求结束.6\服务器接收数据.7/服务器相应请求,发出html响应,返...

原创 数组和对象的循环,数组去重,筛选,排序

1\forEach数组循环,不能用break中断,也不能用return返回到外层.可以用try catch抛出异常,new error()2\for-in可以遍历普通对象,遍历的顺序可能不是按照实际顺序,得到字符串类型的健名.var wq ={a:'1',b:'2'}for (var it in wq){ console.log(it) //a,b console.log(wq[i...

转载 vue的生命周期

原创 前端加密的几种常见方式

• JavaScript 加密后传输,base64 ,哈希,非对称加密,md5• 浏览器插件内进行加密传输,• 一些库实现加密, 比如crypto-js;• Https 传输

转载 Session和Cookie的区别与联系

Cookie通过在客户端记录信息确定用户身份.保存在客户端浏览器中Session通过在服务器端记录信息确定用户身份。保存在服务器上会话Cookie和持久Cookie会话Cookie:若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。持久Cookie:若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cook...

转载 HTTP2.0和HTTP1.X相比的新特性

HTTP2.0和HTTP1.X相比的新特性新的二进制格式（Binary Format），HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。多路复用（MultiPlexing），即连接共享，即每一个request都是是用...

转载 ES6新特性

默认参数模版表达式多行字符串拆包表达式改进的对象表达式箭头函数 =&>Promise块级作用域的let和const类模块化

原创 创建对象的几种方式

1\ new Object() var person = new Object(); person.name = "lisi"; person.age = 21; person.family = ["lida","lier","wangwu"]; person.say = function(){ alert(this.name); }2\字面式创建对象var...

原创 Html5的特性和html语义化理解

1\多了很多语义标签<hrader></header>定义了文档的头部区域<footer></footer> 定义了文档的尾部区域<nav></nav> 定义文档的导航<section></section> 定义文档中的节（section、区段）<article></ar...

原创 移动端和PC端的区别

1\PC考虑的是PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性.移动端浏览器都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配2\在部分事件的处理上，移动端多出来的事件是触屏事件，而缺少的是hover事件和鼠标事件.3\css3使用...

原创 react高阶组件

高阶组件是一个接替Mixin实现抽象组件公共功能的好方法。高阶组件其实是一个函数，接收一个组件作为参数，返回一个包装组件作为返回值，类似于高阶函数。高阶组件和装饰器就是一个模式，因此，高阶组件可以作为装饰器来使用。高阶组件有如下好处：封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。...

原创 react-router

hashHistory.push(/relationshipTop5?personId=${personId})首页 Route path="/" component={InitialSearch} />

原创 Promise,async,await,fetch

promise是一个构造函数，内部接收一个回调函数。回调函数内部有两个参数,reslove是执行成功的时候调用的，reject是失败调用的Promise.all(iterator)Promise.race(iterator)promise.rejectpromise.resolveasync 和await联合起来使用相当于替代了Promise的then和catch方法await定...

转载 flex布局

display:flex/inline-flex设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。lex-direction 即项目的排列方向row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿...

原创 component和 purecomponent

componet是 react的组件对象，这个对象有一些自己的内置属性和方法：例如componentWillMount 这种，我们一般用的时候，就是重写这个函数。class App extends React.Component //写组件时候,就是继承这个对象.PureComponentReact15.3中新加了一个 PureComponent 类，只要把继承类从 Component...

原创 虚拟dom及其优劣

什么是虚拟dom用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作.虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分.优点:-虚拟DOM...

原创 call() 、 apply() 、bind() 、箭头函数

每一个Function对象都有一个apply()方法和一个call()方法它们各自的定义：apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。arguments为b的参数.a为对象call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对...

转载 react组件间的通信

https://www.jianshu.com/p/fb915d9c99c4

原创 Redux和Connect

Redux的作用:独立组件间实现状态通信.管理组件状态.使用Redux应该遵循一下原则：整个应用共享的state应该存储在store的状态树中，store是唯一的；state不能直接修改，只能通过action表达修改的意图，调用dispatch()修改state；state的修改规则reducers必须是一个纯函数，不能有副作用。Redux的数据流Store作为唯一的st...

原创 React生命周期总结

react的生命周期v16.0前的周期.1\组件挂载阶段:componentWillMount，render，componentDidMountcomponentWillMount:在组件挂载到DOM前调用，且只会被调用一次，以后组件更新不调用，整个生命周期只调用一次，可以修改第一次state的值，也可以把写在这边的内容提前到constructor()中，所以项目中很少用。rende...

原创 整理部分性能问题

1\ webpack中的配置:一些插件:const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');//css打包样式最小化,配置:entry入口处配置vendor,这样的话,就不会每个js都打共用插件进去,减少了js的体积.vendor.js中的内容基本上很少更新,并利用浏览器的...

原创 基于webpack的react项目搭建

webpack的原理:主要分析你的项目结构，找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言（Scss、less、TypeScript），将其转换和打包为合适的格式供浏览器使用1\进入一个空文件夹,终端输入 npm init, 初始化packge.json 项目的依赖管理和脚本任务.2\npm install react react-dom react-redux re...

原创 TypeScript学习

TypeScript学习TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持好处:- 在编译阶段就发现大部分错误,增加了代码的可读性和可维护性- 可以定义从简单到复杂的几乎一切类型，TypeScript 编译报错，也可以生成 JavaScript...