绑定多个动态jqgrid时覆盖参数

Question

我有以下绑定 jqgrid 的代码。我的页面中有多个 jqgrid。 我通过下面的代码动态绑定所有。

var MyGridData = MyGridData || (function() {

return {
   init : function(Args) {
       _args = Args;
  },
initiateGrid: function() {
  this.fillGridSchema(_args[6]);
 },
fillGridSchema : function() {
   $('#' + _args[0]).jqGrid({

       //All basic code for binding jqgrid (url,colnames...)

   });
 }
}

当我想绑定我的 SalesInquiryDetails Grid 时，我会调用下面的代码。

MyGridData.init([ 'SalesInquiryDetails',...(other required args) ]);
MyGridData.initiateGrid();

如果我想绑定 SalesReferenceGrid 那么，

MyGridData.init([ 'SalesInquiryReference',...(other required args) ]);
MyGridData.initiateGrid();

现在，我每次都得到最后一个绑定网格的 _args。并且没有收到我为之前的网格定义的事件。

请指导我。 如何触发先前 args 数组中给出的先前网格事件函数。

提前致谢。

Answer 1

现在，我每次都得到最后一个绑定网格的 _args。

对，因为你只有一个_args 变量，它是一个全局变量。您的代码通过在松散模式下分配给未定义的符号而成为我所说的The Horror of Implicit Globals 的牺牲品，该符号会伸出并创建一个全局变量。 JavaScript 的主要缺陷之一，在 2009 年被严格模式修复。（我强烈推荐使用严格模式。）

为了拥有多个_args，您可能希望init 返回一些东西（一个对象），在其上存储_args，然后在该对象上调用initiateGrid。你的单例只能记住你设置的最后一个状态，所以不要让它成为单例。

您可以这样做的一种方法是使用标准构造函数：

var MyGridData = MyGridData || (function() {
    function MyGridData(args) {
        this.args = args;
    }
    MyGridData.prototype.initiateGrid = function() {
        this.fillGridSchema(this.args[6]);
    };
    MyGridData.prototype.fillGridSchema = function(/*shouldn't you be using an arg here, since you pass one in `initiateGrid`?*/) {
        $('#' + this.args[0]).jqGrid({
            //All basic code for binding jqgrid (url,colnames...)
        });
    };

    return MyGridData;
})();

// Usage
var salesDetailsGrid = new MyGridData([ 'SalesInquiryDetails',...(other required args) ]);
salesDetailsGrid.initiateGrid();

var salesInquiryGrid = new MyGridData.init([ 'SalesInquiryReference',...(other required args) ]);
salesInquiryGrid.initiateGrid();

或者使用 ES2015：

let MyGridData = MyGridData || (function() {
    class MyGridData {
        constructor(args) {
            this.args = args;
        }
        initiateGrid() {
            this.fillGridSchema(this.args[6]);
        }
        fillGridSchema(/*shouldn't you be using an arg here, since you pass one in `initiateGrid`?*/) {
            $('#' + this.args[0]).jqGrid({
                //All basic code for binding jqgrid (url,colnames...)
            });
        }
    }

    return MyGridData;
})();

// Usage
let salesDetailsGrid = new MyGridData([ 'SalesInquiryDetails',...(other required args) ]);
salesDetailsGrid.initiateGrid();

let salesInquiryGrid = new MyGridData.init([ 'SalesInquiryReference',...(other required args) ]);
salesInquiryGrid.initiateGrid();

但是 JavaScript 很灵活，还有很多其他的方式，比如工厂函数。

注意：以上代码仅作为一个示例，并不代表经过测试或彻底审查的代码。