js的导入导出总结import和require区别

最新推荐文章于 2024-05-10 10:32:07 发布

负者歌于途，

最新推荐文章于 2024-05-10 10:32:07 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_36893984/article/details/109747982

Vue 专栏收录该内容

28 篇文章

订阅专栏

博客介绍了CommonJS规范的require和ES6的import两种模块导入方式。require通过定义module.exports导出对象，在其他文件用require引入；import要与export结合使用。还阐述了CommonJS模块与ES6模块的区别，如输出是值拷贝还是引用、加载时机等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导出===
es5:
module exports  = {
    a:a,
    b,b
}
es6:
export default {
    a:a,
    b:b
}
导入===
es5

export default 和 export 区别
1 、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个
4、通过export方式导出，在导入时要加{ }，export default则不需要

一.require

require是Commonjs的规范，node应用是由模块组成的，遵从commonjs的规范。用法：

a.js


function test (args) {
  // body...
  console.log(args);	
}
 
module.exports = {
  test
};

b.js


let { test } = require('./a.js');
 
test('this is a test.');

require的核心概念：在导出的文件中定义module.exports，导出的对象类型不予限定（可为任意类型）。在导入的文件中使用require()引入即可使用。本质上，是将要导出的对象，赋值给module这个对象的exports属性，在其他文件中通过require这个方法来访问exports这个属性。上面b.js中，require(./a.js) = exports 这个对象，然后使用es6取值方式从exports对象中取出test的值。

二.import

import是es6为js模块化提出的新的语法，import （导入）要与export（导出）结合使用。用法：

a.js


export function test (args) {
  // body...
  console.log(args);	
}
 
// 默认导出模块，一个文件中只能定义一个
export default function() {...};
 
export const name = "lyn";

b.js


// _代表引入的export default的内容
import _, { test, name } from './a.js';
 
test(`my name is ${name}`);

三、commonjs模块与ES6模块的区别

1.commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；

2.commonjs是运行时加载，es6是编译时输出接口；

CommonJS是对模块的浅拷贝，ES6 Module是对模块的引用,即ES6 Module只存只读，不能改变其值，具体点就是指针指向不能变，类似const
import的接口是read-only（只读状态），不能修改其变量值。即不能修改其变量的指针指向，但可以改变变量内部指针指向,可以对commonJS对重新赋值（改变指针指向），

CommonJS和ES6 Module都不可以对引入的对象进行赋值，即对对象内部属性的值进行改变。
但是可以添加属性

<script type="text/javascript">
            // lib.js
            export let obj = {};
            
            // main.js
            import { obj } from './lib';
            
            obj.prop = 123; // OK
            obj = {}; // TypeError
        </script>