JavaScript之import&require总结

概述

我们在写js代码时，为了方便维护，会使用高内聚低耦合的方式把不同的功能写入不同的文件中，但是不同的文件如何交互呢？
这个时候我们的import、require就可以出场了，它们就是为了解决在A文件中引入B文件中的内容的。
因此我们可以大胆的猜测，有import应该就有export，这是因为js语言不是面向对象的语言，无法像java那样直接导入其他类文件就好，需要显示的指出哪些对象要导出。

import用法

当使用import导入模块时，这通常是在支持ES6模块的环境中进行的。
下面给一个import导入的用例。

创建一个简单的ES6模块

// myES6Module.js
// 导出一个简单的函数
export function sayHello(name) {
    return `Hello, ${name}!`;
}
// 导出一个对象
const userInfo = {
    name: 'John Doe',
    age: 30,
    greet() {
        return `Hello, I'm ${this.name}.`    
    }
}
export {userInfo}
// 导出一个函数
export default function defaultGreeting() {
    return 'Hello from default export!'
}

使用import导入ES6模块

在另一个js文件中，我们使用import来导入这个模块，并使用它导出的内容。

// app.js
// 导入命名函数和对象
import {sayHello, userInfo} from './myES6Module.js'
// 使用导入的函数和对象
console.log(sayHello('World'))
console.log(userInfo.greet())
// 导入默认导出
import defaultGreeting from './myES6Module.js'
// 使用默认导出的函数
console.log(defaultGreeting())
// 可以重命名导入的对象
import {sayHello as greet, default as defaultFunc} from './myES6Module.js'
console.log(greet('Alice'))
console.log(defaultFunc())

ES6模块是静态的，这意味着你不能在函数或条件语句中动态的import模块。相反，你应该在文件的顶部使用import语句。此外，ES6模块支持异步加载模块，通过import()语法。

require用法

通常我们在node.js环境中使用require导入模块。
下面是一个require的示例，展示了如何创建和导入模块。

创建一个简单的模块

// myMoudle.js
// 这是一个简单的函数
function sayHello(name) {
    return `Hello, ${name}`
}
// 定义一个对象
const userInfo = {
    name:'John Doe',
    age: 30,
    greet: function() {
        return `Hello, I'm ${this.name}.`    
    }
}
module.exports = {
    sayHello,
    userInfo
}

require导入模块

在另一个js文件中，使用require来导入这个模块，并使用它的导出内容。

// app.js
// 导入模块
const myModule = require('./myModule')
// 使用模块导出的函数
console.log(myModule.sayHello('World'))
// 使用模块导出的对象
console.log(myModule.userInfo.greet()))

可以直接导出函数或对象

你也可以直接在模块中使用
module.exports 导出函数或对象，而不是将它们包装在一个对象中。

// myFunction.js  
  
function myFunction() {  
    return 'This is a function!';  
}  
// 直接导出函数  
module.exports = myFunction;

然后，在另一个文件中导入并使用它：

const myFunction = require('./myFunction.js')
console.log(myFunction())

import与require对比

在JavaScript中，import和require是用于导入模块或库的两种主要方式，但他们属于不同的模块系统：import是ES6引入的模块导入语法，而require是CommonJS模块规范的一部分，通常用于Node.js环境。

import的用法

在 ES6 模块中，import 语句用于导入由另一个模块导出的绑定。

// 导入整个模块
import * as moduleName from 'module-name'
// 导入默认导出
import defaultExport from 'module-name'
// 导入命名导出
import {exportName} from 'module-name'
// 导入多个命名导出
import {export1, export2} from 'module-name'
// 重命名导入的绑定
import {exportName as newName} from 'module-name'

require的用法

在CommonJS模块中，require函数用于导入模块。

// 导入整个模块
const moduleName = require('module-name')
const someFunction = moduleName.someFunction
// 如果模块导出一个具体的对象，比如module.exports = myFunction; 可以直接调用导出的对象
const functionName = require('module-name');
console.log(functionName())

import和require的区别

• 语法：import 是静态的，它不能放在函数或条件语句中。而 require 是动态的，可以在运行时解析模块。
• 默认值：import 可以导入默认导出和命名导出，而 require 导入的是整个模块对象，需要显式地从该对象中选择所需的导出。
• 模块系统：import 是 ES6 模块系统的一部分，而 require 是 CommonJS 模块系统的一部分。浏览器支持 ES6 模块（通过