虚拟dom应用
<body>
<ul id="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
</ul>
</body>
{
tag: 'ul',
attrs: {
id: 'list'
},
children:[{
tag: 'li',
attrs: { className: 'item' },
children: ['item 1']
},{
tag: 'li',
attrs: { className: 'item'},
children:['item 2']
}]
}
用js模拟的体量非常小。
看snabbdom里面的介绍。一个h函数，一个patch函数，就是vdom最主要的api。看h函数传的是什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button> <!-- 这里版本要一致 -->
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script> <script>
var snabbdom = window.snabbdom; // 定义patch
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
]) // 定义h
var h = snabbdom.h; var container = document.getElementById('container');
// 生成vnode
var vnode = h('ul#list', {}, [
h('li.item', {}, 'item 1'),
h('li.item', {}, 'item 2')
]) patch(container, vnode); //模拟改变
var btnChange = document.getElementById('btn-change');
btnChange.addEventListener('click', function(){
var newVnode = h('ul#list', {}, [
h('li.item', {}, 'item 1'),
h('li.item', {}, 'item b'),
h('li.item', {}, 'item 3')
]);
patch(vnode, newVnode);
})
</script>
</body>
</html>
item1没有渲染，item b, item3闪烁了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button> <!-- 这里版本要一致 -->
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script> <script>
var snabbdom = window.snabbdom; // 定义patch
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
]) // 定义h
var h = snabbdom.h; // 将该数据展示成一个表格。然后随便修改一个信息，表格也跟着修改
var data = [{
name: '张三',
age: '20',
address: '北京'
},{
name: '李四',
age: '21',
address: '上海'
},{
name: '王五',
age: '22',
address: '广州'
}]; data.unshift({
name: '姓名',
age: '年龄',
address: '地址'
}); var container = document.getElementById('container');
var btnChange = document.getElementById('btn-change'); // 渲染函数
var vnode;
function render(data) {
var newVnode = h('table',{}, data.map(function(item){
var tds = [];
for (i in item){
if(item.hasOwnProperty(i)){
tds.push(h('td', {}, item[i]+''))
}
}
return h('tr',{}, tds);
})); if (vnode) {
// re-render
patch(vnode, newVnode);
} else {
// 初次渲染
patch(container, newVnode);
} vnode = newVnode;
}
render(data); btnChange.addEventListener('click', function(){
data[1].age = 30;
data[2].address = '深圳';
// re-render
render(data);
})
</script>
</body>
</html>
再查看dom，不再是整个table渲染。就只更新改变的dom。
虚拟dom应用的更多相关文章
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- React虚拟DOM浅析
在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...
- React的虚拟DOM
ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...
- react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- 【虚拟DOM】√
深度剖析:如何实现一个 Virtual DOM 算法 为什么虚拟DOM更优胜一筹 新建树,渲染树,新建新树,对比树(算法),最少dom操作的渲染树
- React生命周期和虚拟DOM
一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...
- [深入react] 4.牛逼闪闪的虚拟DOM
React.createElement嵌套后的结果就是虚拟dom,虚拟dom听着很高端,其实就是一个json,类似: { type:'div', props:{ className:"box ...
- React虚拟DOM具体实现——利用节点json描述还原dom结构
前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...
- 实现一个简单的虚拟DOM
现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...
- 虚拟DOM详解
虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...
随机推荐
- Xmanager教程
简介 Xmanager是市场上领先的PC X服务器,可将X应用程序的强大功能带入Windows环境. 提供了强大的会话管理控制台,易于使用的X应用程序启动器,X服务器配置文件管理工具,SSH模块和高性 ...
- Spring MVC如何获取请求中的参数
目录 一.获取URL中路径参数 1.1 @PathVariable 注解 1.2 @PathParam 注解 二.获取请求参数: 2.1 GET请求 2.1.1 获取请求中的单个参数:@Request ...
- 高性能最终一致性框架Ray之基本功能篇
一.Event(事件) Event是Actor产生的记录状态变化的日志,由StateId(状态Id),UID(幂等性控制),TypeCode(事件类型),Data(事件数据),Version(事件版本 ...
- C++ 特性之 lambda
"我扑到书籍上,就像饥饿的人扑在面包上"-- 高尔基 简而言之,Lambda 表达式就是用于创建匿名函数的. 或许,Lambda 表达式算得上是 C++ 11 新增特性中最激动人心 ...
- 死锁造成oom的排错
1.死锁的查看步骤 jps -l jstack xxxx(xxxx为java进程的进程号) ------ 2:查看java进程的参数: jps -l jinfo -flag printGcDetial ...
- 20 闭包、nonlocal
闭包的概念 闭包就是能够读取其他函数内部变量的函数. 从模块级别调用函数内部的局部变量. 闭包 = 函数+环境变量(函数外部的变量) 闭包存在的条件 闭包必须返回一个函数 被返回的函数必须调用环境变量 ...
- nginx与PHP编译configure
configure参数nginx和php是编译安装的关键.记录下来备用: php: ./configure --prefix=/usr/local/php --with-config-file-pat ...
- SAS学习笔记50 SAS数据集索引
在没有索引的情况下,SAS是一条接一条的扫描观测:有索引时,直接跳到该索引对应的观测所在位置.总结一句话就是:节省时间,节省内存,提高效率 当然并不是任何情况下使用索引都能提高工作效率,因为建立索引本 ...
- rabbitMQ 重试
rabbitMQ 重试机制 spring.rabbitmq.listener.simple.retry.max-attempts=5 最大重试次数spring.rabbitmq.listener.si ...
- v8 引擎的内存
一.nodejs查看内容使用情况: process.memoryUsage() 单位为 Btye 转化函数: var format = function(bytes) { return (bytes/ ...