JavaScript的引入并执行-包含动态引入与静态引入
JavaScript的引入并执行-包含动态引入与静态引入
JavaScript引入方式
html文件需要引入JavaScript代码，才能在页面里使用JavaScript代码。
静态引入
-
行内式直接在DOM标签上使用<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>JavaScript引入方式</title> </head> <body><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>与
html文件同一目录下的./index.js:alert('外链式')
动态引入
-
在js运行过程中，构建script标签并插入到DOM文档中，或者通过引用链接，把已经写好的js文件通过script标签并插入到DOM文档。
- 使用
原生JavaScript中提供的动态加载<script>元素的方法，可以创建<script>元素，并将其添加到HTML文档中，以动态加载JS文件或代码。-
添加方法可以使用
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);同一目录下
动态js文件.jsconsole.log("这个就是动态js文件"); var fang = { fang: "方一" };//{fang: '方一'};
-
- 使用
-
通过
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模块.jsconsole.log("这个就是动态js模块");//这个就是动态js模块 const theSymbol = Symbol("动态js模块里的东西"); let fang = {fang1: "方一",theFunction: () => {console.log(theSymbol);}, }; export { fang };
-
- 使用
-
使用
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文件.jsconsole.log("这个就是动态js文件"); var fang = { fang: "方一" };//{fang: '方一'};
-