简单写了个在前端也像Nodejs一样用require

简单写了个在前端也像Nodejs一样用require

在前端JavaScript中，我们通常使用import或require来引入模块。虽然浏览器本身并不支持Node.js的require语法，但我们可以通过一些工具（如Webpack、Rollup等）来实现类似的功能。

下面是一个简单的实现，模拟Node.js中的require功能，以便在前端页面中也能像Node.js一样使用require。

示例代码

假设我们有一个文件结构如下：

/project-root/
  /modules/
    sms.js
    msg.js
    send.js
  main.js

sms.js 文件内容如下：

// modules/sms.js
const temparr = [1, 2, 3];

export function open() {
  console.log("SMS module opened");
}

export function send() {
  console.log("Sending SMS...");
}

export { temparr };

msg.js 文件内容如下：

// modules/msg.js
export function open() {
  console.log("Message module opened");
}

send.js 文件内容如下：

// modules/send.js
export function open() {
  console.log("Send module opened");
}

export function send() {
  console.log("Sending message...");
}

main.js 文件内容如下：

// main.js
function require(moduleName) {
  const modules = {
    'sms': import('./modules/sms.js'),
    'msg': import('./modules/msg.js'),
    'sms/send': import('./modules/send.js')
  };

  return modules[moduleName].then((module) => {
    return module.default ? module.default : module;
  });
}

// 使用require加载模块
require('sms').then((sms) => {
  sms.open();
  sms.send();
  console.log(sms.temparr);
});

require('msg').then((msg) => {
  msg.open();
});

require('sms/send').then((send) => {
  send.open();
  send.send();
});

解释

1. 模块定义：我们在sms.js、msg.js 和 send.js 中定义了导出函数和变量。
2. require模拟：require 函数通过动态导入（import()）来加载模块，并返回一个Promise。
3. 使用require：在main.js中，我们通过调用require并传入模块名来加载模块，并使用.then()方法处理异步加载的结果。

这种方法使得我们在前端也可以像Node.js一样使用require来组织和管理代码，从而提高代码的可维护性和复用性。