浅谈前端模块化

为什么要模块化：

在计算机程序的开发过程中，随着程序代码越写越多，在一个文件里代码就会越来越长，越来越不容易维护。
为了编写可维护的代码，我们把很多函数分组，分别放到不同的文件里，这样，每个文件包含的代码就相对较少，很多编程语言都采用这种组织代码的方式。(一个js文件就是一个模块)

使用模块有什么好处：

最大的好处是大大提高了代码的可维护性。其次，编写代码不必从零开始。当一个模块编写完毕，就可以被其他地方引用。我们在编写程序的时候，也经常引用其他模块，包括 Node.js 内置的模块和来自第三方的模块。

使用模块还可以避免函数名和变量名冲突。相同名字的函数和变量完全可以分别存在不同的模块中，因此，我们自己在编写模块时，不必考虑名字会与其他模块冲突。

重点：主要的原因是方便项目的开发和维护

模块定义规范

对书写格式和交互规则的详细描述，就是模块定义规范。模块化规范：

AMD 规范： Require.js
CMD 规范： Sea.js
CommonJS 的 Modules 规范： NodeJs
ES6 模块化规范 import ... from

下面介绍CommonJS 的 Modules 规范和ES6 模块化规范：

CommonJS 的 Modules 规范：

导出数据方式一：

exports.num = num;
exports.sum = sum;
exports.Animal = Animal;

导出数据方式二:

// 通过module.exports 等于一个对象，来导出数据
// 对象可采用es6简化对象的写法
module.exports = {
    num,
    sum,
    Animal
};

导入数据：

// 注意1： 如果要使用某个模块里面的数据，则需要使用 require 关键字进行导入。
// 注意2：在导入用户自己开发的模块的时候，需要加上路径（1. 相对路径（多） 2. 绝对路径） 注意: ./ 必须写上
// 注意3：模块文件的扩展名(后缀名)可以写，也可以不写
// 注意4：导出的模块一般需要使用一个变量来接收，一般把接收的量定义为常量
// 注意5: 定义常量的名称和文件的名称保持一致（这个不是必须，大家都这么做）
const m1 = require("./modules/m1.js");

ES6 模块化规范:

导出数据方式一：

export let name = "nodejs";
export let age = 11;

导出数据方式二：

let name = "nodejs";
let age = 11;

export {name, age}

针对导出数据的前两种方式的导入数据：

import {name,age} from "./m1.js"

导出数据方式三：

// 默认导出只能写一次
export default {name, age}

导入并使用数据：

import m3 from "./m3"
console.log(m3.name);
console.log(m3.age);

在es6中的默认导出的写法，允许和前面的导出方式一起写：
导出数据：

let name = "nodejs";
let age = 11;

export let email = "nodejs@163.com";

// 默认导出只能写一次
export default {name, age}

导入并使用数据：

import m3, {email} from "./m3"

console.log(m3.name);
console.log(m3.age);
console.log(email);

最后编辑于：2020.09.05 16:48:19