模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的好处
模块化的优势有以下几点：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>
