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 @   问某完红  阅读(31)  评论(0)  编辑  收藏  举报
相关博文：
· 25.class介绍
· 26.复习ES5构造函数继承
· ES6-模块化
· ES6之模块化
· ES6的模块化
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示