JavaScript模块化module的概念

Vue.js进阶文章列表

模块化module

历史进程：

1 require()统治的时代 

2 ES6的时代

JavaScript  ：导出 export、导入import

Node.js       ：导出exports、导入require

详情：

node既然可以执行js文件，肯定一个文件解决的问题有限（不方便维护）。所以，js文件可以引用其他js文件。一个js文件就是一个模块module。详细参考官方说明文档： https://nodejs.org/api/modules.html

这里列出最基础的模块化的官方的例子：每一个js文件都被看成是一个模块。例如下面的 foo.js:

const circle = require('./circle.js');
console.log(`The area of a circle of radius 4 is ${circle.area(4)}`);

第一行加载了模块 circle.js，其中circle.js的内容如下：

const { PI } = Math;

exports.area = (r) => PI * r ** 2;

exports.circumference = (r) => 2 * PI * r;

一个文件中导出的内容总是显示的或者隐式的追加到exports对象，当其他文件使用var obj = require('yourJsFileName.js');来引入文件时，导出的内容都变成了obj的成员可以直接使用。模块中的变量如果不导出就是私有的，外部无法获取。

彻底搞清楚javascript中的require、import和export

JavaScript模块的历史：

1 文件内的多个函数互相组成一个模块；

2 将文件中的多个函数放到一个类里面，同时保护自己的成员变量不外露；

3 require()统治的时代，一个文件成为一个整体的模块，被require的文件内使用exports关键字导出对象或者函数

exports.area = (r) => PI * r * r;

这种方式会导致客户端加载require模块的时候依赖网络传输，容易出现假死。所以，客户端加载require使用异步加载。

4 ES6的时代：

JavaScript  ：导出 export、导入import

Node.js       ：导出exports、导入require

Vue.js         ：Vue文件中的import

import patientTrain from "@/views/Patient/patient-train.vue";

5 export default，export default仅有一个，通过export方式导出，在导入时要加{ }，命名式导出可以导出多个值，但在在import引用时，也要使用相同的名称来引用相应的值。export default则不需要。从而应该使用export default，将所有需要导出的都放到export default中。 详细参考：https://www.cnblogs.com/xiaotanke/p/7448383.html

默认导出：

使用默认导出一个模块时：

1 2 3 4

// "my-module.js"模块 export default function (x) { return x * x * x; }

在另一个模块（脚本文件）中，我们可以像下面这样引用，相对名称导出来说使用更为简单：

1 2 3

// 引用 "my-module.js"模块 import cube from 'my-module'; console.log(cube(3)); // 27

而如果是命名导出就要（放到大括号{a, b, c}）逐个导出，逐个导入