专栏名称: 奇舞周刊
《奇舞周刊》是由奇舞团维护的前端技术周刊。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送周刊汇总内容。
目录
相关文章推荐
安徽高院  ·  与您同行 | 走进 · 走近 ·  2 天前  
安徽高院  ·  与您同行 | 走进 · 走近 ·  2 天前  
前端之巅  ·  2024大前端趋势洞察:进化停滞与鸿蒙新契机 ·  2 天前  
印记中文  ·  React 中文周刊 #215 - ... ·  2 天前  
印记中文  ·  React 中文周刊 #215 - ... ·  2 天前  
前端大全  ·  2024 年最受欢迎的前端项目 ·  3 天前  
前端早读课  ·  【第3448期】Build System ... ·  3 天前  
51好读  ›  专栏  ›  奇舞周刊

ES6模块,Node.js和Michael Jackson Solution

奇舞周刊  · 公众号  · 前端  · 2017-10-28 18:47

正文

编者按:本文由MVM在众成翻译平台上翻译。

JavaScript没有一个标准的方法,可以将一个功能从一个文件中导入或导出到另一个文件。好在有全局变量。例如:

<script src="https://code.jquery.com/jquery-1.12.0.min.js">script>

<script>

// `$` variable available here

script>

这种方式远谈不上完美,因为它可能导致一些问题:

  • 如果你使用的其他库里面使用了相同的变量,你的代码可能会与之产生冲突。这就是为什么许多库都有一个noConflict()方法。

  • 你无法实现循环引用。如果模块A和模块B互相依赖,我们要以怎样的顺序来放置

    // a.js

    console.log('executing a.js')

    import { helloWorld } from './b.js'

    helloWorld()

    // b.js

    console.log('executing b.js')

    export function helloWorld () {

      console.log('hello world')

    }

    当文件执行的时候,我们会在浏览器的控制台看到以下结果:

    executing b.js

    executing a.js

    hello world

    然而,在Node.js中使用CJS语法执行相同的代码:

    // a.js

    console.log('executing a.js')

    import { helloWorld } from './b.js'

    helloWorld()

    // b.js

    console.log('executing b.js')

    export function helloWorld () {

      console.log('hello world')

    }

    控制台显示的结果却是:

    executing a.js

    executing b.js

    hello world

    所以...相同的代码执行的顺序却不一样!这是因为ES模块首先解析代码(并不会直接执行),其次runtime查找imports并且加载他们,最后再执行代码。这种方式被称为异步加载。

    另一方面,Node.js在执行代码的时候才会加载所需的依赖项(requires)。这两种执行方式不同。虽然在某些情况下没什么区别,但是在其他情况下表现是完全不同的。

    Node.js和web浏览器需要以第一种方式来实现代码加载。但是它们如何确定使用哪种系统对应的方式呢?浏览器知道,因为你可以在