前端的模块化操作

概述

  在后端中，可以将 controller、service、mapper 之间的调用看做是后端的模块化操作。而前端，也已经不再是以前的前端了，那么前端的模块化操作是什么呢？就是js与js之间的调用。

ES5的模块化操作

创建一个 01.js

// 定义两个方法
const add = function(a, b){
    return a + b;
}

const sub = function(a, b) {
    return a - b;
}

// es5 使用 module.exports = {} 来导出方法
module.exports = {
    add,
    sub
}

创建一个 02.js

// es5 使用 require 来引入其他 js 
const m = require('./01.js')

// 通过  m
console.log(m.add(1, 2));
console.log(m.sub(5, 1))

最后通过 node 02.js 进行调用

ES6的模块化操作

方式一：

创建一个 01.js

// 定义两个方法
// ES6 可以在方法前直接使用
export function print(str) {
    console.log(str);
}

export function say() {
    console.log('Hello Moto');
}

创建一个 02.js

// ES6 使用 import 来引入其他 js 
import {print,say} from './01.js';

print('Hello World!'); // 调用方法

say();

此时再去执行 node 02.js，发现报错。

node.js 环境中无法进行 es6 的模块化操作。上述报错也作证了这个结论。 所以我们需要将ES6代码转换成ES5代码，再去执行。

使用 babel 进行转码

执行代码：

方式二：

方式二是 ES6 模块化的简化操作，代码更加直接明了。

03.js

// 使用 export default{} 来定义方法，这里面方法不用写function
export default{
    add(a, b){
        return a + b;
    },
    print(str) {
        console.log(log);
    }
}

04.js

// es6 使用 import 来引入其他 js 
// 相当于给 js 文件创建一个对象m，想要调用就可以使用 m.方法() 进行调用
import m from './01.js';

m.add(1,2);

m.print('Hello World!');

babel转码后执行