在如今无论是单向还是双向绑定的各类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对象直接传入到绑定方法中， 但是闭包有好处自然也有坏处， 这种方式如果绑定的多， 对于内存的消耗自然也不小， 所以使用这种方式的话， 需要稍微考虑性能的问题， 不过当然， 一般情况下应该采用其他方式来处理这种问题， 比如按视图加载， 分页处理， 都是用来解决这类大量点击绑定的好方法。
网友评论