多个文件中的 JavaScript答案

【问题标题】：JavaScript in multiple files多个文件中的 JavaScript
【发布时间】：2010-03-13 17:13:55
【问题描述】：

我创建了两个 JavaScript 文件。一个文件是“validators.js”，另一个是“UserValidations.js”。

这是validators.js的代码

function isBlankString(value) {
    if (value.replace(/\s/g, "") == "") {
        return true;

    } else {
        return false;
    }
}

在其他 js 文件中，我已经定义了这样的验证用户名的函数。

function validateUsername(element) {

    var username = element.value;

    if(value.replace(/\s/g, "") == ""){
        //nothing to validate
        return;
    }else{
        //validation logic
    }

}

现在很明显我应该使用 isBlankString(value) 方法来检查字符串长度。但是我不知道如何使用其他文件中定义的函数？

【问题讨论】：

标签： javascript

【解决方案1】：

在实际使用该函数之前，必须在您的 HTML 文档中包含提供该函数的文件。

这意味着，可以肯定的是，validators.js 应该包含在 UserValidations.js 之前：

<script src="validators.js" type="text/javascript"></script>
<script src="UserValidations.js" type="text/javascript"></script>

【讨论】：

【解决方案2】：

确保您首先在页面上包含您的 validators.js 文件：

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

现在你可以正常使用那个功能了：

function validateUsername(element) {

    var username = element.value;

    if(isBlankString(value)){
        //nothing to validate
        return;
    }else{
        //validation logic
    }

}

【讨论】：

但是，这并不是一个可读性好的 js 文件。它不会是很好理解的代码文件。如果某个时候忘记添加一个文件，事情就会搞砸了。
我刚刚举了一个例子；关键是validtors.js应该在最上面。
@vijay 这是 JavaScript（以及所有其他语言）的完成方式。另一个文件是一个依赖，如果你忘记包含它，当然它不会工作。不要试图改变现有架构的工作方式，只需使用它即可。
公平地说，其他语言使包含更明确。 Python有import语句，在C/C++中你#include。
同意阿德里亚诺。 JS 与大多数其他语言的区别在于，大多数其他语言在源文件（或标题）中定义它们的依赖关系，而 JS 依赖于 HTML 来定义它。

【解决方案3】：

附带说明，您的 isBlankString 函数过于冗长。考虑用以下替换它

function isBlankString(value) {
    return value.replace(/\s+/g, "").length == "";
    // or even: return value.replace(/\s+/g, "").length == 0;
}

您拥有的if 语句完全没有必要。

【讨论】：

【解决方案4】：

只要您包含两个文件，您就可以调用它。 JavaScript 没有真正需要担心的命名空间概念。您可能会考虑将文件合并为一个，因为这样可以节省发送到服务器的 http 请求数。

【讨论】：

JavaScript 将作用域应用于变量和函数声明，但每个文件没有默认作用域。

【解决方案5】：

更重要的是，您在 window 对象中定义了两个函数。最好通过创建自己的命名空间来全局保护您的函数：

function isBlankString(value) {
    if (value.replace(/\s/g, "") == "") {
        return true;

    } else {
        return false;
    }
}

您应该将所有对象放在您自己的命名空间中，例如

Sarfraz.isBlankString = function (value) {
    if (value.replace(/\s/g, "") == "") {
        return true;

    } else {
        return false;
    }
}

以及其他功能。实际上，它们当前被定义为 window.isBlankString。如果您将其他人的 JavaScript 加载到您的页面中，您很可能会被覆盖。

对于您的主要问题，两者都应该在您执行之前加载。研究使用 jQuery 和 $(document).ready 功能。

始终先加载脚本，然后执行。同时加载和执行会招致灾难，通常没有必要。这样，您就不必担心将它们放在文件中的顺序。

【讨论】：

【解决方案6】：

一个不错的方法是在多个 js 文件中进行开发，然后在您的 make/build 系统中将它们组合在一起以创建一个 JavaScript 库。

有关进一步讨论和示例生成文件，请参阅此帖子：Makefile to combine js files and make a compressed version

您还可以压缩和缩小 javascript 以进一步减小文件大小：请参阅 Compressed JavaScript 或 Best JavaScript compressor

【讨论】：

【解决方案7】：

如果你在一个 HTML 文件中，只需在你的 HTML 中包含这两个文件。

【讨论】：

【解决方案8】：

只需将这两个文件都包含在您的 html 页面中，并在需要时调用函数。没有什么困难和困难的。或者在一个文件中使用其中的两个函数

【讨论】：