静态引入
行内式 直接在DOM标签上使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
</head>
<body>
<div>var code = "970bb8cf-8823-46c1-8b9f-797d6c0b14a7"</div>
<div onclick="alert(1111)">行内式</div>
</body>
</html>
内嵌式 写在script标签内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
</head>
<body>
</body>
<script>
alert('内嵌式')
</script>
</html>
外链式 通过script标签引入js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript引入方式</title>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>
动态引入
1、在js运行过程中，构建script标签并插入到DOM文档中，或者通过引用链接，把已经写好的js文件通过script标签并插入到DOM文档。
使用原生JavaScript中提供的动态加载
添加方法可以使用
document.body.appendChild(script标签元素);
document.write() 如document.write('<script src="https://example.com/example.js"></script>');
手写的js代码
const script = document.createElement("script");
script.innerHTML = 'console.log("DOM动态创建并运行脚本+预加载优化");';//这些代码可以手动写，也可以用ajax请求并使用。
document.body.appendChild(script);
引入外链js代码
setTimeout(() => {
console.log(1, window.fang);//1 undefined;
const script = document.createElement("script");
script.src = "./动态js文件.js";
document.body.appendChild(script);
console.log(2, window.fang);//2 undefined;
}, 0);
setTimeout(() => {
console.log(3, fang);//{fang: '方一'};
}, 3000);
2、通过import()动态模块。
使用ES6中引入的import()方法动态加载JS模块，该方法可以在运行时动态地加载JS模块。
引入外链js代码
async function loadJSModule() {
const module = await import("./动态js模块.js");
//console.log("module--->", module);
// 加载成功后可以使用该模块
module.fang.theFunction();//Symbol(动态js模块里的东西);
}
loadJSModule();
同一目录下动态js模块.js
console.log("这个就是动态js模块");//这个就是动态js模块
const theSymbol = Symbol("动态js模块里的东西");
let fang = {
fang1: "方一",
theFunction: () => {
console.log(theSymbol);
},
};
export { fang };
3、使用AJAX技术加载JS代码，可以通过XMLHttpRequest或fetch方法动态加载JS代码，并使用eval()或Function()方法执行代码。
引入外链js代码
const xhr = new XMLHttpRequest();
xhr.open("GET", "./动态js文件.js");
xhr.onload = function () {
if (xhr.status !== 200) {
return;
}
eval(xhr.responseText);
//(new Function(xhr.responseText))()
console.log(3, fang); //{fang: '方一'};
};
xhr.send();
同一目录下动态js文件.js
console.log("这个就是动态js文件");
var fang = { fang: "方一" };//{fang: '方一'};
