认识Javascript模块化开发

fadeaway_shot
75 阅读2分钟

我们先来看一个例子：

// a.js
let name = 'kobe';
​
// b.js
let name = 'Lebron'；
​
// index.html
......
<body>
    <script src="./main.js"></script>
    <script src="./foo.js"></script>
</body>
......

在浏览器中打开，控制台报错：name已经被声明，如图：

1676615743388.png

这是Javascript没有模块化带来的最基础的问题：命名冲突；

在公司的开发中，每个人负责不同的模块。如果没有模块化开发，确实会带来很多问题。

没有模块化带来的问题

  1. 早期没有模块化带来了很多的问题：比如命名冲突的问题。当然，我们有办法可以解决这个问题：立即调用函数

    // a.js
(function () {
  let name = "kobe";
}());
​
// b.js
(function () {
  let name = "LeBron";
}());

  2. 但是也带来了新的问题：

    1. 我们必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；
    2. 代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
    3. 在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；

什么是模块化？

到底什么是模块化、模块化开发呢？

  • 事实上模块化开发最终的目的是讲程序划分成一个个小的结构；
  • 在这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量时不会影响到其他的结构；
  • 在这个结构中可以将自己希望暴露的变量、函数、对象等导出给其他结构使用；
  • 也可以通过某种方式，导入另外结构中的变量、函数、对象等；

这种结构，就是模块；按照这种结构开发程序的过程，就是模块化开发的过程。

模块化的历史

  1. 在网页开发的早期，Javascript仅仅作为一种脚本语言，一些简单的表单验证或者动画实现等，那个时候代码还是很少的。

    1. 在这个时候我们只需把Javascript代码写到<script>标签中即可，并没有必要放到多个文件中来编写。

  2. 但是随着前端和Javascript的快速发展，Javascript代码变得越来越复杂了：

    1. ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过Javascript进行前端页面的渲染
    2. SPA的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列需求都通过Javascript来实现
    3. 通过Javascript编写复杂的后端程序，没有模块化是致命的硬伤

  3. 所以，模块化已经是Javascript一个非常迫切的需求：

    1. 但是Javascript本身，直到ES6(2015)才推出了自己的模块化方案；
    2. 在此之前出现了很多不同的模块化规范：AMD、CMD、CommonJS等；
avatar
文章
阅读
粉丝