javascript - 绑定(bind)多个动态 jqgrid 时覆盖参数

Question

我有以下用于绑定(bind) jqgrid 的代码。我的页面中有多个 jqgrid 。我通过下面的代码动态绑定(bind)所有内容。

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...)

   });
 }
}

当我想绑定(bind)我的 SalesInquiryDetails 网格时，我调用下面的代码。

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

如果我想绑定(bind) SalesReferenceGrid，

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

现在，我每次都得到最后绑定(bind)网格的_args。并且没有获取我为之前的网格定义的事件。

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

提前致谢。

Answer 1

Now, i got _args of last bind grid every time.

对，因为你只有一个 _args 变量，它是一个全局变量。你的代码正在成为我所说的 The Horror of Implicit Globals 的牺牲品通过在松散模式下分配给 undefined symbol ，该符号会伸出并创建一个全局变量。 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很灵活，还有很多其他的方式，比如工厂函数。

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