3、模块化

什么是模块

• 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
• 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
• 在node中，一个js文件就是一个模块，每个模块单独运行在一个函数中，所以一个js文件中的变量和函数的作用域不是全局的，如果需要在其他js中使用，那么需要使用引入
• node中模块分为两大类：核心模块（node提供或npm下载的，例如fs）；文件模块（自己写的模块）

解决的问题

• 请求过多
  • 首先我们要依赖多个模块，那样就会发送多个请求，导致请求过多
• 依赖模糊
  • 我们不知道他们的具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。
• 难以维护
  • 以上两种原因就导致了很难维护，很可能出现牵一发而动全身的情况导致项目出现严重的问题。模块化固然有多个好处，然而一个页面需要引入多个js文件，就会出现以上这些问题。

模块化编程

CommonJS和 ES6 模块系统是 JavaScript 中两种主要的模块处理方式。它们在语法、加载方式和使用场景上都有显著的区别。

package.json中type属性

1. type字段的产生用于定义package.json文件和该文件所在目录根目录中.js文件和无拓展名文件的处理方式。值为'moduel'则当作es模块处理；值为commonjs则被当作CommonJs模块处理
2. 目前Node默认的是如果pacakage.json没有定义type字段，则按照CommonJs规范处理
3. Node官方建议包的开发者明确指定package.json中type字段的值
4. 无论package.json中的type字段为何值，.mjs的文件都按照es模块来处理，.cjs的文件都按照CommonJs模块来处理

CommonJS和ES6的区别

• 语法
  • CommonJS 使用 module.exports 和 require。
  • ES6 模块使用 export 和 import。
• 加载方式
  • CommonJS 是同步加载，适用于服务器端。
  • ES6 模块是静态加载，适用于浏览器和服务器端。
• 动态 vs 静态
  • CommonJS 支持动态加载，可以在代码运行时决定加载哪些模块。
  • ES6 模块是静态的，编译时就确定了模块依赖关系。
• 优化
  • ES6 模块支持树摇优化，可以在打包时移除未使用的代码。
  • CommonJS 不支持树摇优化。
• 作用域
  • CommonJS 模块在加载时执行，模块的顶层作用域是模块自身。
  • ES6 模块在导入时不会执行，模块的顶层作用域是模块自身。
• 兼容性
  • CommonJS：主要用于 Node.js 环境，广泛支持现有的 Node.js 生态系统。
  • ES6 模块：现代浏览器和 Node.js（v12+）都支持 ES6 模块，但在某些旧环境中可能需要使用 Babel 等工具进行转译。

CommonJS 和 ES6 模块系统各有优缺点，选择哪种模块系统取决于你的项目需求和运行环境。对于新的前端项目，推荐使用 ES6 模块，因为它是 JavaScript 的官方标准，并且支持更好的优化。对于现有的 Node.js 项目，CommonJS 仍然是一个可靠的选择。

CommonJS

CommonJs主要为了解决ES6之前无模块概念的问题

引入核心模块不需要写路径，引入文件模块需要写路径（一般是相对路径./或../开头）

批量导出与导入

other.js

var msg = 'this is a model';
function myFunc(){
    console.log('this is a function by model');
}

// 批量导出
module.exports = {
    msg,
    myFunc,
    name: 'my name'
}

index.js

// 变量名字可以随便起，一般为文件名
// 引入同目录下的model.js，如果是相对路径，必须以./开头
// 此处的model.js的.js可以省略
var other = require('./other')

other.myFunc();
console.log(other.name);
console.log(other.msg);

逐一导出与选择性导入

other.js

var msg = 'this is a model';
function myFunc(){
    console.log('this is a function by model');
}

// 逐一导出
exports.msg = msg;
exports.myFunc = myFunc;
exports.name = 'my name'

index.js

// 无论是批量导出还是逐一导出都可以如下选择性导入
var {myFunc,msg,name} = require('./other')

myFunc();
console.log(name);
console.log(msg);

区别

• 二者的作用是一样的
• 二者不可以同时存在，如果同时存在，只有module.exports生效

ES6Modules

export

other.js

export var  msg = 'this is a model';

export function myFunc(){
    console.log('this is a function by model');
}

index.js

// 导入方式一：导入的多项组成一个对象
import * as other from './other.js'

other.myFunc();
console.log(other.msg);

// 导入方式二：选择性导入
import {myFunc,msg} from './other.js'

myFunc();
console.log(msg);

export default

other.js

var msg = 'this is a model';
function myFunc(){
    console.log('this is a function by model');
}

// 批量导出，一个模块中只能声明一个 export default
export default {
    msg,
    myFunc,
    name: 'my name'
}

index.js

import other from './other.js'

other.myFunc();
console.log(other.msg);
console.log(other.name);

注意：export default导出的不可以使用import {}解构导入！

全局变量

nodel中没有web中的全局变量window，node中的全局变量是global

console.log(global);

输出，看到封装了一些函数可以使用

<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  },
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Getter]
  }
}

• 在全局中声明的变量，会作为global的属性保存
• 在全局中声明的函数，会作为global的函数保存

//声明一个全局变量a，因为每个模块单独运行在一个函数里面
a = 10;
console.log(global.a);