Vue TypeScript 使用eval函数的坑

news/2024/11/27 19:30:28/

       正常情况下,项目里不会用eval函数,但是万一要调用一个全局的js库,就需要用eval做些骚操作,这个时候编译会提示: is strongly discouraged as it poses security risks and may cause issues with minification.

      警告是可以忽略,刚开始我也没当回事,有风险就有风险,可控,我知道自己写的是啥。但是,今天我改代码的时候出了问题。就是dev时候正常,但是打包以后,不按照预期执行,编译出来的代码就不是我要的逻辑。

问题的关键是:使用eval的函数不能是全局函数(需要包装在一个对象里),然后这个函数内容要简单,不要里面定义各种变量,然后被eval调用,免得被编译时候优化掉

简单的代码实例问题

上一段简单的代码:

<template><div><button @click="btn">测试</button></div>
</template>
<script setup lang="ts">function myfun(param:number){let ret = 0eval("ret = param+1")return ret;
}
function btn() {let ret = myfun(1);console.log(ret);
}
</script>

dev运行在浏览器点击按钮,输出2,没毛病

然后打包以后,运行就会是这样,输出为NaN

缩成一坨的这个代码里面,把我的myfun函数编译成了这样,也没毛病:

function myfun(param){let ret=0;return eval("ret = param+1"),ret }

但是,调用时候变成了这样!!!!

myfun调用的时候,传入的参数哪里去了???

let e=myfun();console.log(e)

因为没有参数进入,eval里的param+1结果就变成了NaN

解决方法

把代码改成这样,函数包装到一个对象里面:

<template><div><button @click="btn">测试</button></div>
</template>
<script setup lang="ts">const FunPack = {myfun(param:number){let ret = 0eval("ret = param+1")return ret;}
}function btn() {let ret = FunPack.myfun(1);console.log(ret);
}
</script>

 然后打包运行,输出为2正常:

这个时候调用变成这样,myfun的时候传的参数正常

let e=FunPack.myfun(1);console.log(e)

问题的原理

感觉上,对于调用一个不在对象里的函数,typescript编译时候进行了更多优化,对于myfun函数,里面eval函数那一行没有类型系统,等于没有,所以编译时候理解成下面这样,等于没有eval那一行。等于param没有被使用,所以调用函数时候,觉得这个参数没有用,就给吃了。。。

function myfun(param:number){let ret = 0return ret;
}

同理,如果myfun里面定义了别的变量,用来给eval使用,但是别的地方没有使用,编译时候,这个变量就会被编译器认为无效,然后被吃掉,比如myfun定义成这样,打包运行就会报错dat is not defined

function myfun(param:number){let ret = 0let dat = param + 10;eval("ret = dat+1")return ret;
}

一劳永逸的方法

虽然通过把函数封装到对象,可以解决问题,但是,也说不好ts编译器后续会不会关于对象的方法调用也进行这种优化。

所以还有一个解决方法,就是在函数里把param用一下,让编译器觉得它被使用了,别吃掉。

比如改成这样,把param输出一下。。。

function myfun(param:number){let ret = 0console.debug(param);eval("ret = param+1")return ret;
}


http://www.ppmy.cn/news/19029.html

相关文章

ARP渗透与攻防(三)之流量分析

ARP攻击-流量分析 ARP渗透与攻防(一)之ARP原理 ARP渗透与攻防(二)之断网攻击 系列文章 1.环境准备 1.kali作为攻击机 2.win10作为靶机 IP地址&#xff1a;192.168.110.11 3.网关 IP地址&#xff1a;192.168.110.1 2.kali数据包转发 出于安全考虑&#xff0c;Linux系统默…

Godot根据遮罩图移动粒子

前言 目前UI粒子特效unity引擎比较多&#xff0c;也好找资料&#xff0c;但是一般都是利用模型&#xff0c;使用3D粒子伪装2D效果。 Godot中也可以做到这一点&#xff0c;并且Godot有专门的2D粒子系统&#xff0c;可以通过一张遮罩图对粒子的位置进行设置。 godot粒子教程 …

深度学习网络---YOLO系列

深度学习网络—YOLO yolov1&#xff08;仅适用一个卷积神经网络端到端地实现检测物体的目的&#xff09; 首先将输入图片resize到448448&#xff0c;然后送入CNN网络&#xff0c;最后处理预测的结果得到检测的目标&#xff1b;yolov1的具体思想是将全图划分为SS的格子&#xf…

第五十三章 使用 ^SystemPerformance 监视性能 - InterSystems IRIS Linux 平台性能数据报告

文章目录第五十三章 使用 ^SystemPerformance 监视性能 - InterSystems IRIS Linux 平台性能数据报告第五十三章 使用 ^SystemPerformance 监视性能 - InterSystems IRIS Linux 平台性能数据报告 %SS - 使用 ALL^%SS 命令在运行过程中采集了四个样本。 Configuration * - 来自…

CSDN原创图片链接失效分析

过年花了5个小时&#xff0c;把我的所有BLOG&#xff08;200多篇&#xff09;检查了一遍&#xff0c;更正了几十处图片链接失效。 1. 现象 几个月来&#xff0c;由于在写书&#xff0c;不停地回翻自己以前的文章。结果&#xff0c;不断发现大量辛辛苦苦绘制的图片打不开了&am…

C语言之程序设计概述

1.1.1 程序的概念 程序&#xff1a;算法 数据结构 程序设计方法 语言工具和环境数据结构&#xff1a;数据的类型和数据的组织方式算法&#xff1a;对数据操作的方法和步骤 1.1.2 程序设计语言的种类 第一代语言&#xff08;机器语言&#xff09;&#xff1a;执行效率高、…

C++:类的构造函数与析构函数

目录 一.前言 二.类的构造函数 1.构造函数基本概念与语法细则 2.编译器默认生成的无参构造函数和自定义构造函数 3.构造函数的特性(可重载) 4.关于构造函数的注意事项 5.构造函数的应用示例&#xff1a; 三.类的拷贝构造函数 1.拷贝构造函数基本概念 2.编译器默认生成…

7.Java判断和循环+面试相关力扣算法题详解

提示&#xff1a; 文章目录前言一、顺序结构二、分支语句(1)if语句(2)switch语句*default的位置和省略:*case穿透*switch新特性*switch和if的第三种格式各自的使用场景三、循环结构1.分类2.for循环3.while循环4.for和while的对比:5.for和while循环的区别:6.练习:四、面试时的两…