zoukankan      html  css  js  c++  java
  • export,export default,module.exports,import,require之间的区别和关联

    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 myModule from './MyModule.js'
    console.log(temp.age); // 7 
    console.log(temp.sayHelloTo("Steve")); // hello Steve
    

    额外说明:对于自定义的模块,需要使用相对路径,否则会提示找不到模块/组件(默认情况下,非相对路径的引用,会从node_modules文件夹中查找)

    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的联系
    

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

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

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

    MDN对于export和import的语法说明:

    export语法:
        export { name1, name2, …, nameN };
        export { variable1 as name1, variable2 as name2, …, nameN };
        export let name1, name2, …, nameN; // also var, const
        export let name1 = …, name2 = …, …, nameN; // also var, const
        export function FunctionName(){...}
        export class ClassName {...}
    
        export default expression;
        export default function (…) { … } // also class, function*
        export default function name1(…) { … } // also class, function*
        export { name1 as default, … };
    
        export * from …;
        export { name1, name2, …, nameN } from …;
        export { import1 as name1, import2 as name2, …, nameN } from …;
        export { default } from …;
    
    import语法:
        import defaultExport from "module-name";
        import * as name from "module-name";
        import { export } from "module-name";
        import { export as alias } from "module-name";
        import { export1 , export2 } from "module-name";
        import { export1 , export2 as alias2 , [...] } from "module-name";
        import defaultExport, { export [ , [...] ] } from "module-name";
        import defaultExport, * as name from "module-name";
        import "module-name";
        var promise = import(module-name);
    

    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';
      
    4. 通过 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;
    
  • 相关阅读:
    java 8 , merge()
    2026 11 12
    koda java
    Linq实现between拓展
    WinForm开发----关闭window窗体最好的办法
    ASP.NET中指定自定义HTTP响应标头
    使用Zxing.net实现asp.net mvc二维码功能
    实现asp.net mvc页面二级缓存,提高访问性能
    队列应用
    Ubuntu 12.04使用uginx+fastcgi-mono-server2部署asp.net 网站
  • 原文地址:https://www.cnblogs.com/deepthought/p/11373568.html
Copyright © 2011-2022 走看看