拆分一个 JavaScript 项目

Splitting up a javascript project

本文关键字：一个 JavaScript 项目 拆分      更新时间：2023-09-26

我越来越多地看到大型javascript项目被拆分为单独的文件，然后编译成单个发行版。我想尝试一下这个工作流程。我一直在研究Node.js，npm和Grunt，但这些都是非常陡峭的学习曲线，并且包含许多其他我目前不感兴趣的概念。

任何人都可以推荐一些关于这些工作流程的最佳实践的文献吗？

如果我将代码拆分，如何指示它应该如何映射在一起？

如何将项目编译为单个发行版？

如何为自定义版本提供选项？

让我们以jQuery为例。在典型情况下，您将有几个不同的文件组成一个项目;CSS File， HTML File， JavaScript File， jQuery File.所有这些文件将构成一个项目。那么，它们是如何流动的呢？好吧，如果你的自定义JavaScript文件正在利用jQuery，在你的HTML中，你需要首先加载jQuery文件，然后加载你的JavaScript文件。这样做的原因是，如果你先加载JavaScript文件，它还没有jQuery的代码，所以它不起作用。而当你首先加载jQuery时，你正在加载所有这些引用，以便它们可以在其他文件中使用。

您可以运行一个简单的测试来了解这一切是如何工作的，那就是创建 2 个单独的 JavaScript 文件。我们称之为 JS1.js 和 JS2.js。

网页文件 

<!DOCTYPE html />
    <html>
        <head>
            <link rel="stylesheet" href="theCSS.css" />
        </head>
        <body>
            <script type="text/javascript" src="JS1.js"></script>
            <script type="text/javascript" src="JS2.js"></script>
        </body>
    </html>

JS1.js

function fromJS1File() {
    var message = "Hello World";
    return message;
}

JS2.js

alert(fromJS1File());

当你运行它时，你会收到一条警告消息，说"Hello World" 现在，你可以看到 JS2.js 实际上是如何调用 JS1 的代码.js

现在，尝试在 HTML 代码中重新组织脚本标记，以便首先加载 JS2.js。您将看到没有任何反应，否则您将收到错误/未定义的消息。

至于"映射"部分，这一切都取决于您的操作流程。有时有公共或全局文件，而其他文件则更精细。最好的经验法则是回到jQuery文件示例。如果它适用于所有 JS 文件，请确保先加载它，以便其他代码文件可以利用它。

相关文章：