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);
