├── 放着占个位置.html
├── README.md
└── a


/放着占个位置.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 	 _ /\\\______________/\\\___________/\\\___/\\___________/\\__/\\\\\\\\\\\\\\\\______
 3 | 	  _\/\\\_____________\/\\\__________\/\\\__\///\\______/\\/___\////////\\\/////______
 4 | 	   _\/\\\_____________\/\\\__________\/\\\____\///\\_/\\//____________\/\\\__________
 5 | 	    _\/\\\_____________\/\\\__________\/\\\______\//_\//_______________\/\\\_________
 6 | 	     _\/\\\_____________\/\\\\\\\\\\\\\\/\\\_______\///_________________\/\\\________
 7 | 	      _\/\\\_____________\/\\\__________\/\\\_______\/\\________________\/\\\_______
 8 | 	       _\/\\\_____________\/\\\__________\/\\\_______\/\\________________\/\\\_______
 9 | 	        _\/\\\\\\\\\\\\\\__\/\\\__________\/\\\_______\/\\________________\/\\\______
10 | 	         _\//////////////___\///___________\///________\//_________________\/\\\_____
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 	_ /\\\______________/\\\___________/\\\___/\\___________/\\__/\\\\\\\\\\\\\\\\______
  2 | 	  _\/\\\_____________\/\\\__________\/\\\__\///\\______/\\/___\////////\\\/////______
  3 | 	   _\/\\\_____________\/\\\__________\/\\\____\///\\_/\\//____________\/\\\__________
  4 | 	    _\/\\\_____________\/\\\__________\/\\\______\//_\//_______________\/\\\_________
  5 | 	     _\/\\\_____________\/\\\\\\\\\\\\\\/\\\_______\///_________________\/\\\________
  6 | 	      _\/\\\_____________\/\\\__________\/\\\_______\/\\_________________\/\\\_______
  7 | 	       _\/\\\_____________\/\\\__________\/\\\_______\/\\_________________\/\\\_______
  8 | 	        _\/\\\\\\\\\\\\\\__\/\\\__________\/\\\_______\/\\_________________\/\\\______
  9 | 	         _\//////////////___\///___________\///________\//__________________\/\\\_____
 10 | 		 
 11 | 
 12 | <a href="#基础系列"><img src="https://img.shields.io/badge/>-issue-red.svg"/></a>
 13 | 
 14 | # 🆕lhyt的个人沉淀
 15 | ## 📖从此开始写博客的日子，记录学过的，不要让自己忘记
 16 | ### ❤️所有的都是个人心得和总结，转载时请注明来源于*lhyt的github*
 17 | 
 18 | <details>
 19 | 	<summary>📖基础系列</summary>
 20 | 
 21 | [this、call、apply、bind、继承、原型链 ](https://github.com/lhyt/issue/issues/14)  |
 22 | [Rxjs光速入门](https://github.com/lhyt/issue/issues/26)
 23 | 
 24 | 
 25 | </details>
 26 | 
 27 | <details>
 28 | 	<summary>🐟react系列</summary>
 29 | 	
 30 | [react hook的初步研究](https://github.com/lhyt/issue/issues/35)  |
 31 | [从一次react异步setState引发的思考](https://github.com/lhyt/issue/issues/31)  |
 32 | [一次preact迁移到react16总结](https://github.com/lhyt/issue/issues/34)  |
 33 | [react hook——你可能不是“我”所认识的useEffect](https://github.com/lhyt/issue/issues/37)  |
 34 | [手把手带你用react hook撸一遍class组件的特性](https://github.com/lhyt/issue/issues/38)  |
 35 | [可能你的react函数组件从来没有优化过](https://github.com/lhyt/issue/issues/39)
 36 | 
 37 | </details>
 38 | 
 39 | 
 40 | <details>
 41 | 	<summary>✒️源码与深究系列</summary>
 42 | 	
 43 | [从documentFragement到手写vue](https://github.com/lhyt/issue/issues/2)  |
 44 | [函数式编程](https://github.com/lhyt/issue/issues/7)  |
 45 | [从单向数据到双向数据绑定](https://github.com/lhyt/issue/issues/10)  |
 46 | [模块化](https://github.com/lhyt/issue/issues/13)  |
 47 | [前端路由](https://github.com/lhyt/issue/issues/18)  |
 48 | [pwa+webpack，初探与踩坑](https://github.com/lhyt/issue/issues/21)  |
 49 | [小白大战diff算法](https://github.com/lhyt/issue/issues/24)  |
 50 | [node框架express的研究](https://github.com/lhyt/issue/issues/25)
 51 | 
 52 | </details>
 53 | 
 54 | 
 55 | 
 56 | <details>
 57 | 	<summary>🌲深究原生js系列</summary>
 58 | 	
 59 | [正则表达式](https://github.com/lhyt/issue/issues/4)  |
 60 | [关于js类型转换骚操作](https://github.com/lhyt/issue/issues/5)  |
 61 | [其他冷门操作](https://github.com/lhyt/issue/issues/12)  |
 62 | [盘点前端群的无脑回答](https://github.com/lhyt/issue/issues/17)  |
 63 | [面试官：你为什么这么强，什么都敢盘(reduce)](https://github.com/lhyt/issue/issues/41)  |
 64 | [名字随便起——es6 Proxy](https://github.com/lhyt/issue/issues/30)  |
 65 | [元编程之——symbol](https://github.com/lhyt/issue/issues/36)
 66 | 
 67 | </details>
 68 | 
 69 | 
 70 | 
 71 | <details>
 72 | 	<summary>🚗算法系列</summary>
 73 | 	
 74 | [常见的排序算法](https://github.com/lhyt/issue/issues/3)  |
 75 | [聊聊w3c刷题遇到的小坑](https://github.com/lhyt/issue/issues/6)  |
 76 | [今日头条2018春招3.24研发类笔试题](https://github.com/lhyt/issue/issues/11)  |
 77 | [js版本的BFS&DFS](https://github.com/lhyt/issue/issues/16)  |
 78 | [关于js随机数生成器的扩展 ](https://github.com/lhyt/issue/issues/23)  |
 79 | [前端工程师彻底征服树结构组件的秘籍](https://github.com/lhyt/issue/issues/46)
 80 | 
 81 | </details>
 82 | 
 83 | 
 84 | <details>
 85 | 	<summary>🌹canvas+3d系列</summary>
 86 | 	
 87 | [从MDN的canvas动画例子的启发](https://github.com/lhyt/issue/issues/8)  |
 88 | [web游戏中的自动跟随实现](https://github.com/lhyt/issue/issues/40)  |
 89 | [一步步带你实现web全景看房——three.js](https://github.com/lhyt/issue/issues/42)
 90 | 
 91 | </details>
 92 | 
 93 | 
 94 | <details>
 95 | 	<summary>😊html+css系列</summary>
 96 | 
 97 | [css的基础原理](https://github.com/lhyt/issue/issues/15)  |
 98 | [css菜鸡的自我救赎](https://github.com/lhyt/issue/issues/28)  |
 99 | [拥抱更底层技术——从CSS变量到Houdini](https://github.com/lhyt/issue/issues/29)
100 | 
101 | </details>
102 | 
103 | 
104 | <details>
105 | 	<summary>💻计算机网络、浏览器系列</summary>
106 | 	
107 | [http、浏览器相关](https://github.com/lhyt/issue/issues/9)  |
108 | [页面的通信与跨域](https://github.com/lhyt/issue/issues/20)  |
109 | [浏览器原理](https://github.com/lhyt/issue/issues/22)  
110 | 
111 | </details>
112 | 
113 | <details>
114 | 	<summary>👋软技能系列</summary>
115 | 	
116 | 
117 | [一次现网翻车经历与总结](https://github.com/lhyt/issue/issues/32)  |
118 | [前端工程师如何持续保持热情（一）](https://github.com/lhyt/issue/issues/43)  |
119 | [前端工程师如何持续保持热情（二）](https://github.com/lhyt/issue/issues/44)
120 | 
121 | </details>
122 | 
123 | 


--------------------------------------------------------------------------------
/a:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title></title>
  5 | </head>
  6 | <body>
  7 | 
  8 | </body>
  9 | <script type="text/javascript">
 10 | class Element {
 11 | 	constructor (type, props, children) {
 12 | 		this.type = type
 13 | 		this.props = props
 14 | 		this.children = children || []
 15 | 	}
 16 | }
 17 | 
 18 | function createElement (type, props, children) {
 19 | 	return new Element(type, props, children)
 20 | }
 21 | 
 22 | 
 23 | //将vnode转化为真正的dom
 24 | function render (vnode) {
 25 | 	let el = document.createElement(vnode.type)
 26 | 	for(let key in vnode.props){
 27 | 		el.setAttribute(key, vnode.props[key])
 28 | 	}
 29 | 	vnode.children&&vnode.children.forEach(child=>{//递归节点，如果是文本节点则直接插入
 30 | 			child = (child instanceof Element) ? 
 31 | 			render(child):
 32 | 			document.createTextNode(child)
 33 | 			el.appendChild(child)
 34 | 		})
 35 | 	return el
 36 | }
 37 | let allIndex = 0
 38 | 
 39 | function  diff (oldTree, newTree) {
 40 | 	const patches = {}//差异表记录差异
 41 | 	let index = 0//记录开始索引
 42 | 	dfswalk(oldTree, newTree, index, patches)//先序深度优先遍历
 43 | 	return patches
 44 | }
 45 | 
 46 | function dfswalk (oldNode, newNode, index, patches) {
 47 | 	const currentPatch = []
 48 | 	if(!newNode){//判断节点是否被删除，记录被删的index
 49 | 		currentPatch.push({type: 'REMOVE',index})
 50 | 	}else if(typeof oldNode === 'string' && typeof newNode === 'string'){//处理文本节点
 51 | 		if(oldNode !== newNode){
 52 | 			currentPatch.push({type: 'TEXT',text:newNode})
 53 | 		}
 54 | 	}else if(oldNode.type === newNode.type){//如果节点类型相同
 55 | 		//对比属性
 56 | 		let patch = props_diff(oldNode.props, newNode.props)
 57 | 		//如果属性有差异则写入当前的差异数组
 58 | 		Object.keys(patch).length && (currentPatch.push({type: 'ATTR',patch}))
 59 | 		//对比子节点
 60 | 		children_diff(oldNode.children, newNode.children, index, patches)
 61 | 	}else{//节点类型不同
 62 | 		currentPatch.push({type: 'REPLACE',newNode})
 63 | 	}
 64 | 	//将当前差异数组写入差异表
 65 | 	currentPatch.length && (patches[index] = currentPatch)
 66 | }
 67 | 
 68 | function children_diff (oldChildren, newChildren, index, patches) {
 69 | 	//对每一个子节点深度优先遍历
 70 | 	oldChildren.forEach((child,i)=>{
 71 | 		//index在每一次进dfs的时候要加一，作为唯一key
 72 | 		dfswalk(child, newChildren[i], ++allIndex, patches)
 73 | 	})
 74 | }
 75 | 
 76 | function props_diff(oldProp, newProp){
 77 | 	const patch = {}
 78 | 	//判断新老属性的差别
 79 | 	for(let k in oldProp){
 80 | 		//如果属性不同，写入patch
 81 | 		oldProp[k] !== newProp[k] && (patch[k] = newProp[k])
 82 | 	}
 83 | 	//新节点新属性
 84 | 	for(let k in newProp){
 85 | 		//判断老节点的属性在新节点里面是否存在，没有就写入patch
 86 | 		!oldProp.hasOwnProperty(k) && (patch[k] = newProp[k])
 87 | 	}	
 88 | 	return patch
 89 | }
 90 | 
 91 | let allPatches//根据差异还原dom，记录差异表
 92 | let Index = 0//索引从第一个节点开始
 93 | function update (HTMLNode, patches) {//根据差异表更新html元素，vnode转换为真正的节点
 94 | 	allPatches = patches
 95 | 	htmlwalk(HTMLNode)//遍历节点，最开始从第一个节点遍历
 96 | }
 97 | 
 98 | function htmlwalk (HTMLNode) {
 99 | 	const currentPatch = allPatches[Index++]//遍历一个节点，就下一个节点
100 | 	const childNodes = HTMLNode.childNodes
101 | 	//有子节点就后序dfs
102 | 	childNodes && childNodes.forEach(node=>{
103 | 		htmlwalk (node)
104 | 	})
105 | 	//对当前的差异数组进行遍历，根据差异还原元素
106 | 	currentPatch && currentPatch.length && currentPatch.forEach(patch=>{
107 | 		doPatch(HTMLNode, patch)
108 | 	})
109 | }
110 | 
111 | function doPatch (node, patch) {//还原过程，其实就是dom操作
112 | 		console.log(patch.type)
113 | 	switch (patch.type) {
114 | 		case 'REMOVE' :
115 | 		console.log(node)
116 | 		node.parentNode.removeChild(node)
117 | 		break
118 | 		case 'TEXT' :
119 | 		node.textContent = patch.text
120 | 		break
121 | 		case 'ATTR' :
122 | 		for(let k in patch.patch){
123 | 		console.log(node)
124 | 			const v = patch.patch[k]
125 | 			if(v){
126 | 				node.setAttribute(k, v)
127 | 			}else{
128 | 				node.removeAttribute(k)
129 | 			}
130 | 		}
131 | 		break
132 | 		case 'REPLACE' :
133 | 		const newNode = (patch.newNode instanceof Element) ?
134 | 		render(patch.newNode) : document.createTextNode(patch.newNode)
135 | 		node.parentNode.replaceChild(newNode, node)
136 | 		console.log(node)
137 | 		break						
138 | 	}
139 | }
140 | //创建虚拟dom
141 | var v = createElement('ul',{class:'list'},[
142 | 		createElement('li',{class:'item'},['a']),
143 | 		createElement('li',{class:'item'},['b']),
144 | 		createElement('li',{class:'item'},['c'])
145 | 	])
146 | //dom diff
147 | var d = diff(v,createElement('ul',{class:'list'},[
148 | 		createElement('li',{class:'item1'},['a']),
149 | 		createElement('div',{class:'item'},['b'])
150 | 	]))
151 | //vnode渲染成真正的dom
152 | var el =  render(v)
153 | //挂载dom
154 | document.body.appendChild(el)
155 | //diff后更新dom
156 | update (el, d)
157 | </script>
158 | </html>
159 | 


--------------------------------------------------------------------------------