模块化 模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。 模块化的好处 模块化的优势有以下几点： 1) 防止命名冲突 2) 代码复用 3) 高维护性 模块化规范产品 ES6 之前的模块化规范有： 1) CommonJS => NodeJS、Browserify 2) AMD => requireJS 3) CMD => seaJS19 更多 Java –大数据 –前端 –python 人工智能资料下载，可访问百度：尚硅谷官网 ES6 模块化语法 模块功能主要由两个命令构成：export 和 import。 ⚫ export 命令用于规定模块的对外接口 ⚫ import 命令用于输入其他模块提供的功能
通用的导入方式
（1）
m1.js
//分别暴露 将想要暴露外面的数据前加上export
export let school = '尚硅谷';
export function teach() {
console.log("我们可以教给你开发技能");
}
使用：
<!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";
console.log(m1);
</script>
</body>
</html>
结果：
（2）
m2.js:
//统一暴露
let school = '尚硅谷';
function findJob(){
console.log("我们可以帮助你找工作!!");
}
//
export {school, findJob};
使用：
<!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">
// //引入 m2.js 模块内容
import * as m2 from "./src/js/m2.js";
console.log(m2);
</script>
</body>
</html>
（3）
m3.js:
//默认暴露
export default {
school: 'ATGUIGU',
change: function(){
console.log("我们可以改变你!!");
}
}
使用：
<!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">
// //引入 m3.js 模块内容
import * as m3 from "./src/js/m3.js";
console.log(m3);
</script>
</body>
</html>
解构赋值形式
<!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">
//2. 解构赋值形式
import {school, teach} from "./src/js/m1.js";
import {school as guigu, findJob} from "./src/js/m2.js";
// 针对默认暴露的默认导入写法
import {default as m3} from "./src/js/m3.js";
//3. 简便形式 只能针对默认暴露
// import m3 from "./src/js/m3.js";
console.log(m3);
</script>
</body>
</html>
通过src属性引入的形式
app.js:
//入口文件
//模块引入
import * as m1 from "./m1.js";
import * as m2 from "./m2.js";
import * as m3 from "./m3.js";
// console.log(m1);
// console.log(m2);
// console.log(m3);
// m1.teach();
// m2.findJob();
// m3.default.change();
//修改背景颜色为粉色
import $ from 'jquery';// const $ = require("jquery");
$('body').css('background','pink');
使用：
<!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 src="./src/js/app.js" type="module"></script>
</body>
</html>
标签：ES6,console,log,模块化,js,m3,import From： https://www.cnblogs.com/anjingdian/p/16908798.html