组件化开发，一般是将重复的代码抽取成一个组件，供其他地方复用，一般情况下，提到组件化开发，都是指前端的组件化开发。

模块化开发，一般是将同一类功能模块的代码放到一起统一进行管理，是基于代码层面的，一般情况下，提到模块化开发，都是指后端。

JavaScript原始功能

在ajax请求的出现，慢慢形成前后端分离。我们通常会将代码组织到多个js中，方便维护。但是这种维护方式，依然不能避免一些灾难性的问题。比如变量的污染。

flag = true // aaa.js

<script src="./js/aaa.js"></script>

flag = false // bbb.js

<script src="./js/bbb.js"></script>

<script>

    if(flag) {

        console.log('flag的值是', flag)

    }

</script>

使用模块作为出口

我们可以使用将需要的暴露在外面的变量，使用一个模块作为出口。

var moduleA = (function() {

  var flag = true

  return flag

})()

var moduleB = (function() {

  var flag = false

  return flag

})()

<script src="./js/aaa.js"></script>

<script src="./js/bbb.js"></script>

<script>

    console.log('flag的值是', moduleB)

</script>

以上代码就是模块化开发的雏形。将变量定义到一个匿名函数中，这样就可以避免变量名的冲突。

Export

Export用于导出变量。

info.js

// 分别导出name、age、gender三个变量

export let name = '张三'

export let age = 23

export let gender = '男'

Import

我们使用export指令导出了模块对外提供的接口，下面我们通过import指令来加载这个模块。

在html中使用script标签引入js文件，注意，这里需要把type设置为module。

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

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

接着，使用import在main.js中引入info.js。

注意

info中使用export导出了什么，我们使用的时候就需要用什么去接收，变量名必须一致。此外，如果我们不需要使用某变量，比如gender。我们可以不写。

main.js

import {name, age, gender} from './info.js'

console.log(name, age, gender)

如果我们希望某个模块中所有的信息都导入，一个个导入显然非常麻烦。通过*可以导入模块中所有的export变量。

import * as info from './info.js'

console.log(info.name,info.age,info.gender)

Export导出方法

export function test(content) {

  console.log(content)

}

Export default

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

info2.js

let user = {

  name: '张三',

  age: 23,

  gender: '男'

}

export default user

那么，我们在main.js中，就可以直接使用了

import aaa from './info2.js'

console.log(aaa)

需要注意的是：export default在一个模块中，不允许同时出现多个。

巴特西

【vue-04】模块化开发