45.vue模块化

目录

一、为什么需要模块化

二、常见的模块化规范

三、ES的导入导出

---

一、为什么需要模块化

以前的前端代码有两个问题：

（1）.全局变量会被不同的地方赋值。比如我创建一个全局flag，值为true，我要用的时候发现为false，原来公司同事把我这个在他那边变了false，就很困扰。针对全局变量被不同赋值，我们通过匿名内部类

（2）虽然上面问题解决了，又有新问题：我匿名内部类的代码我想复用又不行了。解决方案：运用面向对象思想进行模块化开发

二、常见的模块化规范

既然要用模块化了，肯定要遵循规范，常见规范：

• CommonJS
• AMD
• CMD
• ES6的Modules

三、ES的导入导出

1.type="module"

2.export：导出

var name = '徐鹏'
var age = 18
var flag = true

function sum(a,b){
	return a+b;
}

if(flag){
	console.log(sum(100,200))
}

/* 1.导出方式一 */
export {
	flag,sum
}

/* 2.导出方式二 */
export var num1 = 1000
export var num2 = 1.88

/* 3.导出函数/类 */
export function mul(num1,num2){
	return num1 * num2
}
export class Person{
	run(){
		console.log('跑路')
	}
}

/* 4.导出default，每个js只能有一个default，引用的时候，可以随便命名 */
const address = '上海'
export default address

/* 5.统一全部导出 */

3.import：导入

import {flag,sum} from './aa.js'
import {num1,num2} from './aa.js'
import {mul,Person} from './aa.js'
import xupeng from './aa.js'
import * as aa from './aa.js'


if(flag){
	console.log('徐鹏哈哈')
	console.log(sum(20,20))
}

console.log(num1,num2)

console.log(mul(20,30))

const p = new Person()
p.run()

console.log(xupeng)

console.log(aa.flag)