简介

  • 前端多文件时容易出现2个问题，通过『模块化』可以解决上述两个问题：
    • 命名冲突
    • 文件依赖
  • 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块。

  • 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。我们常见的模块化更多的是前端工程化的项目，但是现在的浏览器也可以直接在html代码中引用模块

    1. 将js代码写在独立的js中，export你想导出的内容
    2. 在html文件中使用<script type="module"></script>引入，并正确使用import即可

      JavaScript的模块化

  • ES6 模块化规范中定义：

    • 一个 js 文件就是一个独立的模块，文件内部的所有变量外部无法获取
    • 导入模块成员使用 import 关键字
    • 暴露模块成员使用 export 关键字(即使用export允许外部访问)

      export使用

      1. export var firstName = 'Michael';  //一次输出一个变量，定义与输出一起
      2. export var year = 1958;
      3. export {firstName, year};//一次输出多个
      1. export function one(a, b) { ... }  //一次输出一个函数，定义与输出一起
      2. function two() { ... }
      3. export { one, two };  //一次输出多个
      1. export { ... }
      2. export function() { ... }

      import

  • import用于加载其他模块的export对外信息，并从中输入变量。

    • 需要强调的一点是，并非人家 export，你就能直接使用，你需要 import 别人 export 出来的变量和方法，而后你才能用。
  • import 命令输入的变量都是『只读』的，即，不允许再加载它的脚本中改写它。如果导入的是一个对象，虽然改写对象的属性是允许的，但是仍不推荐这样使用。
    • 建议凡是 import 的变量，都当作完全只读。若无必要，轻易不要改变它（和它的属性）。

  • import只能加载被export的数据，import 方需要明确知道 export 方对外导出的变量名或函数名，否则无法加载。这及其不方便，甚至export导出的是匿名信息

    1. import { firstName, lastName, year } from './xxx.js';
    2. //从xxx.js模块中引入变量/函数，   模块的.js可以省略
    3. //import必须使用大括号，即便只引入一个。对于接收匿名则不使用大括号

    export defalut

  • 用于匿名变量或者匿名函数的对外导出,import可以以任意名字去接收匿名对象或者函数

  • 一个模块只能有一个默认输出 export default 。
    1. export default { ... }  或者  export default function () { ... }
    2. import obj from 'xxx.js'        //  相当于const obj = { ... }
    3. 或者
    4. import sayHello from 'xxx.js'   //   相当于const sayHello = function () { ... }