组件化开发,一般是将重复的代码抽取成一个组件,供其他地方复用,一般情况下,提到组件化开发,都是指前端的组件化开发。
模块化开发,一般是将同一类功能模块的代码放到一起统一进行管理,是基于代码层面的,一般情况下,提到模块化开发,都是指后端。
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在一个模块中,不允许同时出现多个。