模块化——import和require_import 解构 ts-CSDN博客

本文链接：https://blog.csdn.net/weixin_41387874/article/details/123057383

本文详细讲解了JavaScript模块化编程中的import和require的区别，包括模块化概念、引入规范、调用时机、本质及实际用法示例。了解如何通过require进行RHS赋值，以及import进行解构引用，有助于提升前端代码组织和性能。

摘要由CSDN通过智能技术生成

import和require

写在之前

import和require都是JS模块化编程使用的，用于提升前端性能。

对模块化的理解

模块化主要是将一整个系统拆分成各个独立的部分。
一个模块是完成某一个功能的一段代码（可以和组件相比较理解）。
在JAVA中模块化是将实现某个功能的一段代码封装成一个类，但是因为JavaScript中没有类（至少ES6之前没有类），因此JS借助了对象或构造函数来模拟类进而实现模块化。

引入规范

require/exports是commonJS引入。（commonJS默认导出的是一个对象）。
import/export是ES6引入。（因为存在浏览器兼容问题，需要在node中使用babel将ES6语法编译成ES5）。

调用时间

require是运行时调用，所以可以放在代码的任何地方。
import是编译时调用，所以必须放在文件开头。（因为编译时会做语法检查）

本质

require是赋值过程，它实际上就是RHS赋值。（值传递）。
import是解构过程，使用import导入模块的属性或方法是引用传递（将地址传入）。
语法用法展示
require用法
将模块A中要导出的数据放入module的exports属性中，假设模块B中要使用导出的这部分内容，那么可以在模块B中使用require导入，这时就会导出模块A中的exports属性并在模块B中执行RHS赋值操作。（执行浅拷贝）。

这里是模块A
module.exports = {
  a: function() {
    console.log('exports from module');
  }
}
这里是模块B
const obj = require('./moduleA.ts');
obj.a() //exports from module
当我们不需要导出模块A中的全部内容的时候
module.exports = {
  test: function(){
    console.log('test');
  },
  a: function(){
    console.log('exports from module')
  }
}
const { test } = require('./moduleA.ts');
我们使用解构赋值，使用大括号包裹住要导出的部分。
import用法
使用import导出的值和模块中的值始终保持一致，也就是引用拷贝，import采用解构赋值结合export使用。
使用export关键字标记要导出的内容，当test.js中需要导入这部分内容的时候，使用import，这时export就会将标记的内容导出，病执行引用传递（地址传递）。

这里是文件module.js
export function test(args){
  console.log(args);
}
export default{
  a: function(){
    console.log('export from module');
  }
}
export const name = 'aaa';
这里是文件test.js
import _, { test, name} from './module.js'
在test.js中，我们使用 _ 导出export default的内容。
import module from './module.js'
也可以这样导出默认导出的内容。
import {module as moduleA} from './module.js'
当出现有命名重复的时候，那么我们需要用到ES6中的对模块重命名的语法。上面是将module重命名为moduleA。