javascript模块化之ES5、ES6案例实战

一、模块化

  后端模块化：类与类之间调用，比如Controller调用service过程。

  前端模块化：js文件之间的调用。

二、es5模块化操作

（1）被调用01.js

// 定义成员：
//相加方法
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
//相减方法
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}
//相乘方法
const multiply = function(a,b){
    return parseInt(a) * parseInt(b)
}
//相除方法
const divide = function(a,b){
    return parseInt(a) / parseInt(b)
}

//定义js,用于其他js调用
module.exports = {
    sum,
    subtract,
    multiply,
    divide
}

（2）调用02.js

//引入模块，注意：当前路径必须写 ./
const m = require('./01.js')
console.log(m)

//调用01.js文件
const result1 = m.sum(6, 6)
const result2 = m.subtract(6, 6)
const result3 = m.multiply(6, 6)
const result4 = m.divide(6, 6)

console.log(result1, result2,result3,result4)

（3）终端操作

三、es6模块化操作（方式一）

Es6的模拟化无法在Node.js中执行，需要在Babel编辑成Es5后再执行！

（1）被调用01.js

export function addUser(){
    console.log('addUser.........')
}
export function updateUser(){
    console.log('updateUser.........')
}

（2）调用02.js

//引入文件
import{addUser,updateUser} from './01.js'

//调用
addUser()
updateUser()

（3）终端操作

报错！在Babel编辑成Es5后执行才能成功。

（4）转为ES5

转换后的01.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.addUser = addUser;
exports.updateUser = updateUser;
function addUser() {
    console.log('addUser.........');
}
function updateUser() {
    console.log('updateUser.........');
}

转换后的02.js

'use strict';
var _ = require('./01.js');
//调用
(0, _.addUser)();
(0, _.updateUser)();

（5）终端操作

四、es6模块化操作（方式二）

export default {
  
    addUser(){
    console.log('addUser.........')
	},
	updateUser(){
    console.log('updateUser.........')
	}
}

♚学习、实战、总结、分享，让生活变得更美好！
☞林大侠博客：https://coding0110lin.blog.csdn.net/  欢迎转载，一起技术交流探讨！