Song

生活的压力不是换个地方就能逃避的了的

virtualDOM和DOM-diff

虚拟DOM和DOM diff算法

用对象描述DOM结构 class Element { constructor(type, props, children) { this.type = type; this.props = props; this.children = children; } } 创建虚拟DOM，返回虚拟节点 function createElement(type, pro...

Posted by Song on March 25, 2019

Prototype和__proto__.resource/commit

{"compress":true,"commitItems":[["f8ea24db-cf1a-4fc2-9e13-a663e647281e",1553221570508,"---\nlayout: post\ntitle: ES6计算属性\nsubtitle: \ndate: 2019-03-14\nauthor: Song\nheader-img...

Posted by Song on March 22, 2019

prototype和__proto__

prototype 是函数(function) 的一个属性, 它指向函数的原型. __proto__ 是对象的内部属性, 它指向构造器的原型, 对象依赖它进行原型链查询. 由上, prototype 只有函数才有, 其他(非函数)对象不具有该属性. 而 __proto__ 是对象的内部属性, 任何对象都拥有该属性. function Person () {} let perso...

Posted by Song on March 22, 2019

Vue.nextTick原理及使用场景

Vue异步更新队列 Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际（已去重的）工作。 修改数据后，Vue不会立即更新DO...

Posted by Song on March 20, 2019

Event Loop 执行栈 任务队列

一个典型的例子 setTimeout(function(){console.log(1);}, 0); console.log(2); 执行结果为始终为 2 1 setTimeout()/console.log(2)为同步任务，在主线程中执行，setTimeout回调函数为异步任务，setTimeout执行后将回调函数加入任务队列，待主线程任务执行完成后开始执行任务队列中的可执行任务。 ...

Posted by Song on March 15, 2019

ES6计算属性

Posted by Song on March 14, 2019

数据范式化

数据范式化的几个概念： 1.任何类型的数据在 state 中都有自己的 “表”。 2.任何 “数据表” 应将各个项目存储在对象中，其中每个项目的 ID 作为 key，项目本身作为 value。 3.任何对单个项目的引用都应该根据存储项目的 ID 来完成。 4.ID 数组应该用于排序。 优点：去除冗余数据，结构扁平，避免深层次嵌套 缺点：查询性能低下 //原始数据 { 'id':1, ...

Posted by Song on March 14, 2019

ES6计算属性

let attrName = 'id'; let newObj = { [attrName]: '123' }; 等价于 let attrName = 'id'; let newObj = {}; newObj[attrName] = '123';

Posted by Song on March 14, 2019

ios浏览器日期格式无法转换问题

日期格式以 ‘-‘ 分割在ios微信浏览器无法使用Date转换，需替换为 ‘/’ let date = ‘2019-02-15’; let time = Date.parse(data.replace(/-/g, ‘/’)); 在项目开发中，当从服务端拿到时间字符串，使用字符串初始化日期时间时， 若时间格式设置为24:00（不合法时间格式），在iOS浏览器中无法正常解析， android系...

Posted by Song on March 14, 2019

match匹配包含子表达式的正则表达式

'&branId=656121&'.match(/(?<subExp1>^|&)branId=(?<subExp2>[^&]*)(?<subExp3>&|$)/); /*返回结果*/ ["&branId=656121&", "&", "656121", "&", index: 0, i...

Posted by Song on March 11, 2019

FEATURED TAGS
ant-design tree react css ES6 计算属性
ABOUT ME

Goals determine what you going to be!

✉️ songlfneu@gmail.com

FRIENDS