前端开发中仅在需要时的时候加载 JavaScript 模块。这样可以提供很大的性能,比如:您有一个组件,例如复杂的视频播放器,它可以使用大量 js,并且该视频仅在用户单击它时才会启动。那么在这种情况下,用户甚至可能永远不会单击播放按钮,因此仅在需要时才加载该js模块。
7 C2 `7 C( G' `0 N
0 n' V9 Z4 R: Z) N, b7 t$ H$ L5 C8 w
因此,不要像这样使用顶级默认声明:. D: X* T' p& e
- import * from "https://cdn.skypack.dev/jquery";
只是在需要的时候加载,代码如下:
6 ?$ u. m! Y/ l. i8 ?: h5 i3 u, ?4 E- const button = document.getElementById("btn");
- button.addEventListener("click", e => {
- import('https://cdn.skypack.dev/jquery')
- .then(module => window.$ = module.default)
- .then(makeBgOrangeWithJquery)
- .catch(err => { alert(err) });
- });
-
- const makeBgOrangeWithJquery = ()=> {
- $("body").css("background-color", "orangered");
- }
您甚至可以将它与加载指示器之类的东西一起使用:
# p+ _' a4 K+ R+ L- button.addEventListener("click", e => {
- import('https://cdn.skypack.dev/jquery')
- .then(module => {
- window.$ = module.default;
- })
- .then(makeBgOrangeWithJquery)
- .catch(err => { alert(err) });
- });
当然,如果您的所有页面都依赖于像 jQuery 或 react 这样的库,那么动态导入该库就没有太大意义。目前es6中的import,export浏览器已经支持。在老版本浏览器中是不支持import的,但是我们可以自己来实现import方法: * {7 [9 O H& z0 B
-
- function loadJS(url, success) {
- var domScript = document.createElement('script');
- domScript.src = url;
- success = success || function () {};
- domScript.onload = domScript.onreadystatechange = function () {
- if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
- success();
- this.onload = this.onreadystatechange = null;
- this.parentNode.removeChild(this);
- }
- }
- document.getElementsByTagName('head')[0].appendChild(domScript);
- }
- loadJS('https://cdn.skypack.dev/jquery',function(){
- //加载成功执行
- });
|