前端技术模块化概念说明及模块化的es5写法和模块化的es6写法

一. 什么是模块化

1. 开发后端的接口的时候,开发controller,service,mapper,controller注入service,service注入mapper,在后端中,类与类之间的调用成为后端模块化操作
2. 在前端模块化中,就是js与js之间调用成为前模块化操作.

模拟前端模块化的过程:
es5实现模块化操作
首先在vscode中建一个文件夹叫moduledemo
然后进行初始化.
npm init -y
然后在moduledemo中新建一个文件夹叫做es5module,在该文件夹里面我们写一个叫01.js和一个叫02.js的文件.这样我们可以在01.js中创建一个方法,然后我们在02.js里面调用01.js里面的方法

01.js

//1 创建js方法
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}

//2 设置哪些方法可以被其他js调用
module.exports = {
    sum,
    subtract
}

注意设置module.exports.将方法暴露出来
然后在02.js中调用

//调用01.js里面的方法
//1 引入01.js文件
const m = require('./01.js')

//2 调用
console.log(m.sum(1,2))
console.log(m.subtract(10,3))

注意关键字required,还有路径

最后测试一下:
这样就调取成功了.

下面我们在测试一个es6的模块化测试:
但是我们需要注意一点:
es6写出来的程序是无法运行的,因为es6的模块化无法在node.hs中执行,这需要babel编辑成es5再进行执行,才可以在node.js进行运行.

es6模块化就有两种写法
第一种写法:

01.js:

//定义方法，设置哪些方法可以被其他js调用
export function getList() {
    console.log('getList............')
}

export function save() {
    console.log('save............')
}

02.js:

//调用01.js的方法，引入01.js文件，进行调用
import {getList,save} from './01.js'

//调用方法
getList()
save()

这个时候我们先用nodejs去编译
报错了,nodejs并不认识这个import.所以说node不支持es6写法,所以我们可以用babel转换.

这个时候我们可以再新建一个文件夹

这个时候我们把6-1的文件转格式存到es6-2中.
然后再通过node执行
这样就可以了.
第二种写法(更简洁)
01.js:

//定义方法，设置哪些方法可以被其他js调用
//第二种方法的简化
export default{
    getList(){
        console.log("getList.....")
    },
    update(){
        console.log("update.....")
    }
}

02.js

//调用01.js的方法，引入01.js文件，进行调用
import m from './01.js'

//调用方法
m.getList()
m.update()

然后我们再通过转换做测试:
转换成功!