一、DOM操作中自定义事件函数形参传参自动将数字字符串String转为数值Number。
这是一个表格列表数据的渲染,通过配置项的方式,去通过原生DOM渲染到页面。每一项中有一个format函数可以格式化当前行的数据,它返回一个包裹标签和事件的字符串。恰恰就是这个字符串,在自定义函数中传参时暗中捣鬼,将数字字符串转成了数值。
如下代码,这是一段做了拼接的代码,很难发现它会有问腿:
]
{ display:操作', name '', index:'', width: 100, align:"center", editable: false, sortable: true, hidden: false, formatter: function (y, o, r) { return '<a operate="delete" href="javascript:void(@)" οnclick="revocationHandle(' + r.VC_BATCH_ID +')">撤销</a> }
然而是事实是,当我传递 VC_BATCH_ID
的时候总会报 SyntaxError: invalid syntax
这个错误
SyntaxError(语法错误)对象代表尝试解析不符合语法的代码的错误。当 Javascript 引擎解析代码时,遇到了不符合语法规范的标记(token)或标记顺序,则会抛出 SyntaxError。
SyntaxError 是一个可序列化对象,所以可以使用 structuredClone() 对它进行克隆,也可以使用 postMessage() 在 Worker 之间拷贝它。
VC_BATCH_ID 是诸如 asd-231-tfd-23334 类似的 id 值,所以我尝试传递 123 、‘Hello’、’中国’ 这些数字或字符串常量,发现都可以正常拿到结果。所以又尝试直接把 asd-231-tfd-23334 字面量做了传递,果不其然,又开始报错了。我又尝试传递了对象、数组,都是报错。真是一头雾水,两眼懵逼。
我又尝试使用 String() 、JSON.stringify() 去处理,依旧不行。
问题定位到了,就在于这个传递的参数上,它自己偷偷做了处理。那么到底是什么原因呢?
原来是字符串拼接的过程中,如果有事件函数要传递参数,参数部分应该是 removeHandle("id")这样的。所以我们这里需要转义字符转义一下引号。如下:
{ display:操作', name '', index:'', width: 100, align:"center", editable: false, sortable: true, hidden: false, formatter: function (y, o, r) { return '<a operate="delete" href="javascriptvoid(@)" οnclick="revocationHandle(\'' + r.VC_BATCH_ID +'\')">撤销</a> }
注:因为之前的纯原生操作,并没有遇到此类问题。这里不熟悉对方代码到底是如何封装和处理的,有可能与之有关系。但是再遇到诸如此类问题的时候,大家可以参考下解决方案。
二、批量定义元素事件不生效问题
这个问题对于一些成熟的开发人员不算难,很好解决。但是对于一些新手、甚至初级开发人员会造成困扰,所以在这里顺便讲一下。
在原生JS中,假设有一列表内容,点击我们可以进行页面的跳转到响应的详情页面,这就需要给每一个都定义点击事件:
- 通过 ul>li 标签定义页面列表内容,并定义相关的类名如:list、item
- 在js中通过document.getElementsByClassName获取所有的元素
- 遍历所有获取的元素,并给每一个都定义点击事件
代码如下:
# HTML 代码 <ul class="list"> <li class="item">列表展示内容一</li> <li class="item">列表展示内容二</li> <li class="item">列表展示内容三</li> <li class="item">列表展示内容四</li> <li class="item">列表展示内容五</li> <li class="item">列表展示内容六</li> <li class="item">列表展示内容七</li> </ul> # JavaScript 代码 var items = document.getElementsByClassName('item') for(var i = 0; i < items.length; i++){ items[i].onclick = function(){ // 执行相关代码 console.log(i, this) } }
上面的代码,一气呵成,看起来没有什么问题。如果仅仅是跳转到同一个页面,获取操作当前这个元素,完全可以使用 this 获取对应的内容。但是如果想要携带数据跳转到指定页面,或者当前页面中需要获取当前索引做进一步处理,会发现,索引并不存在于任何一个上面,而是一个固定值。
什么原因呢?
for 循环中 var 声明的变量是一个全局变量,而且点击事件属于人为触发后执行,而此时循环已经执行完毕,所以当人为i点击时,i的全局变量值已经时 items.length 了。
提供三种解决办法:
1、通过给每一个定义一个属性存储遍历的索引
for(var i = 0; i < items.length; i++){ items[i],idx = i items[i].onclick = function(){ // 执行相关代码 console.log(i, this, this.idx) } }
2、通过闭包的方式,形成独立作用域,保存变量的值
for(var i = 0; i < items.length; i++){ (function(j){ items[j].onclick = function(){ // 执行相关代码 console.log(i, this, j) } })(i) }
3、通过let定义场域,让 i 成为局部作用于快中的值保存下来
for(let i = 0; i < items.length; i++){ items[i].onclick = function(){ // 执行相关代码 console.log(i, this) } }
注:三种方式都可以解决问题,可以根据现阶段的知识和能力选择合适的方案