关于原生DOM事件绑定传参的一些事

在如今无论是单向还是双向绑定的各类V框架中，我们大多数时候其实不需要用上以前字符串模板拼接的html，甚至是对于html本身的编写，也大部分都是在.vue或是.jsx中了，即便如此，在维护一些比较久远的代码时，还是会遇到一些问题，而今天便是讨论下关于传参的方式

首先html结构为

<ul id="ul"></ul>

对应的有如下需要渲染到ul中的一个数据

let arr = [
  { num: 1, str: '行1', obj: { a: 1, b: 2 }, arr: [1, 2] },
  { num: 2, str: '行2', obj: { a: 2, b: 3 }, arr: [3, 4] },
]

那么如果需要将这个数据渲染出来并且传入这个数据本身，对于vue之类的框架而言，只需要v-for和@click直接绑定就可以，不过对于原生而言，这种方式其实并不理智，也不对

原生如果需要直接实现@click(params)的话，对应的自然也就是绑定在onclick(item)中，那么实现的方式会是这样

arr.forEach(item => {
  html += `<li onclick='handle(event, ${JSON.stringify(item)})' >${item.str}</li>`;
})

那么这种方式会有什么问题呢？他会暴露整个对象在html中，也就是下图

1.png

所以按我的经验来说的话，我会更加建议将参数传入到data-xxx中，不过当然也是半斤八两，毕竟前端代码就是给别人看的，不懂的没必要伪装，懂的也没办法伪装，我这里的经验更多的是应对于后续维护调试，可以排除大量不需要的属性，定位问题更加容易，就像是在vue中我更多的是直接用解构赋值来获取参数，比如

<a @click="handle(item)" v-for="(item, index) in list" :key="item.id"></a>
handle({ id,  name, department }) { }

那么如果想要传入整个对象，但是又不愿意将其暴露在html中的话，那该怎么绑定呢，也是有方法的，那便是利用闭包，也就是以下的绑定方式

arr.forEach((item) => {
  let id = `li${item.num}`;
  let dom = document.createElement('li');
  dom.innerHTML = item.str + `一些比较复杂的html，比如<div><div><a href='javascript:;'>点击链接</a></div></div>`;
  dom.addEventListener('click', function(event) { console.log(event, item) });
  ul.append(dom);
})

可以从代码中看到，这个li节点将是直接生成而非字符串拼接，这样的好处在于可以直接获取这个li节点，从而利用js的闭包将当前循环的item对象直接传入到绑定方法中，但是闭包有好处自然也有坏处，这种方式如果绑定的多，对于内存的消耗自然也不小，所以使用这种方式的话，需要稍微考虑性能的问题，不过当然，一般情况下应该采用其他方式来处理这种问题，比如按视图加载，分页处理，都是用来解决这类大量点击绑定的好方法。

最后编辑于：2020.04.15 14:53:40