前端模块化编程-require和import详解

2023-09-30 09:08:27

前端模块化编程概述

模块化编程是一种将程序分解成独立、可重用的模块的软件设计技术。在前端开发中，模块化编程可以帮助我们组织和管理代码，使代码更易于维护和复用。

CommonJS思想

CommonJS是JavaScript中实现模块化编程的规范。在CommonJS中，有一个全局性方法require()，用于加载模块。模块写法分exports和module.exports。

exports是一个对象，用于导出模块的成员。例如：

// module1.js
exports.name = 'module1';
exports.sayHello = function() {
  console.log('Hello from module1!');
};

module.exports也是一个对象，但它只能导出一个成员。例如：

// module2.js
module.exports = {
  name: 'module2',
  sayHello: function() {
    console.log('Hello from module2!');
  }
};

require()方法

require()方法用于加载模块。它接受一个参数，即模块的路径。例如：

// main.js
const module1 = require('./module1');
const module2 = require('./module2');

module1.sayHello(); // Hello from module1!
module2.sayHello(); // Hello from module2!

import语句和ES6模块

ES6中引入了一种新的模块化编程语法，即import语句和ES6模块。import语句用于导入模块，ES6模块是一种特殊的JavaScript模块，它可以使用import语句导入。

// module1.js
export const name = 'module1';
export function sayHello() {
  console.log('Hello from module1!');
}

// main.js
import { name, sayHello } from './module1';

name; // 'module1'
sayHello(); // Hello from module1!