将 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

不确定您在哪个上下文中执行此操作。

但是。在 node.JS 这通常由

完成

module1.js

module.exports.publicMethod = function() {}

index.js

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

或

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

Answer 2

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

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

先说老办法吧。早些时候，开发人员习惯于在 HTML-Page 中以特定顺序加载所有 JS 文件。如果我们有 2 个 JS 文件 index.js 和 variables.js 并且我们想从 varible.js 中获取一个变量 index.js，我们就这样加载它们

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

但这不是一个好方法，而且有很多负面因素。

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

模块格式很多，

异步模块定义 (AMD)
CommonJS
通用模块定义 (UMD)
System.register
ES6 模块格式

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

例如 CommonJS：

var dep1 = require('./dep1');  

module.exports = function(){  
   // ...
}

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

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

浏览器化
Webpack

模块加载器：模块加载器解释并加载以特定模块格式编写的模块。

RequireJS
SystemJS

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

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

Load a javascript file into a module pattern on Client-side

javascript

module-pattern