JavaScript 中级篇：模块化编程

模块化引入外部js文件

本文引自 JavaScript 课程 0412

)

一、模块化的概念

什么是模块？

1. 模块就是一块 js 代码块;
2. 封装成模块中的 js 文档， 内部成员外部不可见，除非导出;
3. 模块解决了模块化编程与代码封闭的问题;

(1) 传统引用外部 js 脚本

• module.js 文件

let userName = "RQ桑";

• html 文件

<script src="module1.js">
  console.log(userName);  //打印：RQ桑
</script>

注：传统的引用方式在学习过程中还是比较通用的，但是在实战过程中，模块化编程能提高工作效率。

(2) 模块化引用外部 js 脚本

• module.js 文件

导出变量语法: export { 变量名 };

// 在模块中声明的变量是私有变量，不能被外部拿到，所以必须导出变量
let userName = "RQ桑";

// 导出变量
export { userName };

• html 文件

导入变量语法: inport (变量) from 'url'

<!-- 实现模块化，type值为module -->
<script type="module"></script>

<script type="module">
  // 导入指令要放在最前面,不导入则无法实现模块化
  import { userName } from "./module1.js";

  console.log(userName);

  // 模块成员在当前使用环境中，即不能重复声明，也不能更新
  let userName = "新声明的 RQ 桑";
  console.log(userName); //报错
</script>

可以这样理解：模块成员就是当前环境中的"常量"！

---

二、模块化的用法

(1) 模块化语法 as 起别名

外部 js 文件库如果是别人的，为了防止与使用环境中的变量重名，这里我们可以使用模块化语法 as 起别名。

<script type="module">
  // 导入指令要放在最前面
  import { userName as myName } from "./module1.js";

  let userName = "新的 RQ 桑";
  console.log(userName); //打印 新的 RQ 桑

  //   此时用别名访问模块导入的成员
  console.log(myName); //打印：RQ桑
</script>

(2) 模块化语法支持 函数 和 类 的引入

• module.js 文件

// 变量
let userName = "RQ桑";

// 函数体
function hello(name) {
  return "Hello" + name;
}

// 类
class User {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  print() {
    return `${this.name} : ${this.price} 元`;
  }
}

// 一起导出
export { userName, hello, User };

• html 文件

导入变量语法: inport (变量) from 'url'

<script type="module">
  // 导入指令要放在最前面
  import { userName, hello, User } from "./module1.js";

  console.log(userName); //打印：RQ桑
  console.log(hello(userName)); //打印：Hello RQ桑

  let user = new User("宝马", "19999999");
  console.log(user); //打印：User {name: '宝马', price: '19999999'}
</script>

(3) 模块化语法 默认导出

默认模块

一个模块中只允许有一个默认成员导出。

• module.js 文件

let userName = "RQ桑";

function hello(name) {
  return "Hello" + name;
}

// 默认模块不能加大括号
// export default {hello}; //不 OK

// 单个默认变量的导出
export default hello;

// 混合式导出，不建议这样写
export { userName, hello as default };

• html 文件

<script src="module1.js">
  // 导出时默认变量也不能用括号括起来
    import hello, { userName } from "./module2.js";

    console.log(hello(userName));  //打印：Hello RQ桑
</script>

(3) 模块化语法 命名空间

基本上所有的编程语言都有命名空间这个概念，这里的命名空间是为了解决:

• 导入的成员非常多，那么就很可能会和当前空间的成员产生命名冲突;
• 此时，可以为这此导入的外部成员的集合，设置一个挂载点;

• module.js 文件

let userName = "RQ桑";

function hello(name) {
  return "Hello" + name;
}

export { userName, hello };

• html 文件

<script src="module1.js">
  // *表示所有的值, as 设置一个挂载点
      import * as namespace from "./module1.js";
    console.log(namespace); //输出如下图片
    console.log(namespace.userName); //打印：RQ桑
    console.log(hello(namespace.userName));  //打印：Hello RQ桑
</script>

---

文章到此就结束啦，记得留下你们的小赞喔，你们的鼓励就是对我最大的支持！！