正常情況下，項(xiàng)目里不會(huì)用eval函數(shù)，但是萬(wàn)一要調(diào)用一個(gè)全局的js庫(kù)，就需要用eval做些騷操作，這個(gè)時(shí)候編譯會(huì)提示：is strongly discouraged as it poses security risks and may cause issues with minification.

警告是可以忽略，剛開(kāi)始我也沒(méi)當(dāng)回事，有風(fēng)險(xiǎn)就有風(fēng)險(xiǎn)，可控，我知道自己寫(xiě)的是啥。但是，今天我改代碼的時(shí)候出了問(wèn)題。就是dev時(shí)候正常，但是打包以后，不按照預(yù)期執(zhí)行，編譯出來(lái)的代碼就不是我要的邏輯。

問(wèn)題的關(guān)鍵是：使用eval的函數(shù)不能是全局函數(shù)（需要包裝在一個(gè)對(duì)象里），然后這個(gè)函數(shù)內(nèi)容要簡(jiǎn)單，不要里面定義各種變量，然后被eval調(diào)用，免得被編譯時(shí)候優(yōu)化掉

簡(jiǎn)單的代碼實(shí)例問(wèn)題

上一段簡(jiǎn)單的代碼：

<template>
  <div>
    <button @click="btn">測(cè)試</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運(yùn)行在瀏覽器點(diǎn)擊按鈕，輸出2，沒(méi)毛病

然后打包以后，運(yùn)行就會(huì)是這樣，輸出為NaN

縮成一坨的這個(gè)代碼里面，把我的myfun函數(shù)編譯成了這樣，也沒(méi)毛病：

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

但是，調(diào)用時(shí)候變成了這樣！?。。?/p>

myfun調(diào)用的時(shí)候，傳入的參數(shù)哪里去了？？？

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

因?yàn)闆](méi)有參數(shù)進(jìn)入，eval里的param+1結(jié)果就變成了NaN

解決方法

把代碼改成這樣，函數(shù)包裝到一個(gè)對(duì)象里面：

<template>
  <div>
    <button @click="btn">測(cè)試</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>

然后打包運(yùn)行，輸出為2正常：

這個(gè)時(shí)候調(diào)用變成這樣，myfun的時(shí)候傳的參數(shù)正常

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

問(wèn)題的原理

感覺(jué)上，對(duì)于調(diào)用一個(gè)不在對(duì)象里的函數(shù)，typescript編譯時(shí)候進(jìn)行了更多優(yōu)化，對(duì)于myfun函數(shù)，里面eval函數(shù)那一行沒(méi)有類型系統(tǒng)，等于沒(méi)有，所以編譯時(shí)候理解成下面這樣，等于沒(méi)有eval那一行。等于param沒(méi)有被使用，所以調(diào)用函數(shù)時(shí)候，覺(jué)得這個(gè)參數(shù)沒(méi)有用，就給吃了。。。

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

同理，如果myfun里面定義了別的變量，用來(lái)給eval使用，但是別的地方?jīng)]有使用，編譯時(shí)候，這個(gè)變量就會(huì)被編譯器認(rèn)為無(wú)效，然后被吃掉，比如myfun定義成這樣，打包運(yùn)行就會(huì)報(bào)錯(cuò)dat is not defined

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

一勞永逸的方法

雖然通過(guò)把函數(shù)封裝到對(duì)象，可以解決問(wèn)題，但是，也說(shuō)不好ts編譯器后續(xù)會(huì)不會(huì)關(guān)于對(duì)象的方法調(diào)用也進(jìn)行這種優(yōu)化。

所以還有一個(gè)解決方法，就是在函數(shù)里把param用一下，讓編譯器覺(jué)得它被使用了，別吃掉。

比如改成這樣，把param輸出一下。。。

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

到此這篇關(guān)于Vue TypeScript使用eval函數(shù)遇到的問(wèn)題的文章就介紹到這了,更多相關(guān)Vue TypeScript使用eval函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論