脚本组织模式（MVC + jQGrid）

Question

我正在构建一个 MVC Web 应用程序，大量使用 ajax 加载的包含 jQGrids 和 javascript 的部分视图。许多部分视图仅包含 2 个 div 标签，其余部分是 javascript。

对我来说，使用脚本标签使一般页面结构更具逻辑性，因为 JavaScript 就是我所看到的页面内容。

然而，还有 jQGrid 使用的小型实用函数，例如格式化函数，并且我开始发现同名脚本执行几乎相同任务的风险越来越大。

格式化函数的示例：

    function primaryRoleFormatter(cellvalue, options, rowObject) {
        switch (cellvalue) {
            case "1":
                return "<%= Resource.PRIMARY %>";

            default:
                break;
        }

        return "";
    };

起初，我看到格式化函数属于最近的网格，特别是因为可能有其他网格具有相同名称的格式化函数，但代码中存在一些细微的差异。

我同时加载两个或多个网格，如果存在名称冲突，JavaScript 似乎足够聪明，可以使用当前脚本块中定义的脚本，因此除了烦人的想法之外，没有任何问题，“这是最好的方法吗？”做这个？”。

还有用于从网格操作中加载 ajax 和显示 jQuery 对话框的脚本。我认为脚本会随着时间的推移而增加。

我应该将脚本保留在使用它们的地方还是应该尝试构建某种类型的脚本库？

如果我应该将它们移到脚本文件中，那么对函数（名称）进行分区的明智方法是什么？ 、类、文件...）？ 如果我将它们移出，它们是否会被认为更不引人注目，因为这种类型的页面已经由 ajax 本身加载并包含 95% 的 JavaScript？

我意识到存在类似问题，但我没有找到任何合适的答案。如果有问题，我会删除它。

Answer 1

对象文字

避免不必要的全局命名空间污染的最简单方法是将相关函数放在对象文字：

var Formatter = {

    primaryRoleFormatter: function(cellvalue, options, rowObject) {
        switch (cellvalue) {
            case "1":
                return "<%= Resource.PRIMARY %>";
            default:
                break;
        }
        return "";
    },

    someOtherFormatter: function() {

    }
}

然后可以像这样使用：

Formatter.primaryRoleFormatter(cellvalue, options, rowObject);
Formatter.someOtherFormatter();

这会导致全局对象上有一个属性，而不是您定义的每个函数都有一个属性。

模块模式

或者您可以隐藏具有函数作用域的内容：

var Formatter = (function() {

    function FormatterCtor() {
        // instance-ish level func
        this.onePerInstance = function() {}
    }

    // not accessible from the outside; not in the global namespace
    function privateFunction() {}

    // class-ish level func
    FormatterCtor.oneShared = function() {}

    return FormatterCtor;

})(); // self-executing

可以这样使用：

var fmt = new Formatter();
fmt.onePerInstance();

无论哪种情况，您最终都会在全局命名空间中得到一个变量，这是一个胜利。