JavaScript 程序中的多个文件

Multiple files in a JavaScript program

本文关键字：文件 程序 JavaScript      更新时间：2023-09-26

我是JavaScript的新手，我试图弄乱这门语言以更好地掌握它。我似乎无法理解的一件事是开发人员如何构建大型JavaScript程序。我假设你会像在 Java 中那样将其分解成一堆较小的文件。显然你不会在JavaScript中这样做。所有内容都在一个大文件中吗？这对我来说似乎是不正确的。

例如，我想有两个文件，一个包含我的所有帮助程序函数，另一个包含特定于问题的函数。我计划在我的问题特定文件中使用帮助程序函数。

如果我应该把东西放在一个大文件中，我是否将其与模块分开？很抱歉这么长的帖子，我很困惑，我不确定我应该如何措辞。

这实际上取决于您的应用程序有多大。如果是一次性表单处理程序，则可以将所有逻辑放在一个文件中。但是，如果它是一个较大的单页应用程序，则需要将其分解为多个文件。文件之间的交互方式取决于它们在页面中的包含顺序。例如，如果一个文件依赖于另一个文件，请确保该脚本包含在主脚本之后的页面中。

为了帮助更好地组织您的依赖项（而不是自己管理脚本包含顺序），并让您走上正轨，您可能应该看看 RequireJS：http://requirejs.org/docs/start.html

这是第三方介绍和教程http://javascriptplayground.com/blog/2012/07/requirejs-amd-tutorial-introduction/

至于您的模块模式问题，

您可以使用模块模式，但如果一个文件中的一个模块依赖于单独文件中的另一个模块，您仍然会遇到相同的依赖问题。你可能想看看Eloquent Javascript的这一章：http://eloquentjavascript.net/chapter9.html

你不需要任何花哨的js插件来做到这一点，只需在html中的主js文件之前包含你的"头文件"（你所有的函数声明）。

例：

文件1.js：

//declare your functions here
function handyFunction() {
 //do some handy stuff
}

文件2.js：

//use them here
handyFunction();

.html：

<body>
<!-- all your html here -->
<script src="file1.js" type="text/javascript"></script>
<script src="file2.js" type="text/javascript"></script>
</body>
如果您不喜欢将所有

内容都放在全局对象上，则可以拥有包含所需方法的对象，并根据需要创建这些方法的实例，或者访问以前创建的实例。举个简单的例子：

MyObject.js：

function MyObject() {
    this.property = "someValue";
}
MyObject.prototype.someMethod = function () {
    //do something
}

主.js：

var obj= new MyObject();
obj.someMethod();

.html：

<!-- always remember to include your files in the correct order -->
<script src="MyObject.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>

好的，最后一个澄清。在 JavaScript 中，每个变量都在函数的作用域内声明，除非没有变量，在这种情况下，它被附加到窗口对象中。这称为函数作用域，与其他语言有很大的不同。这意味着您在文件中声明的所有内容都将 1） 附加到全局对象（窗口）或 2） 只能由声明它的函数访问。因此，如果你想"匿名化"一些代码，你可以在它周围包装一个自动执行的匿名函数，并且由于该函数没有变量引用它，因此它之外的任何人都无法访问该代码。这就是为什么你在很多地方看到(function() { /*...*/}());。那么，如何在文件之间共享以这种方式声明的代码呢？很简单，给它起个名字！从而创建了模块模式。在第一个文件中，您将所有代码声明在名为"module"的变量或任何浮动山羊的变量中，并在其中以您喜欢的最奇特的方式放置所有方法（例如，通过使用匿名函数并返回一个对象）。诀窍是在全局对象上声明此"模块"对象，以便能够跨应用程序中的文件使用它。真的没有更多的东西了。

相关文章：