Javascript模块化简史

Posted 2021-11-23 thomaszdxsn

• Script标签和闭包

https://ponyfoo.com/articles/brief-history-of-modularity

这篇文章，我们会快速回顾和总结javascript世界中的模块化的里程碑事件。这篇文章不会完整的列出所有的事件，而是回顾模块化发展历史中那些重要的大事件。

Script标签和闭包

在以前，Javascript写在html的<script>标签里面，或者好一点，写在单独的Javascript文件里面，它们都共享一个全局作用域。

在这些文件或者标签中声明的变量，都会关联到全局的window对象。这种情况下，会出现很多意外的错误，甚至会导致应用崩溃。比如，在一个script中，意外的覆盖了之前声明的变量名称。

最终，由于web应用日渐壮大和复杂化，全局域会很危险是尽人皆知的。然后就引入了著名的即时调用函数表达式（IIFE）。IIFE会把一个文件，或者文件的部分代码包裹进入一个函数，然后在定义函数之后立即执行它。Javascript中的每个函数都会创建一个单独的域，意味着var声明的变量将会绑定在IIFE内部，不会变成全局变量。

多谢IIFE，它帮助我们止住了Javascript隐式全局作用域带来的痛苦。

下面的例子中，是几个不同风格的IIFE。每个IIFE中的代码都是隔离的，如果要访问和赋值全局变量，需要显式地使用类似window.fromIIFE = true的表达式。

(function() {
    console.log('IIFE using parenthesis')
})()

~function() {
    console.log('IIFE using bitwise operator')
}()

void function() {
    console.log('IIFE using the void operator')
}()