livoras / simple-virtual-dom Goto Github PK

var listDiff = require('list-diff2')

如图：

在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没有过多介绍，可能会让人有迷惑

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! :-)

首先，感谢你分享这个思路和具体的实现逻辑。

我用你这个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);
            });

如果你有时间，是否能说下你的理解，再次感谢

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.

el("i",{class:"iconfont"},"") 因为字符串是当成数组一个一个添加的，所以会出现添加到&#xe就出现另外一个图标然后后面60c多了出来。
el("i",{class:"iconfont"},[""]) 这样好像也没有解决问题，也不知道是不是我的操作方式不大对，（图标库来源--阿里图标库 iconfont.cn）

简单测试了一下，两颗树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变化比较大会有bug,path.js代码node.removeChild(node.childNodes[index])，node.insertBefore(insertNode, node.childNodes[index] || null) 会出现报错。

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?

1.源码：我是直接下载git上面的zip
2.问题：

按照上图安装指示，我可以选择下面一种方式，也就是不进行依赖下载，但是这样子下载下来的源码就没有【list-diff2.js】这个文件。但是bundle.js里面引用了这个文件。
为什么不会出现错误？望解疑，感谢！

阅读patch.js源代码的时候发现这句代码：

      if (staticNodeList[index] === node.childNodes[index]) { // maybe have been removed for inserting
        node.removeChild(node.childNodes[index])
      }

不是很理解，
因为此代码上面做了数组转化赋值：

var staticNodeList = _.toArray(node.childNodes)

不太明白这个条件判断是为啥？

每次增加删除childern，都要手动重新计算Element的count，很麻烦

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
  })

使用swiper会导致报错 是否是因为swiper操作dom 的原因

https://github.com/developit/preact

不停的点击排序，行数越来越多，发现diff算法的moves没有删掉旧的元素

你好，看了你的博客和源码，受益匪浅。想问下你这个 simple-virtaul-dom 支持哪些浏览器， IE6+ 支持吗，virtual-dom 我测试了一下是支持IE6+的。

"&nbsp"会被解析成文本节点

想请问一下虚拟dom之上实现事件的触发，有什么好办法吗？代码里面好像没有涉及这一块，不知道是不是我没看到。。。
如果绑定的事件函数发生变化，那需要去对比新旧两棵树事件函数是否相同，请问有什么好办法吗？
非常感谢！

examples/sort-tabel.html 每次点击之后都会生成一些新的元素，不符合预期。
原始的：

点击后：

这是因为 listDiff 产生的diffs 里的 moves 表示要将user5插入到index 0，将index = 1元素删除(也就是user1)，将user1插入到index4

而这段代码中：

只插入了节点user5，没有删除节点user5

MDN中说insertBofore如果是已有DOM中的引用会调整位置，而不需要删除，这里没有起效果