概述
我们在写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 模块(通过