js模块化

传统方式

cdn导入

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

下载后导入

<script src="./jquery.js"></script>
<script src="./test1.js"></script>
<script src="./main.js"></script>

这样的方式有两个弊端:

• 一个是容易污染全局作用域
• 一个是需要注意引入的顺序

传统的库用立即执行函数产生闭包的方式解决这个问题，如jQuery。

javascript中的几种模块化

CommonJS模块化

例子

add.js

function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

// 导出如下
module.exports = {
  add: add,
  multiply: multiply,
};

subtract.js

function subtract(a, b) {
  return a - b;
}

// 导出如下
module.exports = subtract;

 index.js

// 导入如下
const { add } = require("./add");
const subtract = require("./subtract");

module.exports = { add, subtract };

 main.js

// 只写文件夹名，默认导入的就是文件夹下的index.js文件
const { add, subtract } = require("./functions");
console.log(add(1, 2));
console.log(subtract(1, 2));

文件目录如下 

 

ESM模块化

ECMAScript 2015 开始支持 JavaScript module，ESM 就是 ES Module的简称 就是ES标准的模块化方式。

注意：主代码文件导入时 script标签要添加 type module的属性和值。

<script type="module" src="xxxxxx.js"></script>

导出 

分为 默认导出 和命名导出（一般导出）。

默认导出

默认导出 export 后要加 default，每个文件只能默认导出一次。

默认导出不需要命名，可以在导入时指定任意名称。

常见的导出：函数 class 对象 数组等。

export default function abc(){}
export default function (){} // 可以导出匿名函数

 命名导出

命名导出，导出的一定要有名称 name属性。

export function abc(){}

export class Test{}

export const a = 1 // 注意 导出变量时要直接带上变量声明关键字

解构后直接导出

export const { deposit, withdraw, requestLoan, payLoan } = accountSlice.actions;

可以通过花括号的形式一起导出。

function abc(){}

class Test{}

const a = 1

export {a,abc,T}

 导入

也分为默认导入和命名导入（一般导入）。

注意导入时文件地址的写法：

• 要加后缀名
• 要加前面的./路径符号

如果使用构建工具的话就不需要了

默认导入

默认导入只会导入默认导出的，可以随意定义标识符

import my from './xxxx.js'

 命名导入

命名导出要跟命名导出时一样的名字，花括号的形式去取，前后顺序没关系。

import {abc,Test} from './xxxx.js'

注意：这里的./不能省略！不能省略 "./" 的原因是为了区分相对路径导入和裸导入(bare imports)，裸导入只能用于导入已安装的 npm 包或 Node.js 内置模块 ，比如

`import {Application, Spritem, Assets} from "pixi.js"`。

 一起导入

将模块 ‘./xxxxx.js’ 的 所有命名导出（named exports） 绑定到一个名为 all的命名空间对象上

import * as all from './xxxx.js'

导入导出重命名 

// 导出时重命名
export {
function1 as newFunctionName,
function2 as anotherNewFunctionName
};


import { newFunctionName, anotherNewFunctionName } from '/modules/module.js';

注意：这样也相当于默认导出 。

export {Pixiplugin as default}

// 导入时重命名

import { function1 as newFunctionName,
         function2 as anotherNewFunctionName } from '/modules/module.js';

 动态加载

import('/modules/myModule.mjs')
  .then((module) => {
    // 代码逻辑
  });