livoras / simple-virtual-dom Goto Github PK
View Code? Open in Web Editor NEWBasic virtual-dom algorithm
License: MIT License
Basic virtual-dom algorithm
License: MIT License
不停的点击排序,行数越来越多,发现diff算法的moves没有删掉旧的元素
user5 | Funky | 49 | 521 |
---|---|---|---|
user4 | Pony | 33 | 3000 |
user2 | Lucy | 21 | 99 |
user3 | Tomy | 20 | 20 |
user1 | Jerry | 12 | 200 |
user2 | Lucy | 21 | 99 |
user4 | Pony | 33 | 3000 |
user5 | Funky | 49 | 521 |
user2 | Lucy | 21 | 99 |
user3 | Tomy | 20 | 20 |
user1 | Jerry | 12 | 200 |
user2 | Lucy | 21 | 99 |
user4 | Pony | 33 | 3000 |
user5 | Funky | 49 | 521 |
user2 | Lucy | 21 | 99 |
user3 | Tomy | 20 | 20 |
user1 | Jerry | 12 | 200 |
user5 | Funky | 49 | 521 |
如图:
在patch 的时候会自底向上(深度优先遍历)实现每个节点applyPatches
但是在diff的时候是自顶向下搜集每个节点的变更:
假设有节点1的变更是这样
那patches应该会记录成 {0: reorder, 1: replace, 2: replace}?
但是从代码的输出来看:
newChildren = diffs.children 会让根据key变换位置的children去和oldChildren比较,但是在https://www.npmjs.com/package/list-diff2中 对children没有过多介绍,可能会让人有迷惑
" "会被解析成文本节点
每次增加删除childern,都要手动重新计算Element的count,很麻烦
At the moment el has the pattern el(name, props, children)
but this means JSX doesn't work with it.
I've been needing to write a helper function that's basically just:
function h(name, props, ...children) {
return el(name, props, children);
}
Is compatibility with JSX a concern for this library?
I would like to use your library, yet I do not see any code dealing with events.
I could register events on the container, however I believe that it is preferable to have the option of registering events on all elements.
I am sure there are different strategies to deal with events.
Maybe the simplest and most flexible option is to have an additional optional parameter on the hyperscript function (el()), it would be a function, and this function gets called every time the HTML element corresponding to that vnode gets modified, or created.
Basically like "lifecycle events" for HTML elements which are managed by SVD.
So for example:
el('a', {'href':'#something'}, null, function(element, lifecycleEvent){
if(lifecycleEvent == 'created') {
// the HTML element for this vdom node was just created, add event listeners
element.addEventListener('click', function(){
// attach an event listener
});
}
});
We can then build on this functionality to do more complicated things if needed.
首先,感谢你分享这个思路和具体的实现逻辑。
我用你这个dist的bundle自己写了一个简单购物车逻辑,
具体的demo可以看下:
http://sky91.cn/demo/virtual_dom/index.html
遇到个问题,我在寻找解决办法,
当点击“-”按钮,把某个商品减到0之后,这个dom会销毁,
使用虚拟dom后,这个dom成功销毁了,
但是点击下一个商品的减之后,并没有效果,我打过console看过,此时第2个商品的click的this是第1个已经被删除的dom的jquery对象。
表现就是点击第2个的“+”按钮,第1个dom又回来了。。。
是否是销毁逻辑有问题?
还是我listener写的有问题?
难道说需要给第1个dom,在他销毁后还需要解绑。。
$('#cart_content')
.on('click', '.good-add', function () {// 增加数量
changeQuantity($(this), 1);
})
.on('click', '.good-sub', function () {// 减少数量
changeQuantity($(this), -1);
});
如果你有时间,是否能说下你的理解,再次感谢
使用swiper会导致报错 是否是因为swiper操作dom 的原因
简单测试了一下,两颗树diff出来的结果不是最小距离 -
var el1 = el('div', {'id': 'container'}, [el('ul'), el('li', ['1'])])
var el2 = el('div', {'id': 'container'}, [el('ul'), el('li', ['2']), el('li', ['1'])])
var d = diff(el1, el2)
console.log(JSON.stringify(d))
结果是两步
{
"0": [
{
"type": 1,
"moves": [
{
"index": 2,
"item": {
"tagName": "li",
"props": {
},
"children": [
"1"
],
"count": 1
},
"type": 1
}
]
}
],
"3": [
{
"type": 3,
"content": "2"
}
]
}
最小的距离应该是只有一步,插入一个li
想请问一下虚拟dom之上实现事件的触发,有什么好办法吗?代码里面好像没有涉及这一块,不知道是不是我没看到。。。
如果绑定的事件函数发生变化,那需要去对比新旧两棵树事件函数是否相同,请问有什么好办法吗?
非常感谢!
el("i",{class:"iconfont"},"") 因为字符串是当成数组一个一个添加的,所以会出现添加到就出现另外一个图标然后后面60c多了出来。
el("i",{class:"iconfont"},[""]) 这样好像也没有解决问题,也不知道是不是我的操作方式不大对,(图标库来源--阿里图标库 iconfont.cn)
阅读patch.js源代码的时候发现这句代码:
if (staticNodeList[index] === node.childNodes[index]) { // maybe have been removed for inserting
node.removeChild(node.childNodes[index])
}
不是很理解,
因为此代码上面做了数组转化赋值:
var staticNodeList = _.toArray(node.childNodes)
不太明白这个条件判断是为啥?
你好,看了你的博客和源码,受益匪浅。想问下你这个 simple-virtaul-dom 支持哪些浏览器, IE6+ 支持吗,virtual-dom 我测试了一下是支持IE6+的。
diff.js - 64.js没有考虑oldChildren为空,newChildren不为空的情况,会导致新的children没有渲染
_.each(oldChildren, function (child, i) {
var newChild = newChildren[i]
currentNodeIndex = (leftNode && leftNode.count)
? currentNodeIndex + leftNode.count + 1
: currentNodeIndex + 1
dfsWalk(child, newChild, currentNodeIndex, patches)
leftNode = child
})
var listDiff = require('list-diff2')
直接操作dom变化比较大会有bug,path.js代码node.removeChild(node.childNodes[index]),node.insertBefore(insertNode, node.childNodes[index] || null) 会出现报错。
Hi,
While using your simple-virtual-dom package, I stumbled upon a case when setting the value of inputs such as input
and textarea
.
Code:
el('input', { 'id': 'command', value: 'default' }, null);
// you start typing into the input
// .. then, after a while :
el('input', { 'id': 'command', value: state.command }, null)
Expected result: input#command has a value with contents of variable state.command.
Actual result: it still has the input you typed into the input element
If the value is changed in the meantime, this won't work, as the HTML value
property, as set by setAttribute
, is a "default" value.
It could be that this behaviour could be altered to work in these cases, I am not sure if it should. A fix would involve a hardcoded check for value
as property name, setting it with .value = x
instead of .setAttribute('value', x)
, and a way to make sure the diff still works as it should.
Thanks, if you need any help with this, let me know! :-)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.