模块化js的导出和导入

最新推荐文章于 2025-05-31 22:32:21 发布

几蓝色

最新推荐文章于 2025-05-31 22:32:21 发布

阅读量1.2k

点赞数 1

分类专栏：前端学习文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_16189233/article/details/131326097

版权

前端学习专栏收录该内容

1 篇文章

订阅专栏

模块化是将JavaScript拆分为可按需导入的单独模块。目前有4种模块化的暴露和饮用方式，下面分别进行介绍：

CommonJs

nodejs，Browserify（js打包工具）均支持CommonJs规范。
使用module.exports或者exports暴露，使用require引入。
在nodejs里，module作为全局变量，module是一个对象，结构类似于{id:'',exports:{}}，exports就是module.exports。

// module导出
module.exports = {
  func: () => {
    console.log('func');
  },
};
// exports导出
exports.func= () => {
  console.log('func');
}

引入如下，可以通过模块或者结构引入

// 模块引入
const b = require('./b');
b.func();

// 解构赋值引入
const { func } = require('./b');
func();

输出
在这里插入图片描述

AMD

AMD是同步的加载模块，等所需模块都加载完才进行下一步。
导出用define，导入用require，并且需要加载require.js（不超过20k）

// 导出func
define(['module'], function (module) {
  module.func = () => {
    console.log('AMD func');
  };
  return module;
});

在mian.js里引用func，在加载完a模块再去执行按钮的点击事件

require(['a'], function (a) {
  document.getElementById('btn').addEventListener('click', () => {
    a.func();
  });
});

html如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AMD引入方式</title>
  <script src="./require.js" data-main="./main.js"></script>
</head>
<body>
  <button id="btn">按钮</button>
</body>
</html>

输出：
在这里插入图片描述

此方式写法不是很方便，但是在刚开始模块化js时发挥出了明显的模块化优势。

CMD

CMD和AMD类似，和AMD不同的是，AMD主张所需模块一次性加载完，CMD主张按需加载，sea.js就是以CMD为规范的js模块化框架

// 导出func
define(['module'], function (module) {
  module.func = () => {
    console.log('CMD func');
  };
  return module;
});

在main.js引用

define(function (require, exports, module) {
  document.getElementById('btn').addEventListener('click', () => {
    // 使用a模块时再加载（和AMD不同）
    var a = require('a');
    a.func();
  });
});

html，和AMD不同的时，需要使用seajs.use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CMD引入方式</title>
  <script src="./sea.js"></script>
  <script>
    seajs.use('./main.js');
</script>
</head>
<body>
  <button id="btn">按钮</button>
</body>
</html>

输出：
在这里插入图片描述

通过seajs的git更新时间
在这里插入图片描述

可以看到5年没有维护了，时代的见证者。

ES6 Module

es6 module是我们开发过程中最常用的导出导入方式了，目前浏览器端并不支持此方式，需要借助babel插件将es6转换成es5的CommonJs方式，Browserify再将CommonJs编译成浏览器能识别的语言。
开发时常用到3种导入导出：单个，整体和默认

单个导出导入：

// 单个导出
export function func() {
  console.log('es6 func');
}
// 单个引入(解构赋值导入)
import { func } from './a.js';
func();

输出：
在这里插入图片描述

整体导出导入：

function func() {
  console.log('es6 func');
}
// 批量导出
export { func };

// 批量导入(解构赋值导入)
import { func } from './a.js';
func();

输出：
在这里插入图片描述

默认导出导入

function func() {
  console.log('es6 func');
}

// 默认导出
export default {
  func,
};

// 默认导入(变量导入)
import a from './a.js';
a.func();

输出：
在这里插入图片描述

注意： 单个和整体的导入，只能通过解构赋值导入，无法通过变量导入，默认导入，只能通过变量导入，无法通过解构赋值导入！