vue脚手架前奏：前端模块化的实现，模块化的两种常用操作（CommonJs Modules）

首先在每一个学习中，都需要知道为什么要学习这个东西

1、首先就是人人都会说的：随着发展，前端逐渐脱离出来成了一个独立的模块，而一个独立的部分就需要进行模块化的操作
2、其次，实际的意义就是：后面使用好多管理工具“CLI”“vite”都会牵扯到模块化的内容，要是不懂模块化的内容的话是很难一下子理解的

常用的模块化规范

CommonJs、AMD、CMD、Modules(ES6之后)

1.使用模块化作为出口（前端模块化雏形）

将模块化进行封装，来实现属性的复用

在a.js里面通过对象，将整个js都作为对象，来使外部进行使用

a.js内部

var moduleA = (function(){
    var obj = {}
    
    var flag = true;
    var numb = 10;
    function sum(a,b){
        return a + b;
    }
    return obj;
})()

b.js内部引用a.js内部属性时：

if(moduleA.flag){
    console.log("flag为TRUE")
}

2.通过ES6实现模块化（常用）

在主文件导入时设置type=“module”，即设置js文件进行模块化管理。

对于每一个定义成模块化时，单独成为一个模块空间，互相不影响

main.html

<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>
<script src="c.js" type="module"></script>

a.js

let name = "我是小A";
let age = 11;
let sex = 1;

b.js

let name = "我是小B";
let age = 12;
let sex = 2;

c.js

console.log("我来进行验证")
console.log(name);
console.log(age);

通过export（导出）/import（导入）进行导入导出操作

并且导入导出可以对函数、类进行操作！！！

1.export

a.js

let name = "我是小A";
let age = 11;
let address ="我家在南江大学";
//导出操作
export {
	name,age
}
/*或者在命名时通过在前面添加export实现导出
例如：export var name = "我是小A";
*/

b.js

let name = "我是小B";
let age = 12;
let address ="我家在江南大学";
export {
	address
}

default.js（通过default导出匿名的，对该js文件进行引入可以人为修改该导出的方法、属性的名）

一个模块中只能进行一个default的导出

function a(){
    console.log("调取default.js中的a")
}
export default a

2.import

c.js

import{
    name,
    age
}from "a.js"	//js文件相对地址+名称
/*
通过：
import * as allina from "a.js"
可以进行a.js中统一全部导入

并通过对象的形式进行使用：
console.log(allina.name)
输出：我是小A
*/
import{
    address
}from "b.js"	//js文件相对地址+名称

console.log("我来进行验证")
console.log(name);
//输出：我是小B
console.log(age);
//输出：11
console.log(address);
//输出：我家在江南大学

import defaultfunction/*default命名可以随意改变*/ from "default.js"
defaultfunction();

3.通过Common.JS(基于Node.js)

1.导出：

var flag = true;
var sum = function(a,b){
    return a+b;
}
module.export={
    flag:flag;
    sum:sum
}

2.导入：

let{flag,sum} = require('moduleA');
/*或者*/
var{flag,sum} = require('moduleA');
/*就等同于*/
var a = require('JS地址');
var flag = a.flag;
var sum = a.sum;