我们引入一个第三方库的时候，是在
index.html出口文件中使用<script src=" "></script>的形式引入，没办法使用import的方式引入，并且引入后是全局使用，会应用到所有组件中；实际上我们有些js并不需要全局使用，只在其中某个页面用到。我们怎样修改为按需引入呢？
1. 创建script.js
// 动态创建一个 <script id="jqFn" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
export function createJqFn () {
return new Promise(function (resolve, reject) {
const tag = document.getElementsByTagName('script');
for (let i of tag) {
if (i.src === 'https://code.jquery.com/jquery-3.6.0.min.js') {
resolve(window.createJqFn);
return;
}
}
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.id = 'jqFn';
script.onerror = reject;
document.body.appendChild(script);
script.onload = () => {
resolve(window.createJqFn);
}
})
}
// 移除标签
export function removeJqFn () {
return new Promise(function (resolve, reject) {
const jqFnId = document.getElementById("jqFn");
jqId.parentNode.removeChild(jqFnId);
})
}
2. 使用方式
import { createJqFn , removeJqFn } from '@/assets/js/script.js' //引入创建的js文件
// 在页面初始化的时候调用创建函数
created(){
createJqFn().then(()=>{}).catch((err)=>{ console.log(err) });
},
// 在页面离开的时候调用移除函数
beforeDestroy(){
removeJqFn().then(()=>{}).catch((err)=>{ console.log(err) });
},
