32.ES6模块化

ES6模块化

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

模块化的好处

模块的有事有以下几点:
1.防止命名冲突
2.代码复用
3.高维护性

模块化规范产品

ES6之间的模块化规范有:
1.CommonJS => NodeJs,Browseify
2.AMD => requireJS
3.CMD => seaJS

ES6模块化语法

模块功能主要由两个命令构成:export,import
export命令用于规定模块的对外接口
import命令用于输出(引入)其他模块提供的功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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";
      // console.log(m3);
      // m3.default.change();
​
      // 2.解构赋值的发形式
      // import { school, teach } from "./src/js/m1.js";
      // 重名的话可以用as起别名的方式避免重名
      // import { school as school2, findJob } from "./src/js/m2.js";
      // import { default as m3 } from "./src/js/m3.js";
      // console.log(school, teach);
      // console.log(school2, findJob);
      // console.log(m3);
​
      // 3.简便形式---只能针对默认暴露
      import m3 from "./src/js/m3.js";
      console.log(m3);
    </script>
  </body>
</html>
​
// m1.js
// 分别暴露
export let school = "麻省理工";
​
export function teach() {
  console.log("我可以教给你开发技能");
}
​
// m2.js
// 统一暴露
let school = "麻省理工";
​
function findJob() {
  console.log("找工作");
}
​
export { school, findJob };
​
// m3.js
// 默认暴露
export default {
  school: "麻省理工",
​
  change() {
    console.log("改变自己,改变全世界");
  },
};
​
​

 

posted @ 2022-01-02 17:29  问某完红  阅读(38)  评论(0)    收藏  举报