JavaScript，ES6，模块化，大程序文件拆分成小文件再组合起来

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

模块化的优势有以下几点：1、防止命名冲突，2、代码复用，3、高维护性。

模块化规范产品，ES6 之前的模块化规范有：

1、CommonJS => NodeJS、Browserify

2、AMD => requireJS

3、CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。

⚫ export 命令用于规定模块的对外接口

⚫ import 命令用于输入其他模块提供的功能

代码案例

m1.js

复制代码

//分别暴露
export let school = '小奋斗';

export function teach() {
    console.log("IT,IT");
}

JavaScript，ES6，模块化，大程序文件拆分成小文件再组合起来

2022-01-28 23:29·古怪今人

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

模块化的优势有以下几点：1、防止命名冲突，2、代码复用，3、高维护性。

模块化规范产品，ES6 之前的模块化规范有：

1、CommonJS => NodeJS、Browserify

2、AMD => requireJS

3、CMD => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。

⚫ export 命令用于规定模块的对外接口

⚫ import 命令用于输入其他模块提供的功能

代码案例

m1.js

复制代码

//分别暴露
export let school = '小奋斗';

export function teach() {
    console.log("IT,IT");
}

m2.js

复制代码

//统一暴露
let school = '小奋斗';

function findJob(){
    console.log("IT小奋斗!!");
}

//
export {school, findJob};

m3.js

复制代码

//默认暴露
export default {
    school: '小奋斗',
    change: function(){
        console.log("IT小奋斗,IT小奋斗!!");
    }
}

页面

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 模块化</title>
</head>
<body>
    <script type="module">
        //1. 通用的导入方式
        // 引入 m1.js 模块内容
        import * as m1 from "./src/js/m1.js";
        //引入 m2.js 模块内容
        import * as m2 from "./src/js/m2.js";
        //引入 m3.js 
        import * as m3 from "./src/js/m3.js";

        //2. 解构赋值形式
        import {school, teach} from "./src/js/m1.js";
        import {school as guigu, findJob} from "./src/js/m2.js";
        import {default as m32} from "./src/js/m3.js";

        //3. 简便形式  针对默认暴露
        import m33 from "./src/js/m3.js";
        console.log(m33);
    </script>
</body>
</html>