将 JavaScript 文件加载到客户端的模块模式中

Question

我有一个简单的JavaScript模块模式，可以在客户端执行。

var module = (function() {
var _privateVariable = 10;
function publicMethod () {
console.log("public method; private variable: " + _privateVariable);
}
return {
publicMethod: publicMethod
};
})();

假设我想从单独的 javascript 文件中加载另一个模块(它也使用模块模式(。我该怎么做，即像这样：

?? Load other module here ??
var _other_module = ??
var module = (function() {
var _privateVariable = 10;
function publicMethod () {
console.log("public method; private variable: " + _privateVariable);
console.log("public method; other module: " + other_module.publicMethod());
}
return {
publicMethod: publicMethod
};
})();

Answer 1

你不能。要从另一个文件加载另一个模块，您需要使用模块格式。

说来话长，我会尽量缩短。

让我们先谈谈旧的方式。 早些时候，开发人员习惯于在HTML页面中按特定顺序加载所有JS文件。如果我们有 2 个 JS-Files 索引.js 和变量.js并且我们想从 index.js 中的变量.js中获取一个变量，我们像这样加载它们

<script src="variables.js"></script>
<script src="index.js"></script>

但这不是一个好方法，有很多负面影响。

正确的方法是使用模块格式。

有许多模块格式，

• 异步模块定义 (AMD(
• 通用JS
• 通用模块定义 (UMD(
• 系统注册
• ES6 模块格式

每种格式都有自己的语法。

例如 CommonJS：

var dep1 = require('./dep1');  
module.exports = function(){  
// ...
}

但浏览器不明白这一点。 所以我们需要一个模块捆绑器或模块加载器 将我们的代码转换为浏览器可以理解的代码。

模块捆绑器：以正确的顺序捆绑相互依赖的 Javascript 文件

• 浏览器化
• 网络包

模块加载器：模块加载器解释和加载以某种模块格式编写的模块。

• 要求 JS
• 系统简斯

本文将帮助您准确了解模块的工作原理。

Answer 2

不确定您正在执行此操作的上下文。

但。在节点中.JS这通常由

module1.js

module.exports.publicMethod = function() {}

index.js

const module1 = require('./module1.js');
module1.publicMethod();

或

const {publicMethod} = require('./module1.js');
publicMethod();