美文网首页
ES6模块系统

ES6模块系统

作者: bonon | 来源:发表于2016-08-13 16:54 被阅读50次

ES6模块系统具有以下特性:

  • 使用export关键词导出对象。这个关键字可以无限次使用;
  • 使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块;
  • 支持模块的异步加载;
  • 为加载模块提供编程支持。

导出对象

在现有的模块系统中,每个JavaScript代码文件在ES6中都是一个模块。只有模块中的对象需要被外部调用时,模块才会输出对象,其余则都是模块的私有对象。该处理方式将细节进行封装,仅导出必要的功能。

单个导出(内联导出)
一个模块中可无数次使用export,所有的对象将被一起导出。

export var haha = 'haha'
export class lala {  
  ...
}  
export function gaga () {  
  ...
}

成组导出
一齐导出该模块中的全部对象。

var haha = 'haha'
class lala {  
  ...
}  
function gaga () {  
  ...
}
export {haha, lala, gaga};  

在导出时,可以重命名方便其他模块调用。

export {  
  new_haha as haha,  
  new_lala as lala  
};  

Default导出
使用关键字default,可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出,也可以用于一组对象导出声明中。
内联

export default var haha = 'haha'
export default class lala {  
  ...
}  
export default function gaga () {  
  ...
}

成组

export default {  
  haha,  
  lala,
  gaga  
};  

导入模块

现有模块可以使用关键字import导入到其它模块。一个模块可以被导入任意数量的模块中。

无对象导入
模块包含一些逻辑要执行,不需要导出任何对象

import './moduleNoOutObj.js';  

** 导入默认对象**

import ha from './moduleDefault.js';  

** 导入命名的对象**

import {haha, lala} from './module.js';  

导入默认对象和命名对象(同时)

import {default as ha, haha} from './module.js';  

这种情况下,默认对象必须定义一个别名

** 导入所有对象**

import * as sasa from './module.js';  

sasa这一别名将指向所有从module导出的对象。在导入模块中,它们作为属性可被访问。

可编程式的按需导入

如果想基于某些条件或等某个事件发生后再加载需要的模块,可通过使用加载模块的可编程API(programmatic API)来实现。使用System.import方法,可按程序设定加载模块。这是一个异步的方法,并返回Promise。
该方法的语法示例如下:

System.import('./module1.js')  
  .then(function(module1){  
    //use module1  
  }, function(e){  
    //handle error  
});  

如果模块加载成功且将导出的模块成功传递给回调函数,Promise将会通过。如果模块名称有误或由于网络延迟等原因导致模块加载失败,Promise将会失败。

相关文章

  • 未来的模块机制

    概览 ES6实现了新的模块机制。在通过模块系统加载时,ES6会将文件当作独立的模块处理。每个模块都可以导入其它模块...

  • 第4章 ES6模块化

    目标 模块化系统演进 ES6模块化实现 模块化概述 在 ES6 之前,社区制定了一些模块加载方案,最主要的有 Co...

  • 第4章 ES6模块化

    目标 模块化系统演进 ES6模块化实现 模块化概述 在 ES6 之前,社区制定了一些模块加载方案,最主要的有 Co...

  • js 模块化规范的进展

    js模块化规范有:CommonJS、AMD、CMD、ES6的模块系统。 0.早期:用script来引入js模块 缺...

  • 代码模块化

    2 ES6模块 ES6模块基于文件,一个文件就是一个模块。ES6模块支持异步模块加载。关键字:import和exp...

  • 前端架构

    B系统前端总体架构 底层模块化基于ES6模块处理; 基于react全家桶框架、使用superagent封装ajax...

  • ES6模块系统

    ES6模块系统具有以下特性: 使用export关键词导出对象。这个关键字可以无限次使用; 使用import关键字将...

  • 谈谈JS的那些文件模块系统

    学习ES6和Webpack过程中,研究了一下CommonJS,AMD, CMD, ES6这些模块系统到底有什么区别...

  • 前端模块化:ES6,CommonJS

    前端模块化 共有四种规范 ES6 Module CommonJS AMD CMD ES6 Module ES6模块...

  • modules

    翻译github整理笔记。模块(能力一般水平有限)。 ps:在ES6模块系统中,js自动将模式变为严格模式 exp...

网友评论

      本文标题:ES6模块系统

      本文链接:https://www.haomeiwen.com/subject/drgesttx.html