【vue-04】模块化开发

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

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

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在一个模块中，不允许同时出现多个。