简述JavaScript模块化编程(二)

前置阅读:简述JavaScript模块化(一)

在前面一文中,我们对前端模块化所经历的三个阶段进行了了解:

  1. CommonJs,由于是同步的,所以主要应用于服务器端,以Node.js为代表。
  2. AMD,异步模块定义,预加载,推荐依赖前置。以require.js为代表。
  3. CMD,通用模块加载,懒加载,推荐依赖就近。以Sea.js为代表。

而在ES6已经大行其道的今天,ES6中所提供的模块化的方法也自然而然成了我们进行JavaScript模块化编程的标准,因此ES6模块的语法虽然在一些较为老的浏览器上不能直出,需要进行转译,但却代表着未来的JavaScript发展趋势。

ES6模块特性

在ES6中将模块认为是自动运行在严格模式下并且没有办法退出运行的JavaScript代码。在一个模块中定义的变量不会自动被添加到全局共享的作用域之中,这个变量只能作用在这个作用域中。此外模块还必须导出一些外部文件可以访问的元素,以供其他模块或代码使用。

除了这个基本特性,ES6模块还有两大特性也十分重要,需要额外注意:

  • 首先是在模块的顶部this值是undefined,这是由于在ES6中的模块的代码是在严格模式下执行的。(如果对this不是很熟悉的可以去看我的这篇文章:深入浅出this关键字)
  • 其次,模块不支持HTML风格的代码注释,这是早期浏览器所遗留下的JavaScript特性,在ES6的语法里不予支持。

基本用法-模块加载

首先我们来看浏览器是如何加载模块的。其实在ES6规范出来之前,web浏览器就规定了三种方式来引入JavaScript文件:

  • 在没有src属性的 6 // 第二种方式 7

你可能感兴趣的:(简述JavaScript模块化编程(二))