• ES6必知必会 (九)—— Module


    Module

    1.ES6在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范,基本特点如下:

    • 每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取;
    • 每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
    • 模块内部的变量或者函数可以通过export导出;
    • 一个模块可以导入别的模块

    2.模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能;

    3.一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量;

    // profile.js
    export var firstName = 'Michael';
    export var lastName = 'Jackson';
    export var year = 1958;
    
    //或者
    // profile.js
    var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    
    export {firstName, lastName, year};
    

    4.export命令除了输出变量,还可以输出函数或类(class)

    export function multiply(x, y) {
      return x * y;
    };
    

    一般来说,export 输出的变量就是本来的名字,但是可以使用 as 关键字重命名

    function Module1() { ... }
    function Module2() { ... }
    
    export {
      Module1 as Func1,
      Module2 as Func2
    };
    

    5.export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值;

    export var str = 'hello';
    setTimeout(() => str = 'world', 1000);
    console.log(str)
    

    上面代码输出变量str,值为hello,1秒之后变成world。

    6.export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错;

    function foo() {
      export default 'bar' // SyntaxError
    }
    foo()
    

    7.使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块,import命令接受一对大括号,里面指定要从其他模块导入的变量名,大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同;

    // main.js
    import {firstName, lastName, year} from './profile';
    
    function say() {
      console.log('Hello , ' + firstName + ' ' + lastName);
    }
    

    上面代码的 import 用于加载 profile.js 文件,并从中输入变量。

    8.如果想为输入的变量重新取一个名字,也可以使用 as 关键字,将输入的变量重命名。

    import { lastName as secondName } from './profile';
    

    9.import 后面的 from 指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置;

    import { methods } from 'util';
    

    10.import命令具有提升效果,会提升到整个模块的头部,首先执行

    func();
    
    import { func } from 'methods';
    

    上面的代码不会报错,因为 import 的执行早于 func 的调用。因为 import 命令是编译阶段执行的;

    11.由于import是静态执行,所以不能使用表达式和变量

    // 报错
    import { 'f' + 'oo' } from 'methods';
    
    // 报错
    let module = 'methods';
    import { foo } from module;
    
    // 报错
    if (x === 1) {
      import { foo } from 'module1';
    } else {
      import { foo } from 'module2';
    }
    

    上面三种写法都会报错,因为它们用到了表达式、变量和 if 结构。在静态分析阶段,这些语法都是没法得到值的;

    12.import 除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面

    // tools
    
    export function circleArea(r){
        return Math.PI * r * r ;
    }
    
    export function rectArea( w , h ){
        return w * h ;
    }
    
    // main.js
    //逐一加载
    import { circleArea , rectArea } from './tools';
    
    console.log( '圆的面积是:' + circleArea( 5 ) );
    console.log( '矩形的面积是:' + rectArea( 5 , 6 ) );
    
    //整体加载
    import * as area from './tools';
    
    console.log( '圆的面积是:' + area.circleArea( 5 ) );
    console.log( '矩形的面积是:' + area.rectArea( 5 , 6 ) );
    

    不要尝试去在运行时去改变模块整体加载所在的对象(即上例中的area)的值,是不允许的;

    13.export default命令,为模块指定默认输出,这样就可以在使用 import 命令的时候,不必知道所要加载的变量名或函数名;

    // export-default.js
    export default function () {
      console.log('foo');
    }
    
    // import-default.js
    import customName from './export-default';
    customName(); 
    // 'foo'
    

    上面代码是一个模块文件 export-default.js,它的默认输出是一个函数,在其他模块加载该模块时,import 命令可以为该匿名函数指定任意名字,这时import命令后面,不使用大括号;

    14.export default命令用在非匿名函数前,也是可以的。

    // export-default.js
    export default function foo() {
      console.log('hello world');
    }
    
    // 或者写成
    
    function foo() {
      console.log('hello world');
    }
    
    export default foo;
    

    要注意的是,一个模块只能有一个默认输出,因此 export default 命令只能使用一次。所以,import 命令后面才不用加大括号,因为只可能对应一个方法;实际本质上,export default 就是输出一个叫做 default 的变量或方法,系统允许你为它取任意名字;

    // modules.js
    function add(x, y) {
      return x + y;
    }
    export { add as default };
    // 等同于
    // export default add;
    
    // app.js
    import { default as xxx } from 'modules';
    // 等同于
    // import xxx from 'modules';
    

    15.由于 export default 命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句;

    // 正确
    export var a = 1;
    
    // 正确
    var a = 1;
    export default a;  //等同于将变量 a 的值赋给变量 default
    
    // 错误
    export default var a = 1;
    

    16.export default也可以用来输出类。

    // MyClass.js
    export default class { ... }
    
    // main.js
    import MyClass from 'MyClass';
    let o = new MyClass();
    

    17.如果在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起;

    export { foo, bar } from 'module';
    
    // 等同于
    import { foo, bar } from 'module';
    export { foo, bar };
    

    18.const声明的常量只在当前代码块有效。如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享,可以采用下面的写法:

    // constants.js 模块
    export const A = 1;
    export const B = 2;
    
    // test1.js 模块
    import * as constants from './constants';
    console.log(constants.A); // 1
    console.log(constants.B); // 2
    
    // test2.js 模块
    import {A, B} from './constants';
    console.log(A); // 1
    console.log(B); // 2



  • 相关阅读:
    Java实现 蓝桥杯 算法训练 画图(暴力)
    Java实现 蓝桥杯 算法训练 画图(暴力)
    Java实现 蓝桥杯 算法训练 相邻数对(暴力)
    Java实现 蓝桥杯 算法训练 相邻数对(暴力)
    Java实现 蓝桥杯 算法训练 相邻数对(暴力)
    Java实现 蓝桥杯 算法训练 Cowboys
    Java实现 蓝桥杯 算法训练 Cowboys
    55. Jump Game
    54. Spiral Matrix
    50. Pow(x, n)
  • 原文地址:https://www.cnblogs.com/wntd/p/9013323.html
Copyright © 2020-2023  润新知