Vue TypeScript 使用eval函数的坑

news2024/9/23 7:31:27

       正常情况下,项目里不会用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 = 0
    eval("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 = 0
    eval("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 = 0
    return ret;
}

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

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

一劳永逸的方法

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/176848.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java多线程(二)——ReentrantLock源码解析(补充1——从AQS中唤醒的线程)

ReentrantLock源码解析&#xff08;补充1&#xff09; 上一章仅介绍了 ReentrantLock 的常用方法以及公平锁、非公平锁的实现。这里对上一章做一些补充。主要是&#xff1a; AQS 中阻塞的线程被唤醒后的执行流程 &#xff08;本篇讲述&#xff09; 可打断的锁 lock.lockInter…

【QT5.9】与MFC对比学习笔记-感悟篇2【2023.01.23】

是对QT的分析&#xff0c;不仅局限于QT。 二者区别 天下文章一大抄&#xff0c;技术也一样。MFC是对Windows系统API进行的封装&#xff0c;是以视类与文档类为核心的框架设计。微软20年前就已经把MVC玩的很6了&#xff0c;还有控件、动态库等等技术都是微软爸爸先搞出来的。若…

Kubernetes:认识 K8s开源 Web/桌面 客户端工具 Headlamp

写在前面 分享一个 k8s 客户端开源项目 Headlamp 给小伙伴博文内容涉及&#xff1a; Headlamp 桌面/集群 Web 端安装启动导入集群简单查看集群信息 理解不足小伙伴帮忙指正 我所渴求的&#xff0c;無非是將心中脫穎語出的本性付諸生活&#xff0c;為何竟如此艱難呢 ------赫尔曼…

第八层:模板

文章目录前情回顾模板模板的概念模板的特点模板分类函数模板作用语法函数模板的使用注意事项普通函数和函数模板的区别普通函数和函数模板的调用规则优先调用普通函数空模板强调函数模板函数模板可以发生重载函数模板产生更好的匹配时模板的局限性类模板作用语法类模板实例化对…

Redis在秒杀场景的作用

秒杀业务特点&#xff1a;限时限量&#xff0c;业务系统要处理瞬时高并发请求&#xff0c;Redis是必需品。 秒杀可分成秒杀前、秒杀中和秒杀后三阶段&#xff0c;每个阶段的请求处理需求不同&#xff0c;Redis具体在秒杀场景的哪个环节起到作用呢&#xff1f; 1 秒杀负载特征…

Java-数据结构-二叉树<三>

承接上文&#xff1a; Java-数据结构-二叉树&#xff1c;一&#xff1e; Java-数据结构-二叉树&#xff1c;二&#xff1e; 一. 二叉树的简单介绍 见Java-数据结构-二叉树&#xff1c;一&#xff1e; 二. 二叉树的典型代码实现 见Java-数据结构-二叉树&#xff1c;一&#x…

4. RNN网络架构解读|词向量模型|模型整体框架|训练数据构建|CBOW和Skip-gram模型|负采样方案

文章目录RNN网络架构解读词向量模型模型整体框架训练数据构建CBOW和Skip-gram模型负采样方案RNN网络架构解读 递归神经网络实际上就是普通的神经网络的部分进行修改更新&#xff1a;实际上常用于时间序列的更新。或者就是自然处理中 X序列代表着时间序列&#xff0c;x0是一个时…

linux入门---云服务器购买和登陆

目录标题云服务器选择云服务器购买xshell下载如何登陆云服务器Linux的新建与删除新建删除云服务器选择 学习linux的时候云服务器是一个非常重要的工具&#xff0c;那么我们在购买云服务器的时候有很多选择比如说&#xff1a;华为云&#xff0c;腾讯云&#xff0c;阿里云等等&a…

【实操案例十二】类和对象 实例代码及运行效果图!

任务一&#xff1a;定义一个圆的类&#xff0c;计算面积和周长 # 任务一&#xff1a;定义一个圆的类&#xff0c;计算面积和周长 import math class Circle():def __init__(self,r):self.rrdef get_area(self):return math.pi*r*rdef get_perimeter(self):return 2*math.pi*r …

初识 ThreeJS (ThreeJS 相关环境搭建)

初识 ThreeJS &#xff08;初识 ThreeJS &#xff08;ThreeJS 相关环境搭建&#xff09;参考描述ThreeJS在本地搭建 NodeJS 的官方网站获取使用安装依赖项运行官方文档案例场景编辑器搭建 ThreeJS 运行环境webpack项目结构package.jsonwebpack.config.js深入获取检测参考 项目…

袋式除尘器—分类和命名

按除尘器的结构形式分类(1)按滤袋开头分类按滤袋形状分类&#xff0c;可分为圆袋式除尘器和扁袋式除尘器两类。①圆袋式除尘器。滤袋形状为圆筒形&#xff0c;直径一般为120&#xff5e;300mm&#xff0c;最大不超过600mm&#xff1b;高度为2&#xff5e;3m&#xff0c;也有10m…

redis 数据库简介

一 概述 redis是一种nosql数据库,他的数据是保存在内存中&#xff0c;同时redis可以定时把内存数据同步到磁盘&#xff0c;即可以将数据持久化&#xff0c;并且他比memcached支持更多的数据结构(string,list列表[队列和栈],set[集合],sorted set[有序集合],hash(hash表))。相关…

2023年哪款手机浏览器比较好用,最后一个吹爆它

很多人不满足于手机自带的浏览器&#xff0c;为了更好地满足看视频、浏览网页、看小说等需求&#xff0c;不少人下载第三方手机浏览器来使用。我们都知道&#xff0c;手机浏览器是手机不可缺少的APP之一。那么&#xff0c;2023年哪款手机浏览器比较好用&#xff1f;下面分享今年…

Java File类及案例

File概述和构造方法 File对象就表示一个路径&#xff0c;可以是文件路径、也可以是文件夹的路径这个路径可以是存在的&#xff0c;也允许是不存在的 方法名称说明public File (String pathname)把字符串表示的路径变成File对象public File (Srting parent, String child)把父…

【My Electronic Notes系列——三极管】

目录 序言&#xff1a; &#x1f3ee;&#x1f3ee;新年的钟声响&#xff0c;新年的脚步迈&#xff0c;祝新年的钟声&#xff0c;敲响你心中快乐的音符&#xff0c;幸运与平安&#xff0c;如春天的脚步紧紧相随&#xff0c;春节快乐&#xff01;春华秋实&#xff0c;我永远与你…

C语言入门(八)——数组

数组的基本概念 数组应用实例:统计随机数 数组应用实例:直方图 字符串 多维数组 数组的基本概念 数组(Array)也是一种复合数据类型&#xff0c;它由一系列相同类型的元素(Element)组成。例如定义一个由4个int型元素组成的数组count: int count[4]; 和结构体成员类似&…

安卓S开机动画流程

安卓S开机动画流程 开机动画是在SurfaceFlinger实例通过调用startBootAnim()启动的&#xff0c;BootAnim是如何启动和结束的&#xff0c;总体框架图如下&#xff1a; 1.SurfaceFlinger进程启动 # /frameworks/native/services/surfaceflinger/surfaceflinger.rc service surf…

linux inode详解

1.inode 和 block 概述. 操作系统的文件数据除了实际内容之外&#xff0c;通常含有非常多的属性&#xff0c;例如Linux操作系统的文件权限与文件属性。文件系统通常会将这两部分内容分别存放在inode和block中。 文件是存储在硬盘上的&#xff0c;硬盘的最小存储单位叫做扇区sec…

行为型模式

1.模版方法 超类中定义了一个算法的框架&#xff0c; 允许子类在不修改结构的情况下重写算法的特定步骤 结构 抽象类&#xff1a;负责给出一个轮廓与骨架&#xff0c;由一个模版方法和若干个基本方法构成 模版方法&#xff1a;按某种顺序调用其包含的基本方法基本方法&#xf…

计算机视觉OpenCv学习系列:第八部分、图像操作-4

第八部分、图像操作-4第一节、图像卷积操作1.图像卷积定义2.卷积函数3.代码练习与测试第二节、高斯模糊1.高斯模糊2.函数解释3.代码练习与测试第三节、像素重映射1.像素重映射定义2.重映射函数3.代码练习与测试学习参考第一节、图像卷积操作 1.图像卷积定义 卷积的基本原理&am…