【原创】ES6 模块化

模块化

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

index.htm;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="#" />
  <title>Title</title>
</head>

<body>
  <script type="module">
    import * as m from "./m.js";
    console.log(m);
  </script>
</body>

</html>

m.js

let school = '学校';
function teach () {
  console.log('我可以教你学习');
}

export { school, teach };

默认暴露
index.html

    import * as d from './default.js';
    console.log(d.default.school);

default.js

export default {
  school: '学校',
  teach: function () {
    console.log('我可以教你');
  }
};

导入模块

  • 通用导入方式:import 别名 文件路径
  • 解构赋值形式
    import { school, teach } from './m.js';
    teach();
    import { default as m3 } from './default.js';
    m3.teach()

此处 default 必须加个别名,不能使用 default 关键字

  • 简便形式,只针对默认暴露
    import m3 from 'm.js'
    m3.school;

引入模块的简便形式

app.js

import {school, teach} from 'm1.js';
import m2 from 'default.js'
console.log(school);
teach();
m2.teach();

index.html

<script src='./app.js' type='module'></script>
点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注