[英]How do I override a JQuery (Datatable RowGroup) library function?
I'm rather new to Javascript, and the scoping syntax definitely confuses me when looking at open source libraries especially when it has a lot of advanced concepts like closure, anonymous functions, etc. The Jquery Datatables RowGroup is aa bit buggy with Responsiveness, so I took the bold attempt of writing my own attempt at a solution.我是相当新的JavaScript和作用域语法肯定让我困惑的开源库看时特别是当它有很多的封样,匿名函数等先进理念jQuery的数据表RowGroup是AA位车与响应速度,所以我大胆尝试编写自己的解决方案尝试。
Below is the relevant snippet from the RowGroup library , source code from https://cdn.datatables.net/rowgroup/1.1.1/js/dataTables.rowGroup.js :下面是来自RowGroup 库的相关片段,源代码来自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
}
});
}));
Although it is open source , instead of modifying the library directly, I'd like to override the function _adjustColspan from a separate Javascript file (which will be included after this library).尽管它是开源的,但我不想直接修改库,而是想从单独的 Javascript 文件(将包含在此库之后)覆盖函数_adjustColspan 。 This will allow the library still be update-able without hassle, and any custom changes can be easily tracked.
这将使库仍然可以轻松更新,并且可以轻松跟踪任何自定义更改。
So first off, is what I'm trying to accomplish possible?所以首先,我想要完成的事情可能吗? If it is possible, how would I go about overriding this function in an external .js file?
如果可能,我将如何在外部 .js 文件中覆盖此函数?
Edit: It seems what I'm trying to do is coined " Monkey patching "编辑:看来我想做的是创造“猴子补丁”
Looks like the RowGroup
object comes from an extension over on https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js , which we can read through to see if there's some easy place we can grab a reference to it... and there is.看起来
RowGroup
对象来自https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js上的一个扩展,我们可以通读它,看看是否有一些我们可以轻松抓住的地方对它的引用......有。
https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js#L418 shows that its getting bound to $.fn.dataTable.RowGroup
, which means that we can grab it from there in any context that has jQuery available. 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
}
(With the original code over on https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js#L180-L184 ) (原始代码在https://github.com/DataTables/RowGroup/blob/master/js/dataTables.rowGroup.js#L180-L184 上)
You can test this in your dev tools over on https://datatables.net/extensions/rowgroup/examples/styling/jqueryui.html , for instance.例如,您可以在https://datatables.net/extensions/rowgroup/examples/styling/jqueryui.html上的开发工具中对此进行测试。 Typing
$.fn.DataTable.RowGroup.prototype
there gives us:在那里输入
$.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 { … }
}
And we can change that prototype to be whatever we want.我们可以将原型更改为我们想要的任何东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.