脚本组织模式（MVC + jQGrid）

Question

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

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

但是，jQGrid 也使用了小型实用程序函数，例如格式化函数，我开始看到同名脚本执行几乎相同任务的风险越来越大。

格式化函数示例：

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

            default:
                break;
        }

        return "";
    };

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

我同时加载两个或多个网格，如果有名称冲突，似乎 javascript 足够聪明，可以使用当前脚本块中定义的脚本，所以除了唠叨之外没有问题，“这是最好的方法？”。

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

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

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

我知道有类似的问题，但我没有找到任何合适的答案。如果这有问题，我会删除它。

Answer 1

Object Literals

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

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();

这会在全局对象上产生一个属性，而不是为您定义的每个函数一个属性。

Module Pattern

或者你可以用函数范围隐藏东西：

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();

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