vue之模块化开发

模块化开发一之ES6的模块化

javascript 原始功能

在网页开发早起，js制作作为一种脚本语言，做一些简单的表单验证或动画实现等。那个时候代码还很少的。
那个时候的代码是怎么写的呢？直接将代码写在script标签中
随着ajax 异步请求额出现，慢慢形成了前后端分离：
客户端需要完成的事情越来越多，代码量也与日俱增
为了应对代码量的剧增，我们通常会见代码组织在多个js文件中，进行维护
但是这种维护方式，依然不能避免一些灾难性问题
- 比如说：全局变量的同名的问题
  - 虽然匿名闭包函数解决了变量名冲突的问题，到时同事带来了函数不可复用的问题。

//匿名闭包函数
(function(){
  var flag = true
})

模块化思维解决冲突：
- 在匿名函数中定义一个对象
- 给对象添加各种需要暴露到外部的属性和方法(不需要暴露的直接定义即可)
- 最后将这个对象返回，并且在外部使用MoudleA 接收。
上述方法：是实现模块化雏形：
常规的模块化规范：
- CommonJS
- AMD
- CMD
- 也有ES6的Modules
模块化有两个核心：
- 导入模块
- 导出模块

CommonJS导入和导出

导出模块中的属性或方法

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

导入模块中的属性或方法

// commonjs 模块
let { test，demo，flag} = require('moduleA')
// 等同于
let _mA = require('moduleA')
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;

ES6的模块化实现（重点）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script>

</script>
</body>
</html>

Aaa.js

var name='qzk';
var age = 18;
var flag = true;

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


// 导出变量
export {
  flag,name,age,sum
}

// 导出变量方式二
export var test1 = 'hahah';


// 直接导出函数
export function mul(num1,num2) {
  return num1+num2
}

// 直接导出类
export class Person {
  run(){
    console.log('在running');
  }
}

// 使用default 默认导出
// 在某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，erqie可以让使用者自己命名 可以使用default
const address = 'shanghai';
export default address

Bbb.js

import {name,flag,age,sum} from "./aaa.js";
if (flag){
  console.log("小明是天才");
  console.log(sum(10, 20));
}
// 直接导入 export 定义的变量
import {test1} from "./aaa.js";
console.log(test1);

// 导入export 定义的函数
import {mul,Person} from "./aaa.js";

console.log(mul(10, 100));

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


// 导入 默认变量或方法：此时可以自己命名这个变量或方法
import addr from "./aaa";

console.log(addr);

// 统一对某个js中的变量全部导出
import * as aaa from "./aaa.js"

console.log(aaa.mul(10, 20));