美文网首页
export,,export default,import ||

export,,export default,import ||

作者: 16manman | 来源:发表于2018-11-20 11:11 被阅读0次

    参考地址 https://www.jianshu.com/p/be2d4eab3878

    module.exports

    Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在这些文件里面定义的变量、函数、类,都是私有的,对外不可见,因此规避掉了作用域污染。

    根据CommonJS规定,每个模块内部,module变量代表当前模块,这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实就是加载该模块的exports属性。

    举例:通过module.exports输出变量 age 和 sayHelloTo 函数。

    //./MyModule.js
        var age = 7; 
        var sayHelloTo= function (name) { 
            return "hello " + name;
        }; 
        module.exports.age = age; 
        module.exports.sayHelloTo=sayHelloTo;
    

    require:用于加载模块

    var temp = require('./MyModule.js');  
    //这里也可以使用 import temp from './MyModule.js'
    console.log(temp.age); // 7 
    console.log(temp.sayHelloTo("Steve")); // hello 
    

    exports 与 module.exports

    为了方便,node为每个模块提供了一个exports变量,指向module.exports。这等同于在每个模块头部,有这么一行代码:

    var exports = module.exports;
    

    因此,我们可以直接在exports对象上添加方法(等同于在 module.exports 添加一样)

    //./MyModule.js
        var age = 7; 
        var sayHelloTo= function (name) { 
            return "hello " + name;
        }; 
        exports.age = age;  //等效于:  module.exports.age = age;
        exports.sayHelloTo=sayHelloTo;  //等效于: module.exports.sayHelloTo=sayHelloTo;
    

    P.S.不能直接将exports指向一个值,这会切断 exports 与 module.exports 的联系(但是可以用module.exports来指向一个值)

    //./MyModule.js
        var age = 7; 
        var sayHelloTo= function (name) { 
            return "hello " + name;
        }; 
        exports = age;  //不要这么干。这么做会切断exports与module.exports的联系, require该文件会得到一个空对象
        module.exports = age; //这样写没有问题,require该文件会得到一个值7
    

    不同于CommonJS,ES6使用 export 和 import 来导入、导出模块

    用 export 导出的模块,需要用 import 来进行导入,而不能用 require。
    P.S.:export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应的关系

    const utils = {
        showSth : function(){
            console.log("showSth");
        },
        saySth : function(){
            console.log("saySth");
        }
    }
    //导出的3种方式
    // 方式1,这种方式在引用的时候需要这样: import {m} from './utils.js';
    export var m = utils; 
    // 方式2,用大括号来导出变量,如果导出的变量有多个,则{变量1,变量2,变量3...,变量N}。
    //这种方式在引用的时候需要这样: import {utils} from './utils.js';
    export {utils}; 
    // 方式3,这种方式在引用的时候需要这样: import {myUtils} from './utils.js';
    //在引用的地方,也可以直接指定别名,如:import {myUtils as utils} from './utils.js';
    export {utils as myUtils}; 
    

    export 和 export default

    1. export 和export default 均可用于导出(常量 | 函数 | 文件 | 模块)等。
    2. 可以在其他文件中通过 import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够进行使用。
    3. 在一个文件或者模块中,export、import 可以有多个,但 export default 仅有一个。
    const utils = {
        showSth : function(){
            console.log("showSth");
        },
        saySth : function(){
            console.log("saySth");
        }
    }
    const name = "my name is Artech";
    export {name}; //命名导出
    export {utils};
    
    //对于命名方式导出的,在导入的时候必须使用相应对象的相同名称
    //引用的时候:
    import {utils,name as myName} from './utils.js';
    
    1. 通过 export 方式导出,在导入时要用花括号{ };而通过 export default 方式导出的,则不需要:
    //如通过 export default 导出
      export default utils;  
    //则在使用的时候不用加花括号,且导入时的名字可以自定义,如:
      import myUtils from './utils.js';  //对于默认方式导出的,则导入的时候,名称可以随便取
    
    //默认导出:不能使用 let,var 或 const 作为默认导出
    

    import *

    将一个js文件中定义的方法,模块,对象等,全部导出,一般结合别名使用,如:

    //myModule.js
       export const fun1 = ()=>{}
       export const objInfo = {...};
    
    //demo.js:引用mymODULE。JS
        import * as myAlias from './myModule';
        //fun1()和objInfo都是定义在myModule中的方法和对象
        myAlias.fun1();
        myAlias.objInfo;
    

    补充:

    1. 如果用export default导出,然后用import * 引入
    //myModule.js
       export default {
        fun1: ()=>{},
        objInfo: {
          aaa: 'sss1'
        },
      }
    
    //demo.js:引用myModule.js
        import * as myAlias from './myModule';
        //fun1()和objInfo都是定义在myModule中的default的方法和对象
        myAlias.default.fun1();
        myAlias.default.objInfo;
    

    本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。所以,下面的写法是有效的。

    //demo.js:引用myModule.js
        import { default as myAlias } from './myModule';
        myAlias.fun1();
        myAlias.objInfo;
    

    正是因为export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句

    // 正确
    export var a = 1;
    
    // 正确
    var a = 1;
    export default a;
    
    // 错误
    export default var a = 1;
    

    上面代码中,export default a的含义是将变量a的值赋给变量default。所以,最后一种写法会报错。

    同样地,因为export default命令的本质是将后面的值,赋给default变量,所以可以直接将一个值写在export default之后。

    // 正确
    export default 42;
    
    // 报错
    export 42;
    

    2. export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
    //myModule.js
    export var foo = 'bar';
    setTimeout(() => foo = 'baz', 500);
    
    //demo.js:引用myModule.js
      import * as myAlias from './myModule';
      console.log(myAlias.foo); //bar
      setTimeout(() => {
        console.log(myAlias.foo); //baz
      },1000);
    
    

    这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新


    3. export 和 import 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,这是因为处于条件代码块之中,就没法做静态优化了,违背了 ES6 模块的设计初衷。
    function foo() {
      export default 'bar' // SyntaxError
    }
    foo()
    

    上面代码中,export语句放在函数之中,结果报错。


    4. import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口。
    import {a} from './xxx.js'
    
    a = {}; // Syntax Error : 'a' is read-only;
    

    上面代码中,脚本加载了变量a,对其重新赋值就会报错,因为a是一个只读的接口。但是,如果a是一个对象,改写a的属性是允许的。

    import {a} from './xxx.js'
    
    a.foo = 'hello'; // 合法操作
    

    上面代码中,a的属性可以成功改写,并且其他模块也可以读到改写后的值。不过,这种写法很难查错,建议凡是输入的变量,都当作完全只读,轻易不要改变它的属性。


    5. import命令具有提升效果,会提升到整个模块的头部,首先执行。
    foo();
    
    import { foo } from 'my_module';
    

    上面的代码不会报错,因为import的执行早于foo的调用。这种行为的本质是,import命令是编译阶段执行的,在代码运行之前。


    6. 由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
    // 报错
    import { 'f' + 'oo' } from 'my_module';
    
    // 报错
    let module = 'my_module';
    import { foo } from module;
    
    // 报错
    if (x === 1) {
      import { foo } from 'module1';
    } else {
      import { foo } from 'module2';
    }
    

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


    7.import语句会执行所加载的模块,因此可以有下面的写法。
    import 'lodash';
    

    上面代码仅仅执行lodash模块,但是不输入任何值。
    如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。

    import 'lodash';
    import 'lodash';
    

    上面代码加载了两次lodash,但是只会执行一次。

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

    上面代码中,虽然foobar在两个语句中加载,但是它们对应的是同一个my_module实例。也就是说,import语句是 Singleton 模式。


    8.目前阶段,通过 Babel 转码,CommonJS 模块的require命令和 ES6 模块的import命令,可以写在同一个模块里面,但是最好不要这样做。因为import在静态解析阶段执行,所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。
    require('core-js/modules/es6.symbol');
    require('core-js/modules/es6.promise');
    import React from 'React';
    

    9. 如果想在一条import语句中,同时输入默认方法和其他接口,可以写成下面这样。
    import _, { each, forEach } from 'lodash';
    

    对应上面代码的export语句如下。

    export default function (obj) {}
    export function each(obj, iterator, context) { }
    export function forEach () { }
    

    10. export default也可以用来输出类。
    // MyClass.js
    export default class { ... }
    
    // main.js
    import MyClass from 'MyClass';
    let o = new MyClass();
    

    11. export 与 import 的复合写法

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

    export { foo, bar } from 'my_module';
    
    // 可以简单理解为
    import { foo, bar } from 'my_module';
    export { foo, bar };
    

    上面代码中,exportimport语句可以结合在一起,写成一行。但需要注意的是,写成一行以后,foobar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foobar


    未总结的:

    模块的继承
    跨模块常量

    如果要使用的常量非常多,可以建一个专门的constants目录,将各种常量写在不同的文件里面,保存在该目录下。然后,将这些文件输出的常量,合并在index.js里面。

    import() - 提案

    importexport命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。

    这样的设计,固然有利于编译器提高效率,但也导致无法在运行时加载模块。在语法上,条件加载就不可能实现。如果import命令要取代 Node 的require方法,这就形成了一个障碍。因为require是运行时加载模块,import命令无法取代require的动态加载功能。

    const path = './' + fileName;
    const myModual = require(path);
    

    上面的语句就是动态加载,require到底加载哪一个模块,只有运行时才知道。import命令做不到这一点。

    因此,有一个提案,建议引入import()函数,完成动态加载。
    .....

    相关文章

      网友评论

          本文标题:export,,export default,import ||

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