这是我参与「第四届青训营」笔记创作活动的的第7天

为什么要有模块化

解决命名冲突问题
解决代码复用问题

匿名函数的解决方案

可以使用匿名函数来解决命名冲突问题

25. 模块化-2.png

匿名函数解决了命名冲突，但是不能代码复用

使用模块作为出口

ES5：使用模块作为出口

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

在main.js中，只需要使用属于自己模块的属性和方法即可

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

CommonJS

node就是用的CommonJS规范

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

<script>
// 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 { test,demo,flag } = require( './js/aaa.js' );
  
  //等同于
  let _mA = require( ' moduleA ' );
  let test = _mA.test;
  let demo = _mA.demo;
  let flag = _mA.f1ag;
</script>

ES6 的 Modules 模块化

export指令用于导出变量

import指令用于导入模块中的内容

<script>
  // 比如下面的代码:
  // info.js
  // 导出方式一
export let name = 'why'
export function test(){
  console.log('test(){ ... }');
}
export class Person {
  constructor(name){
    this.name = name
  }
  read(messege){
    console.log(messege);
  }
}

// 上面的代码还有另外一种写法:
// info.js
// 导出方式二
let name = 'why'
function test(){
  console.log('test(){ ... }');
}
// ES6 类
class Person {
  constructor(name){
    this.name = name
  }
  read(messege){
    console.log(messege);
  }
}
export { name,test,Person }  // 直接放变量
// export default｛这样才能属性名：属性值｝
// commonJs导出的是exports对象，但es6的module不是对象，所以不能写成对象的形式
</script>

通过import命令来加载对应的这个模块

首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module (加上就不会有命名冲突)

<script src="./info.js" type="module"></script>

<script src="./main.js" type="module"></script>

光写这个，没有export 时，每个模块不能使用其他模块的东西，就像是3个函数不能互相访问他们里面的变量想用的话就要使用export 导出

模块作用域：

在自己的文件-独立空间内可以随意起名，不用担心和其他模块命名冲突，
但其他模块不能访问该模块的东西
通过 export 导出变量，import 导入变量让别人访问到

import指令用于导入模块中的内容，比如main.js的代码 import {name,test,Person} from '/./info.js'

统一全部导入

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦： 通过*可以导入模块中所有的export变量 但是通常情况下我们需要给 *起一个别名，方便后续的使用

<script>
  import * as info from './info.js' 
  console.loig(info.name)
</script>

export default

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而是让导入者可以自己来命名这个时候就可以使用export default

<script>
  // info.js
  export default function (){
    console.log('default function');
  }
  // export default { 
  //   name : name, 
  //   age : age, 
  //   sum : sum
  // }
  // export default｛这样才能属性名：属性值｝


// 我们来到main.js中，这样使用就可以了
// 这里的myFunc是我自己命名的，你可以根据需要命名它对应的名字
import myFunc from './info.js'
myFunc()
</script>

另外，需要注意： export default在同一个模块中，不允许同时存在多个。

Vue模块化 ｜ 青训营笔记