lovecoding
/
VIP20


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!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 src="a.js"></script>
    <script src="b.js"></script>
    <!-- 以模块方式引入 js 文件 -->
    <script src="./myMath.js" type="module"></script>
    <script>
      console.log(r); // 30
      // console.log(PI); // 会报错
      /**
       ** 1. 什么是模块化开发？
       **   所谓的模块化开发 就是 以 模块 为基本组成单元 去实现项目的开发
       ** 2. 什么是模块？
       ** 一个模块 对应的就是 一个文件。文件中 是 独立的可复用的代码片段。
       ** 比如，说在JS中 一个js文件 就是 一个模块，该文件名字 一般就是模块的名称、
       ** 3. 模块化解决的问题
       **  3.1 命名冲突: 由于模块具有独立的作用域（模块作用域或者文件作用域）,因此不同模块内定义的同名变量 是不会发生冲突的
       **  3.2 代码组织：有了模块之后，可以将独立的或者可复用的代码 提取出来，放到模块中。模块的文字就可以用来作为功能的一个提示。
       **  3.3 依赖问题：在模块中有固定语法来解决模块间的依赖问题。
       ** 4. 模块的使用
       **   4.1 创建模块
              在js中，创建一个js文件 即创建了一个模块、默认情况下模块会具有独立的作用域。内部数据 不会直接暴露出去
       **   4.2 对外暴露
              模块实现对外暴露接口 有两种方式：
              A: 命名导出  named export
              B: 默认导出  default export
      **    4.3 引入依赖
              针对不同的导出方式 依赖的引入 也有两种方式：
              A 针对命名导出：
                按需导：import {arg1, arg2, ..., argN} from '模块路径' 将指定模块的命名导出 一次一个一个的导入进来
                整体导：import * as 变量名字 from '模块路径'  将所有的命名导出 都通过一个对象形式导入到当前模块内
              B 针对 默认导出：
                import 变量 from '模块路径'
              C 同时 针对默认和命名导出
                import 变量名, {arg1, arg2, ..., argN} from '模块路径'


       **/
    </script>
    <script type="module">
      // 在type=module的 script标签内使用import from导入依赖 模块路劲要添加 后缀名
      // import { calcCircleArea } from './myMath.js';

      // calcCircleArea(10); // 314

      // import * as myMath from './myMath.js';

      // // 创建一个myMath对象 -- myMath = {} 然后将myMath模块中所有的命名导出数据 都以属性的方式添加给 变量myMath

      // myMath.calcCircleArea(10);

      import m from './myMath.js';

      console.log(m);
    </script>
  </body>
</html>