【JS交互埋坑】事件函数自动将数字字符串String转为数值Number

简介: 【JS交互埋坑】事件函数自动将数字字符串String转为数值Number

一、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中,假设有一列表内容,点击我们可以进行页面的跳转到响应的详情页面,这就需要给每一个都定义点击事件:

  1. 通过 ul>li 标签定义页面列表内容,并定义相关的类名如:list、item
  2. 在js中通过document.getElementsByClassName获取所有的元素
  3. 遍历所有获取的元素,并给每一个都定义点击事件

代码如下:

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

注:三种方式都可以解决问题,可以根据现阶段的知识和能力选择合适的方案

目录
相关文章
|
1月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
5天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
15 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
4天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
20天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
40 6
|
19天前
|
NoSQL Redis
Redis 字符串(String)
10月更文挑战第16天
31 4
|
18天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
20天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
29天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
24 4
|
28天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
15 2
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5

热门文章

最新文章