7.模块化学习

7.模块化

​ 是什么？

• 在后端中，controller层注入service层，service层注入mapper层，类与类之间的调用称为后端模块化
• 在前端中，js与js之间的调用称为前端模块化

7.1 ES5模块化测试

​ ES5模块化测试

​ 第一步，创建文件夹(es5module)和文件（两个js文件 分别为01.js 02.js）

​ 第二步：编写01.js 需要编写js方法并设置方法能被其他js调用

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

const subtra=function(a,b){
    return parseInt(a)-parseInt(b)
}

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

​ 第三步：02.js引入01.js文件、调用01.js方法并执行

//调用01.js方法
//引入01.js
const m=require("./01.js")

const sub= m.subtra(1,2)
const sum= m.sum(1,2)

console.log(sub)
console.log(sum)

​ 第四步：控制终端输入node 02.js 就能得到答案

7.2 ES6模块化测试

• es6是无法实现模块化操作的，在node.js中不能直接运行，需要使用babel转化成es5才能执行

​ 第一步，创建文件夹(es6module)和文件（两个js文件 分别为01.js 02.js）

​ 第二步：编写01.js 需要编写js方法并设置方法能被其他js调用

export function getList(){
    console.log("获取数据列表")
}

export function save(){
    console.log("保存数据")
}

• 另一种写法 只需要写一个export （里面可以写多个方法）

export default{
    getList(){
        console.log("获取数据列表")
    },
    save(){  
        console.log("保存数据") 
    }
}

​ 第三步：02.js引入01.js文件、调用01.js方法并执行

import {getList,save} from "./01.js"

getList()
save()

• 另一种写法（采用别名的方式 不用在{} 中枚举多个方法 方法多的话代码量很高）

import method from "./01.js"
method.getList
method.save

​ 第四步：使用babel将es6转成es5 才能被node.js执行

#将es6module文件夹01.js和02.js转成dist1下01.js和02.js
babel es6module -d dist1

#执行dist1/02.js下的代码
node dist1/02.js