如何覆盖 JQuery (Datatable RowGroup) 库函数？

Question

我对 Javascript 比较陌生，在查看开源库时，作用域语法确实让我感到困惑，尤其是当它有很多高级概念，如闭包、匿名函数等时。Jquery Datatables RowGroup is a a bit buggy 具有响应能力，所以我大胆尝试编写自己的解决方案尝试。

下面是来自 RowGroup library, source code from https://cdn.datatables.net/rowgroup/1.1.1/js/dataTables.rowGroup.js 的相关片段：

/** <Not sure what is going on here!> */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'datatables.net'], function ($) {
            return factory($, window, document);
        });
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = function (root, $) {
            if (!root) {
                root = window;
            }

            if (!$ || !$.fn.dataTable) {
                $ = require('datatables.net')(root, $).$;
            }

            return factory($, root, root.document);
        };
    } else {
        // Browser
        factory(jQuery, window, document);
    }
}(function ($, window, document, undefined) {
    /** </Not sure what is going on here!> */
    'use strict';
    var DataTable = $.fn.dataTable;

    var RowGroup = function (dt, opts) {
        //...
    };
    $.extend(RowGroup.prototype, {
        //...
        _constructor: function () {
            //...
            dt.on('responsive-resize.dt', function () {
                that._adjustColspan();
            });
        },

        /** I would like to override this function, externally */
        _adjustColspan: function () {
            @ @override
        }
    });
}));

虽然是 open source，但我不想直接修改库，而是想从单独的 Javascript 文件中覆盖函数 _adjustColspan (将包含在该库之后）。这将使库仍然可以毫不费力地进行更新，并且可以轻松跟踪任何自定义更改。

那么首先，我想要实现的目标是否可行？如果可能的话，我将如何在外部 .js 文件中覆盖此函数？

编辑：看来我正在尝试做的是创造“猴子修补”

Answer 1

看起来 RowGroup 对象来自 https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js 上的一个扩展，我们可以通读它以查看是否有一些简单的地方我们可以获取对它的引用...并且有是。

https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js#L418 显示它绑定到 $.fn.dataTable.RowGroup，这意味着我们可以在任何具有 jQuery 可用的上下文中从那里获取它。

const RowGroup = $.fn.DataTable.RowGroup;

RowGroup.prototype._adjustColspan = function() {
  // do your own things here
}

(原代码在https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js#L180-L184)

例如，您可以在 https://datatables.net/extensions/rowgroup/examples/styling/jqueryui.html 上的开发工具中对此进行测试。在那里输入 $.fn.DataTable.RowGroup.prototype 给我们：

{  
  _adjustColspan: function _adjustColspan()
  _colspan: function _colspan()
  _constructor: function _constructor()
  _draw: function _draw()
  _group: function _group(b, g)
  _groupDisplay: function _groupDisplay(b, a)
  _rowWrap: function _rowWrap(b, g, c)
  constructor: function h(b, g)
  dataSrc: function dataSrc(b)
  disable: function disable()
  enable: function enable(b)
  <prototype>: Object { … }
}

而且我们可以将该原型更改为我们想要的任何内容。

如何覆盖 JQuery (Datatable RowGroup) 库函数？

How do I override a JQuery (Datatable RowGroup) library function?

javascript

jquery

datatables

datatables-1.10