前端模块化导入与导出方法总结

最近在学习 node.js 的时候又使用到了模块的导入与导出，之前这方面一直没有做详细的笔记，所以这次记录一下，方便以后查阅。

一、了解什么是模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

举个简单的例子,我们要写一个实现 A 功能的 JS 代码，这个功能在项目其他位置也需要用到，那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写，既能实现复用还可以分而治之。具体说来，JS 模块化方案很多，有 AMD/CommonJS/UMD/ES6 Module 等，本文主要介绍 CommonJS 和 ES6 Module 的用法。

二、模块化的好处

1、防止命名冲突

2、代码复用

3、高维护性

三、具体的用法（CommonJS 和 ES Module 的使用方式）

（一）CommonJS 用法 

1、导出

// module.js 

let name = '刘德华'

function sing(){
    console.log("忘情水")
}

function eat(){
    console.log("鸡蛋")
}

// 导出：两种导出方式，根据情况选择一种就可以了

module.exports = {
    name,
    sing
}

module.exports.food = eat

2、导入

// index.js
// 导入：直接使用 require 进行导入

const obj = require('./module.js')

（二）ES Module 用法

1、导出

• 分别暴露

// index1.js
// 分别暴露
export let name = '张三'

export function eat() {
    console.log("今天晚上想吃火锅")
}

• 统一暴露

// index2.js
// 统一暴露
let name = '张三'

function eat() {
    console.log("今天晚上想吃火锅")
}

export {name, eat}

• 默认暴露

// index3.js
// 默认暴露
export default {
    change: function(){
        console.log("想要减肥就做出改变，晚上不许吃火锅了")
    }
}

2、导入

// 1、通用的导入方式
import * as obj1 from "./js/index1.js"

import * as obj2 from "./js/index2.js"

import * as obj3 from "./js/index3.js"

// 2、解构赋值的形式
import {name,eat} from "./js/index1.js"

以上就是前端模块化导入与导出方法总结，部分内容来自网上一些优秀视频和文章的讲解，再加上自己的总结和理解。如果有不正确的地方希望大家可以帮忙指正，如果这篇文章对你有用，请留下你们一个免费的赞。