时间戳

首页 > 解决方案 > 如何编写模块化 JavaScript 代码（库）

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

问题描述

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

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 到目前为止没有运气，有人可以帮助我吗？

谢谢！

标签： javascripthtmlmodular

解决方案

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

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

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

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

推荐阅读