html 引入 js 代码的几种方式

目录

• 一、普通加载
• 二、内嵌
• 三、预加载 （用了es6模块就不需要预加载了，es6模块是异步加载的）
• 模块引入
  • parcel对module的支持不完善
• 参考链接

 

---

回到顶部

一、普通加载

<script src="./abc.js"></script>

回到顶部

二、内嵌

<script> JavaScript 代码 </script>

回到顶部

三、预加载 （用了es6模块就不需要预加载了，es6模块是异步加载的）

<!--head标签中-->
<link rel="preload" href="main.js" as="script" />
<!--body标签中-->
<script src="main.js" defer></script>

回到顶部

模块引入

1. es6模块

  模块的思想可以概括为：把代码拆开，再把他们连接起来，如何处理模块之间的依赖是模块系统的核心，依赖模块的必须是模块，也就是不能在普通script标签中引入模块：
  <script type="module" src="main.js"></script>
  嵌入的模块定义代码不能使用 import 加载到其他模块。只有通过外部文件加载的模块才可以使用 import 加载。因此，嵌入模块只适合作为入口模块。
  最基础的 import 和 export 基本所有环境都已经支持了（包括nodejs）
   import 引入的文件只会执行一次，可能会产生副作用请注意

2. AMD 模块：就是 layui 用的那个，require 之后要回调
3. CommonJS：模块 node 用的那个，直接 const xx = require('')
4. CMD 模块：用 define 没见有人用过

parcel对module的支持不完善

首先不支持嵌入代码，必须用 src 属性引入

另外，会报错，因为module会默认static模式，不能隐式声明，而parcel的代码依赖这一点，所以需要在模块引入之前先声明：

var parcelRequire;

参见：https://www.cnblogs.com/dou-fu-gan/p/17077594.html
parcel官方github也有issue，原谅博主太懒（截至2023/2/2仍不支持）

回到顶部

参考链接

JavaScript 高级程序设计第四版（不能点，别点了）
一文彻底搞懂JS前端5大模块化规范及其区别 cnblog
JavaScript 模块