javascript - 在 onclick 事件上调用另一个函数

Question

我在同一目录/文件夹中有两个 javscript 文件 f1.js 和 f2.js，它们是 Web 应用程序的一部分。 f1 负责显示jqxdatagrid 具有多行和多列。

我的目标:

我基本上试图找出一种当用户单击 jqxdatagrid 的行时调用函数 f2 的方法。与抓取行数据相关的所有逻辑均在 f1.js 中定义，此行 $("#dataDocumentPanel").on('rowclick',function(event){

我的尝试:

我正在看这篇文章Call variables from one javascript file to another所以我声明了 var SUBTYPE

这将初始化mySubtype。

为了访问上面的值，我在f2.js中执行了以下操作

var forf1 = new Object;

alert(forf1.mySubtype);

因此，在做任何事情之前，我想通过警报检查我是否在 f2.js 中获取 mySubtype 的值。

如果我错了，请纠正我，但 f2.js 中的警报不起作用的原因是我觉得我需要调用 f2 文件当用户单击 jqxdatagrid 的特定行时。我的意思是这一行需要发生一些事情 $("#dataDocumentPanel").on('rowclick',function(event){ ?

这是我的两个 JavaScript 文件:

f1.js

function f1() {

    var self = this;


    this.urlKey = "showIDNumber";

    this.getData = function (IDNumber_) {

        //Some code related to ajax reques
        .done(function (data_, textStatus_, jqXHR_) {

             self.processdataDocuments(data_.data_document_list);
          })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code here
        });
    };


    // Initialize the page
    this.initialize = function () {

        self.getData(IDNumber);
    };



    this.processdataDocuments = function (collection_) {
        var source =
        {
           localdata: collection_,
           datatype: "array"
         };
     var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
     $("#dataDocumentPanel").jqxGrid(
            // some code here to populate jqxgrid
             });
      // For getting the contents of a row, I am using jqxgrid approach as mentioned in their doc here :
      //    http://www.jqwidgets.com/getting-the-clicked-grid-row/           

      $("#dataDocumentPanel").on('rowclick',function(event){

           var row = event.args.rowindex;

           var datarow = $("#dataDocumentPanel").jqxGrid('getrowdata', row);
           var jsonStringify = JSON.stringify(datarow,null,10);
           alert(jsonStringify); // This alert displays the JSON data in a formatted manner 
           var obj = jQuery.parseJSON(response);
           //alert("display Subtype "+obj.nc_subtype)  // Works fine

           var SUBTYPE = {

             mySubtype : obj.nc_subtype
          };


         });

    };
};

f2.js

function f2() {


     var self = this;

     var forf1 = new Object;

    alert(forf1.mySubtype); // Trying to display obj.nc_subtype value from f1

     this.getData = function (IDNumber_) {

        // some code will be here      

        var ajaxRequest = jQuery.ajax({
            // some code will be here
        })
        .done(function (data_, textStatus_, jqXHR_) {
            // some code will be here
         })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code will be here
        });
    };

}

Answer 1

来自Properties of Javascript function objects

您可以将 f1 放入一个类中(如 F1，因为类是大写的)

var F1 = (function() {
    var cls = function() { }

    var self = cls.prototype;

    self.foo = "Foo";
    self.bar = funciton() { ... },
    ...

    return cls;
})();

从这里开始，只要您在 HTML 页面中同时引用 f1 和 f2，您就可以使用 F1 创建一个 F1 对象。/p>

var f1 = new F1();

然后只需执行以下操作即可访问其属性

f1.property

并将它们分配给

f1.property = ...

设置f1的mySubType，而不是

var SUBTYPE = {
    mySubtype : obj.nc_subtype
};

做

self.mySubtype = ...

它将分配f1.mySubtype。

这是一个示例代码片段，其中 f1 和 f2 转换为类(F1 和 F2)，其中F2 对象创建 F1 对象并访问其 mySubtype。在演示中，我将 F1.mySubtype 设置为字符串 Foo，并创建了一个 f2，因此当运行代码片段时，它应该打印“Foo ”;然而，在实际的程序中，这两件事可能应该被删除:

//f1.js ---

var F1 = (function() {
    var cls = function() { }

    var self = cls.prototype;
  
    self.urlKey = "showIDNumber";

    self.getData = function (IDNumber_) {

        //Some code related to ajax reques
        this.done(function (data_, textStatus_, jqXHR_) {

             self.processdataDocuments(data_.data_document_list);
        });
        this.fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code here
        });
    };

    // Initialize the page
    self.initialize = function () {

        self.getData(IDNumber);
    };

    self.processdataDocuments = function (collection_) {
        var source =
        {
           localdata: collection_,
           datatype: "array"
         };
     var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
      $("#dataDocumentPanel").jqxGrid({
            // some code here to populate jqxgrid
      });
      // For getting the contents of a row, I am using jqxgrid approach as mentioned in their doc here :
      //    http://www.jqwidgets.com/getting-the-clicked-grid-row/           

      $("#dataDocumentPanel").on('rowclick',function(event){

           var row = event.args.rowindex;

           var datarow = $("#dataDocumentPanel").jqxGrid('getrowdata', row);
           var jsonStringify = JSON.stringify(datarow,null,10);
           alert(jsonStringify); // This alert displays the JSON data in a formatted manner 
           var obj = jQuery.parseJSON(response);
           //alert("display Subtype "+obj.nc_subtype)  // Works fine
        
           self.mySubtype = obj.nc_subtype;
         });

    };
  
    //I added this line for the demo to show 'f2' accessing this property from 'f1'. You should remove it if copying this code into your application
    self.mySubtype = "Foo";

    return cls;
})();

var f1 = new F1();

//f2.js ---

var F2 = (function() {
     var cls = function() { }

     var self = cls.prototype;

     alert(f1.mySubtype);

     self.getData = function (IDNumber_) {

        // some code will be here      

        var ajaxRequest = jQuery.ajax({
            // some code will be here
        })
        .done(function (data_, textStatus_, jqXHR_) {
            // some code will be here
         })
        .fail(function (jqXHR_, textStatus_, errorThrown_) {
           // some code will be here
        });
    };

    return cls;
})();

var f2 = new F2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>