前端模块化开发

前端模块化

一、使用模块作为出口
1.步骤：

在匿名函数内部，定义一个对象，给对象添加各种需要暴露到外面的属性的方法（不需要暴露的直接定义即可），最后将这个对象返回，并且在外面使用一个ModuleA接收。

2.在main.js中如何使用？

只需要使用属于自己模块的属性和方法。

3.常见的模块化规范

CommonJS、AMD、CMD、ES6的Modules

二、CommonJS

模块化的两个核心：导出和导入

CommonJS的导出：

module.exports = {
	flag: true,
	test(a,b){
		return a+b
	},
	demo(a,b){
		return a*b
	}
}

CommonJS的导入：

//CommonJS模块
let {test,demo,flag} = require('moduleA');

//等同于
let _mA = require('moduleA');
let test = _mA.tset;
let demo = _mA.demo;
let flag = _mA.flag;

三、ES6的模块化
1.export的使用

<script type="module">
//方式一——写法一
export var num1 = 100;
export var height = 1.88;
//写法二
var name = 'huang';
var age = 19;
export {name,age}
//方式二
export {flag,sum}
//导出函数/类
export function mul(num1,num2) {
    return num1 * num2;
}
 export class Person {
     run(){
         console.log('running');
     }
 }
</script>

2.export default（只有一个default）

<script type="module">
 const address = '北京市';
 export default address;
</script>

3.import的使用（导入）
首先需要在HTML代码中引入两个js文件，并且类型需要设置为module。

import {name,age} from "./aaa.js"
console.log(name,age);

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：

通过*可以导入模块中所有的export变量
但是通常情况下我们需要给*起一个别名，方便后续的使用

import * as info from './aaa.js'
console.log(info.name,info.age);

此文章为作者的学习笔记