ES6 模块

ES6引入模块支持。 ES6中的模块是单个文件,它允许代码和数据隔离,它有助于在逻辑上组织和分组代码。 在其他语言中,它被称为包或库。 模块内的所有代码和数据都有文件范围,这意味着它们不能从模块外部的代码访问。 要在模块外部共享代码或数据,需要使用export关键字导出。

// File: circle.js

export const pi = 3.141592;

export const circumference = diameter => diameter * pi;

上面的代码使用了用于圆周的箭头函数,这是ES6中引入的,并且是以下的缩写。

export function circumference(diameter) {
  return diameter * pi;
}

模块系统

在后端(服务器端)使用模块是相对简单的,你只需使用import关键字。 然而,Web浏览器没有模块或导入的概念,他们只知道如何加载JavaScript代码。 我们需要一种方法来引入一个javascript模块,以便从其他JavaScript代码开始使用它。 这是一个模块加载器

我们不会进入各种模块系统,但值得了解的是,有各种模块加载器可用。 流行的选择有:

  • RequireJS
  • SystemJS
  • Webpack

从浏览器加载模块

下面我们使用SystemJS来加载模块。 该脚本首先加载SystemJS库的代码,然后调用System.import的函数用于导入(加载)应用程序模块。 加载ES6模块有点棘手。 在符合ES6的浏览器中,使用System关键字以异步方式加载模块。 为了使我们的代码与当前的浏览器一起使用,我们将使用SystemJS库作为polyfill:

  <script src="/node_module/systemjs/dist/system.js"></script>
  <script>
    var promise = System.import('app')
      .then(function() {
        console.log('Loaded!');
      })
      .then(null, function(error) {
        console.error('Failed to load:', error);
      });
  </script>

results matching ""

    No results matching ""