zoukankan      html  css  js  c++  java
  • require/exports 和 import/export 区别

    零、区别

    1、require/exports 是 CommonJS 的标准,适用范围如 Node.js

    2、import/export 是 ES6 的标准,适用范围如 React

    一、间接获取对象

    (1)require/exports

    module.js

    exports.name = "colin";
    exports.sayHello = function() {
        console.log("hello");
    };
    
    方法一 间接

    getModule.js

    var myModule = require('./module');
    console.log(myModule.name);
    myModule.sayHello();
    
    方法二 直接

    getModule.js

    var { name, sayHello } = require('./module');
    console.log(name);
    sayHello();
    
    方法三 别名

    getModule.js

    var { name: name_2, sayHello: sayHello_2 } = require('./module');
    console.log(name_2);
    sayHello_2();
    

    (2)import/export

    module.js

    export const name = 'colin';
    export function sayHello(){
        console.log("hello");
    }
    
    方法一 间接 (不可用)

    getModule.js

    import myModule from './module'  
    console.log(myModule.name);
    myModule.sayHello();
    

    报错如下:

    "export 'default' (imported as 'myModule') was not found in '@cp/utils/format'

    方法二 直接

    getModule.js

    import { name, sayHello } from './module'  
    console.log(name);
    sayHello();
    
    方法三 别名

    getModule.js

    import { name as name_2, sayHello as sayHello_2 } from './module'  
    console.log(name_2);
    sayHello_2();
    

    二、直接获取对象

    (1)require/exports

    module.js

    var name = "colin";
    module.exports = name;
    

    getModule.js

    var name = require('./module');
    console.log(name);
    

    (2)import/export

    module.js

    export default name = 'colin';
    

    getModule.js

    import name from './module' 
    console.log(name);
    

    三、拓展

    上面介绍的都是加载 js 文件,但是也可以加载 json 文件。

    下面以 require/exports 为例 (不需要加上 exports 即可直接导出)

    module.json

    {
      "name": "a",
      "age": 18
    }
    

    getModule.js

    const name = require('./module');
    const {name, age} = require('./module'); 
    
  • 相关阅读:
    简单方法实现无刷新提交Form表单
    [LeetCode] 654. Maximum Binary Tree
    [LeetCode]3. Longest Substring Without Repeating Characters
    《设计模式之禅》读书笔记(四)之抽象工厂模式
    《设计模式之禅》读书笔记(三)之扩展工厂方法模式
    《设计模式之禅》读书笔记(二)之工厂方法模式
    《将博客搬至CSDN》
    php解析excel文件
    git 删除分支
    git 修改注释信息
  • 原文地址:https://www.cnblogs.com/xjnotxj/p/7441080.html
Copyright © 2011-2022 走看看