网站建设方案概述,浙江大洋建设集团有限公司网站,华为网络工程师认证培训,百度指数关键词搜索趋势JavaScript的引入并执行-包含动态引入与静态引入
JavaScript引入方式
html文件需要引入JavaScript代码#xff0c;才能在页面里使用JavaScript代码。
静态引入 行内式 直接在DOM标签上使用 !DOCTYPE html
html langen
headmeta ch…JavaScript的引入并执行-包含动态引入与静态引入
JavaScript引入方式
html文件需要引入JavaScript代码才能在页面里使用JavaScript代码。
静态引入 行内式 直接在DOM标签上使用 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript引入方式/title
/head
bodydiv onclickalert(1111)行内式/div
/body
/html内嵌式 写在script标签内 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript引入方式/title
/head
body
/bodyscriptalert(内嵌式)/script
/html外链式 通过script标签引入js文件 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript引入方式/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 srchttps://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文件.js console.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模块.js console.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文件.js console.log(这个就是动态js文件);
var fang { fang: 方一 };//{fang: 方一};
