ES6模块

作者: 微语博客 | 来源:发表于2021-10-08 22:42 被阅读0次

    JavaScript没有统一模块化标准规范,所以ES6以前JavaScript程序都比较随意,没有模块化的程序大规模实现和扩展都很麻烦。为了让JavaScript代码更容易管理也约定了一些规范,比如 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库)。ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6 的模块化分为导出(export) @与导入(import)两个模块。

    export

    模块导入导出各种类型的变量,如字符串,数值,函数,类。

    /*-----export [test.js]-----*/
    let person = {
      name : "Cherry",
      age : 18,
      greet(){
          console.log(this.name + this.age);
      }
    }
    export {person}
    

    import

    不允许在加载模块的脚本里面,改写接口的引用指向,即可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import 。

    /*-----import [xxx.js]-----*/
    import {person} from "./test.js"
    
    console.log(person.name);//Cherry
    person.greet();//Cherry18
    

    import 是静态执行,所以不能使用表达式和变量。

    as的用法

    as 像是给不同模块起的别名,export 命令导出的接口名称,须和模块内部的变量有对应关系。导入的变量名,须和导出的接口名称相同,即但序可以不一致。

    let name = "Maria";
    export {name as maria}//以Maria名称导出
    
    import {maria} from './test.js'//以maria导入
    console.log(maria);//Maria
    

    export default

    在一个文件或模块中,export、import 可以有多个,export default 仅有一个。export default 中的 default 是对应的导出接口变量。通过 export 方式导出,在导入时要加{ },export default 则不需要。export default 向外暴露的成员,可以使用任意变量来接收。

    let name = "Crise";
    export default name;//仅有一个
    
    import names from "./test.js"; //不需要加{},可以用任意变量接收
    

    复合使用

    export 与 import 可以在同一模块使用,可以将导出接口改名,包括 default。复合使用 export 与 import ,也可以导出全部,当前模块导出的接口会覆盖继承导出的。

    import {name,age} from './test.js';
    export {name,age};
    //两句可以简写成
    export {name,age} from './test.js';
    
    //default互改名
    export {name as default} from './test.js';
    export {default as name} from './test.js';
    

    相关文章

      网友评论

        本文标题:ES6模块

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