js：动态import导入script脚本文件

实现原理

模仿百度统计的代码，将其封装成一个可重用的函数

<script>
   var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?64ecd82404c51e03dc91cb9e8c025574";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>

// 动态导入script
function importScript(src) {
  var hm = document.createElement("script");
  hm.src = src;
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
}

实现示例

静态服务器

$ pnpm i http-server

# 开启静态服务器
$ npx http-server -p 5500 -c-1

文件目录

$ tree 
.
├── index.html
├── js
│   └── hello.js
└── script.js

index.html

<!-- 引入js -->
<script src="./script.js"></script>

script.js

// 动态导入script
function importScript(src) {
  var hm = document.createElement("script");
  hm.src = src;
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
}


(function () {
  importScript("/js/hello.js");
})();

js/hello.js

console.log('Hello');
// 导入成功后控制台输出：Hello

访问：http://127.0.0.1:5500/index.html

即可看到控制台输出的内容