美文网首页
ES6 - Module

ES6 - Module

作者: 婆娘漂亮生活安逸 | 来源:发表于2019-01-11 19:02 被阅读0次

本文参考 阮一峰 ECMAScript 6 入门,进行简单语法总结

1.概述

ES6 模块的设计思想,打破了历史上 JavaScript 没有模块体系(其他语言都有这项功能);我们需要知道,ES6 模块非对象,通过 export 命令显示指定输出代码;通过 import 命令输入。加载方式为 编译时加载(静态加载)

⚠️ES6 模块自动采用严格模式,这与在头部是否添加 “use strict” 无关;需要注意this的限制,在ES6模块中,顶层的this指向是undefined,在顶层代码中是不应该使用this的。

2.export命令

  • 定义:用于规定模块的对外接口;

  • 基本语法:
    首先我们需要了解,一个模块就是一个独立的文件,该文件内部的所有变量,我们只能通过 export 输出;

    // information.js
    export var name = 'Maning';
    export var sex = 'female';
    

    但是,我们更加推荐以下,以下这种方式,更加清晰看出输出的变量;

    // information.js
    var name = 'Maning';
    var sex = 'female';
    export { name, sex };
    
  • 输出类型:变量、函数、类

    export function doSomething() {
          // do code here...
    }
    

    同变量,推荐先定义,再输出;
    ⚠️ export 输出的名字可以是原本定义的名义,也可以通过 as 关键字重命名。重命名后,相同变量则可以使用不同名字多次输出。

    function do1() {}
    function do2() {}
    export {
      do1 as doSomethingFirst,
      do2 as doSomethingSecond,
      do2 as doSomethingElse
    };
    
  • export 命令规定的是对外接口,必须与模块内部的变量建立一对一的对印关系。

      ❌代码示例一
      export 1;
      var num = 1;
      export num;
    
      ❌代码示例二
      function f() {};
      export f;
    

    上述代码,本质都是输出的都是具体的值,而不是接口。

  • export 命令只能出现在模块顶层的任意位置;如果处于块级作用域内,就会报错。

3.import命令

  • 定义:用于输入其他模块提供的功能
  • 基本语法:
      // import 命令接受一对 { } ,里面的变量必须和 export 的变量名字一致
     import { name, sex } from './information.js';
    
  • as 关键字重命名
    import { name as myName } from './information.js';
    
  • 注意点:
    ⚠️ 关于变量:import 命令输入的变量是只读的,不能改变其值,但允许修改其属性(不推荐,不易于排错);
    ⚠️ 关于路径:import 命令 from 后面的路径,可以是绝对路径也可以是相对路径,可以省略 .js 后缀;如果from后面是一个模块文件名,则必须通过配置文件。

4.模块的整体加载

  • 语法:import * as information from './information.js';
    星号(*) 表示一个对象,所有的输出值均加载在该对象上。
     // 取值操作
     let myName = information.name;
     let mySex = information.sex;
    

5.export default 命令

  • 区别:该命令后面不需要{},使用 import 时不需要{},且可以随便替换变量名。

     export default class A{};// a.js
     import B from './a.js';
    

    ⚠️ 一个模块只能有一个默认输出,因此 export default 命令只能使用一次。本质上,该命令是输出一个 default 的变量或方法,系统允许为它取任意名字。因此我们可以理解以下代码块:

    ❌export 666;
    ✅export default 666;// 对外接口名为default,值为666;
    

    项目中常见的语法:

      import _ from 'lodash';
      import moment from 'moment';
    

    6.export 与 import 的复合语法

    在同一个模块,先输入再输出同一个模块;

    import { A, B } from 'my_module';
    export { A, B };
    

    可以改写成这种:

    export { A, B } from 'my_module'
    

7.模块的继承

在 A 文件中,export 来自B 文件的方法和属性,并且同时 export 自身的方法和属性;那么A 文件就继承了 B 文件的方法和属性;

8.跨模块常量

某个值要被多个模块共享,可以将不同的常量放在不同常量文件中,在一个主文件中合并;在其它模块使用时,直接引入主文件。

9.import()

我的理解如下,首先 import 命令是静态分析的,并不能在代码运行时加载模块;因此为了弥补这一点,有一个提案,建议引入 import()。该方法返回一个Promise对象,且是运行时执行的,类似于 Node 的 require方法

  • 适用场合:
    1) 按需加载
    2)条件加载
    3)动态的模块路径
    ⚠️import() 加载模块成功以后,这个模块会作为一个对象,当作then方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。
好难啊

相关文章

  • 前端模块化:ES6,CommonJS

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

  • 模块(一) CommonJs,AMD, CMD, UMD

    系列文章导航 模块(二) es6 module typescript module 本文参考Javascript模...

  • js之模块化(3)

    随着ES6 Module的出现,我们在项目中也大概率的采用了ES6 Module的写法,主要是采用import 和...

  • ES6语法

    ES6 Module 在 ES6 Module出现之前,有3种模块化方案 AMD 浏览器端 CMD 服务器端 Co...

  • 2020-04-22

    分类: es6: import / exportcommonjs: require / module.export...

  • CommonJs模块规范中module.exports和expo

    之前简单总结过ES6中的export/import模块规范(ES6中的export/import module 基...

  • 学习webpack【第三章-核心概念2】

    一、Hot Module Replacement 热模块替换 二、使用babel处理ES6 ———————————...

  • 2020-04-16

    #ES6中的两个导出 1、export页面引用时候imprt {module1,module2} from 'xx...

  • webpack-02

    解析ES6和ReactJSX 解析ES6使用的是babel-loader,我们首先需要做在module的rules...

  • BigNumber 讲解

    安装 Browser: Node.js: ES6 module (bignumber.mjs): AMD load...

网友评论

      本文标题:ES6 - Module

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