如何编写模块化 JavaScript 代码（库）

Question

我一直在研究这个小片段：

var a;
var b;
var c;

function generateResult() {
    // Custom variables
    var a = parseInt(document.getElementById("firstNumber").value);
    var b = document.getElementById("operator").value;
    var c = parseInt(document.getElementById("secondNumber").value);

    console.log(a);
    console.log(b);
    console.log(c);

    var calc = function(a, b, c) {
        var result;

        if (b == "+") {
            console.log("Now in sum");
            result = a + c;
            return result;
        }

        else if (b == "-") {
            console.log("Now in sub");
            result = a - c;
            return result;
        }

        else if (b == "/") {
            console.log("Now in div");
            result = a / c;
            return result;
        }

        else if (b == "*") {
            console.log("Now in tim");
            result = a * c;
            return result;
        }
    }

    document.getElementById("result").innerHTML = (calc(a, b, c));
}

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
</head>

<body>

<form>
    <h1>Calculator (basic)</h1><br><br>

    First input:<br>
    <input type="number" id="firstNumber"><br><br>

    <select id="operator">
        <option id="sum" value="+">+</option>
        <option id="sub" value="-">-</option>
        <option id="div" value="/">/</option>
        <option id="tim" value="*">*</option>
    </select><br><br>

    Second input:<br>
    <input type="number" id="secondNumber"><br><br>
</form>

<button onclick="generateResult()">=</button><br><br>

<h3 id="result"></h3>

</body>

<script src="script.js" defer></script>

</html>

我希望这段代码是模块化的，这样每个人都可以实现。像这样：http://semester4.nl/bounce/demo/

我一直在努力学习一些基础知识 javascript。有人向我建议我应该尝试编写我的代码模块化（即使是像这样简单的东西）。我用过这个教程：https://www.youtube.com/watch?v=pOfwp6VlnlM 到目前为止运气不好，有人可以帮我吗？

谢谢！

Answer 1

您可以将此代码包装在 IIFE 中。

(() => {
    // your code
})();

如果你有很多文件，最好使用 Webpack，它可以帮助你工作，使用 AMD 或 CommonJS。

其他选项是使用 ES Modules，在没有 Webpack 的情况下应该可以工作。

如何编写模块化 JavaScript 代码（库）

How to write modular JavaScript code (library)

html

javascript

modular