Vue_模块化开发

文章目录

1.为什么要模块化？
2.解决方案——匿名函数
3.Vue模块化
- 3.1 commenJS🛬(了解)
- 3.2 es6

1.为什么要模块化？

在网页开发的早期，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。
- 那个时候的代码是怎么写的呢？直接将代码写在<script>标签中即可
随着ajax异步请求的出现，慢慢形成了前后端的分离
- 客户端需要完成的事情越来越多，代码量也是与日俱增。
- 为了应对代码量的剧增，我们通常会将代码组织在多个js文件中，进行维护。
- 但是这种维护方式，依然不能避免一些灾难性的问题
  
  注：主要就是重名问题！！！！

2.解决方案——匿名函数

(function(){
	var flag=  true
})()

注：但是第二个问题，就是复用性降低。所以出现了es5后面的模块雏形

var ModuleA = (function(){
	//1.定义一个对象
	var obj = {}
	//2.在对象内部添加变量和方法
	obj.flag = true
	obj.myFunc = function(info){
		console.log(info);
	}
	//3.将对象返回
	return obj
})()

我们做了什么事情呢？
- 非常简单，在匿名函数内部，定义一个对象。
- 给对象添加各种需要暴露到外面的属性和方法(不需要暴露的直接定义即可)。
- 最后将这个对象返回，并且在外面使用了一个MoudleA接受

3.Vue模块化

常见的模块化规范：CommonJS、AMD、CMD，也有ES6的Modules

3.1 commenJS🛬(了解)

应用在node环境下
导出

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

导入

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

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

3.2 es6

index.html
其中引入js，type属性表示每个js文件模块化，互不影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script src='aaa.js' type="module"></script>
<script src='bbb.js' type="module"></script>
<script  src="mmm.js" type="module"></script>
</body>
</html>

aaa.js文件
导出

let name = '小明'
let age = 18 
let flag = true
function sum(num1,num2){
    return num1 + num2;
} 
console.log("aaa.js");
if(flag){
    console.log(sum(20,30));
}
//1.导出方式一
//导出需要的变量
export{
    flag,sum
}

//2.导出方式二
export let num1 = 1000;
export let num2 = 2000;

//3.导出函数/类
export function mul(a,b){
    return a*b;
}

export class Person{
    run(){
        console.log('奔跑');
    }
}

//4.export default
//只能定义一个
const address = '北京市';
export default address

bbb.js
导入

// 导入aaa的变量
import {sum} from './aaa.js'
console.log("bbb.js");
let name = "小红"
var flag = false

console.log(sum(20,52));

mmm.js
导入

// 1.导入aaa中{}定义的变量
import {flag,sum} from './aaa.js'

console.log("mmm.js");
if(flag){
    console.log("小明是天才！！！");
    console.log(sum(20,30));
}


// 2.直接导入aaa中export定义的变量
import {num1,num2} from './aaa.js'
console.log(num1);

//3.导入export的function
import {mul,Person} from './aaa.js';
console.log(mul(30,50));
const p = new Person();
p.run();

//4.导入export default
import myOwn from './aaa.js'
console.log(myOwn);

//5.统一全部导入
import * as info from './aaa.js'
console.log(info.num1);