什么是js模块化

Question

直接通过script便签引入一个不同的js文件和通过es6的import引入export导出的js有什么区别？

为啥通过es6的import或者amd common.js那种规范的引入才叫模块化？

一个普通的js文件里面写了个fn函数通过script标签的方式直接引入，其他js文件里不也可以直接调用这个fn函数吗？

求教

Answer 1

这个问题太大了吧，推荐你多看一下相关文档。

先简单回答一下，

1. 直接通过script标签src引入的文件，里面的变量/方法是全局的，没有module级别作用域
2. module可以按需引入，但是script标签会直接下载js文件，就算有defer也只是延迟。
3. js的模块化规范有很多，各有优缺点，AMD、UMD、CMD、commonJS、ES6 module

• ES modules: A cartoon deep-dive
• Introduction to ES Modules

随口一说，不太严谨

Answer 2

收藏的多年前的文章，你可以看下：前端模块化开发的价值，玉伯写的

Answer 3

简单来说，模块化就是各管各的，互不影响。
script标签只能写在HTML里面，你在一个HTML里导入多个js文件，
这些文件的顶级命名空间其实是同一个。
而且你如果要在一个js文件里用到另一个js文件里的方法或者变量，也只能将他们script到同一个HTML中。

模块化的文件，每个文件的命名空间都是独立且封闭的。只有通过export暴露出去，其他文件才能通过import拿到。

模块化的好处
第一、避免了多人开发时可能出现的命名冲突问题。
第二、各自的状态各自维护，各自的依赖各自导入。就不需要关心这个js依不依赖其他文件了。
第三、方便查错，模块化的文件内部状态是稳定的，某个方法有问题，只需要检查这个方法就行了。
...

js设计之初是有很多缺陷的，不支持模块化就是其中之一，
现有的解决方案（匿名自执行函数等）都只是权宜之计，只是因为规范不支持才搞出来的临时方案。
现在规范支持了，当然要用规范定义的方法了。