ES6 模块化编程 详解

目录

一、基本介绍

二、基本原理示意图 

三、传统CommonJS实现模块化编程

        1.介绍 : 

        2.实例 : 

四、ES6新特性实现模块化编程

        1.介绍 : 

        2.实例 : 

---

一、基本介绍

        (1) ES6新特性——模块化编程，用于解决传统非模块化开发中出现的"命名冲突", "文件依赖"等问题。

        (2) 类似于Java中可以引入其他已经写好的模块完成开发，JS也引入了模块化编程；开发者只需要实现核心的业务逻辑即可。

        (3) JavaScript中使用"Module"(/ˈmɑːdʒuːl/)来实现模块化编程。

---

二、基本原理示意图 

                在Java中，可以将多个功能相关的.java文件放在同一个包下进行统一管理，比如Java后端三层经典架构(Web层-Service层-DAO层)；JS中的模块Module就是类似于这样的一种机制，其目的都是实现“分门别类，各司其职”。
                JS模块化编程的基本原理示意图，如下所示 : 

---

三、传统CommonJS实现模块化编程

        1.介绍 : 

        (1) CommonJS是一种 JavaScript 语言的模块化规范，它规定每个.js文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类或对象，都是私有的，对其他.js文件(即其他模块)都不可见。

        (2) CommonJS使用格式——
             module.exports = {} / exports = {}导出模块；(首先在要使用的其他模块中写下导出语句)
             let / const var_name = require("__.js")导入模块。(然后在当前模块中写下导入语句)

        2.实例 : 

                定义calculate.js，用来模拟要使用的其他模块，需要在calculate.js文件中定义导出语句。
                calculate.js代码如下 : 

//def some variables and constants
let color = "cyan";
const PI = 3.1415926;
const E = 2.71828182;
 
//The function used to calculate the sum of two numbers
let plus = function (number1, number2) {
    return parseInt(number1) + parseInt(number2);
}
 
//The function used to calculate the difference of two numbers
let minus = function (number1, number2) {
    return parseInt(number1) - parseInt(number2);
}
 
//def a object
let blogger = {
    name: "Cyan_RA9",
    age: 21,
    write() {
        console.log("I relish writing blogs.")
    }
}
 
//export the data of this .js file out(导出模块)
module.exports = {
    plus: plus,
    minus: minus,
    eValue: E,
    PIValue: PI
}
 
//若导出的名称和本身属性名一致，可以使用ES6新特性———对象简写：
exports = {
    plus,
    minus,
    E,
    PI
}

                定义testCalculate.js，用来模拟需要导入其他模块的模块，在testCalculate.js中定义导入语句，导入calculate.js模块。
                testCalculate.js代码如下 : 

//import the data of other .js file in(导入模块)
let calculate = require("./calculate");     //默认携带.js尾缀
//亦可以通过解构赋值来导入模块中的部分数据
let { plus } = require("./calculate");
let { color } = require("./calculate");
 
 
/*
    导入模块后，通过"名称."的形式来调用，
    类似于JS中对象的调用。
 */
console.log(calculate.plus(11, 5));
console.log(calculate.minus(11, 5));
console.log(plus(11, 5));
 
console.log(calculate.eValue);
console.log(calculate.PIValue);
console.log(color);
 
/*
    若IDEA没有报出语法错误，说明导入成功！
    若导入模块失败，使用其他模块中的内容会报错———Missing require() statement
 */

---

四、ES6新特性实现模块化编程

        1.介绍 : 

        ES6新特性实现模块化编程，在使用上和传统CommonJS原则一致，都是先写导出语句以导出模块，再写导入语句来导入模块。

        导出模块可以使用三种方式——
        (1) export {}; (2) export 定义名称 = ; (3) export default {};

        导入模块有对应的两种方式——
        (1) import {} from "__.js"; (2) import 名称 from "__.js"; [方式(2)主要用于对应第三种导出语句]

        PS : 

        1> ES6的模块化无法在Node.js中执行，需要用Babel转码ES5之后再执行。

        2> export可以导出一切JS变量，包括基本类型变量，函数，数组，对象等。

        2.实例 : 

                另定义calculate_EX.js，用来模拟要使用的其他模块，需要在calculate_EX.js文件中定义导出语句。
                calculate_EX.js代码如下 : 

//define some variables and constants
let symbol = "RA9";
let color = "cyan";
 
//The function used to calculate the sum of three numbers
let plus = function (number1, number2, number3) {
    return parseInt(number1) + parseInt(number2) + parseInt(number3);
}
 
//The function used to calculate the difference of two numbers
let minus = function (number1, number2) {
    return parseInt(number1) - parseInt(number2);
}
 
//def a object
let blogger = {
    name: "Cyan_RA9",
    age: 21,
    write() {
        console.log("I relish writing blogs.")
    }
}
 
//(1)第一种导出方式———批量导出(可以全部导出，也可以部分导出)
export {
    plus,
    minus,
    blogger,
    color
}
//(2)第二种导出方式———在定义时就直接导出(直接在定义语句前面加上export关键字)
export let divide = function (number1, number2) {
    return number1 / number2;
}
 
//(3)第三种导出方式———default默认导出
export default {
    multiply(number1, number2) {
        return number1 * number2;
    },
    symbol
}

                另定义testCalculate_EX.js，用来模拟需要导入其他模块的模块，在testCalculate_EX.js中定义导入语句，导入calculate_EX.js模块。
                testCalculate_EX.js代码如下 : 

//(1) 通过解构赋值的形式导入模块
    // [可以选择性的导入部分数据]
    // [要求导入和导出时的名称一致]
import { blogger } from "./calculate_EX";
console.log(blogger);
 
//(1) 通过解构赋值的形式导入模块
import {divide} from "./calculate_EX";
console.log(divide(12, 3));
 
//(2) 通过定义名称的形式导入模块（对应导出模块的default导出语句）
    //该方式可用于解决命名冲突问题
import demoI from "./calculate_EX";
console.log(demoI.symbol);
console.log(demoI.multiply(11, 5));

        System.out.println("END-------------------------------------------------------------");