我想在 TypeScript 中重写下面的 JavaScript“方法”。 我很想在类里面这样做,就像这样:
// export default class
export default class GroupItemMetadataProvider1
{
protected m_instance;
protected _grid;
protected _defaults;
protected m_options;
constructor(options)
{
this.m_instance = this;
this._defaults = {
groupCssClass: "slick-group",
groupTitleCssClass: "slick-group-title",
totalsCssClass: "slick-group-totals",
groupFocusable: true,
totalsFocusable: false,
toggleCssClass: "slick-group-toggle",
toggleExpandedCssClass: "expanded",
toggleCollapsedCssClass: "collapsed",
enableExpandCollapse: true,
groupFormatter: this.defaultGroupCellFormatter,
totalsFormatter: this.defaultTotalsCellFormatter
};
options = $.extend(true, {}, this._defaults, options);
this.m_options = options;
}
protected defaultGroupCellFormatter(row, cell, value, columnDef, item)
{
if (!this.m_options.enableExpandCollapse)
{
return item.title;
}
let indentation = item.level * 15 + "px";
return "<span class='" + this.m_options.toggleCssClass + " " +
(item.collapsed ? this.m_options.toggleCollapsedCssClass : this.m_options.toggleExpandedCssClass) +
"' style='margin-left:" + indentation + "'>" +
"</span>" +
"<span class='" + this.m_options.groupTitleCssClass + "' level='" + item.level + "'>" +
item.title +
"</span>";
}
protected defaultTotalsCellFormatter(row, cell, value, columnDef, item)
{
return (columnDef.groupTotalsFormatter && columnDef.groupTotalsFormatter(item, columnDef)) || "";
}
protected init(grid)
{
this._grid = grid;
this._grid.onClick.subscribe(this.handleGridClick);
this._grid.onKeyDown.subscribe(this.handleGridKeyDown);
}
protected destroy()
{
if (this._grid)
{
this._grid.onClick.unsubscribe(this.handleGridClick);
this._grid.onKeyDown.unsubscribe(this.handleGridKeyDown);
}
}
protected handleGridClick(e, args)
{
let context = (<any>this);
let item = context.getDataItem(args.row);
if (item && item instanceof Slick.Group && $(e.target).hasClass(this.m_options.toggleCssClass))
{
let range = this._grid.getRenderedRange();
context.getData().setRefreshHints({
ignoreDiffsBefore: range.top,
ignoreDiffsAfter: range.bottom + 1
});
if (item.collapsed)
{
context.getData().expandGroup(item.groupingKey);
} else
{
context.getData().collapseGroup(item.groupingKey);
}
e.stopImmediatePropagation();
e.preventDefault();
}
}
// TODO: add -/+ handling
protected handleGridKeyDown(e)
{
let context = (<any>this);
if (this.m_options.enableExpandCollapse && (e.which == Slick.keyCode.SPACE))
{
let activeCell = context.getActiveCell();
if (activeCell)
{
let item = context.getDataItem(activeCell.row);
if (item && item instanceof Slick.Group)
{
let range = this._grid.getRenderedRange();
context.getData().setRefreshHints({
ignoreDiffsBefore: range.top,
ignoreDiffsAfter: range.bottom + 1
});
if (item.collapsed)
{
context.getData().expandGroup(item.groupingKey);
} else
{
context.getData().collapseGroup(item.groupingKey);
}
e.stopImmediatePropagation();
e.preventDefault();
}
}
}
}
public getGroupRowMetadata(item)
{
return {
selectable: false,
focusable: this.m_options.groupFocusable,
cssClasses: this.m_options.groupCssClass,
columns: {
0: {
colspan: "*",
formatter: this.m_options.groupFormatter,
editor: null
}
}
};
}
public getTotalsRowMetadata(item)
{
return {
selectable: false,
focusable: this.m_options.totalsFocusable,
cssClasses: this.m_options.totalsCssClass,
formatter: this.m_options.totalsFormatter,
editor: null
};
}
}
但是,handleGridClick
和 handleGridKeyDown
都引用“this”“事件上下文”以及“this”类上下文来获取选项。
问题是,我不能只在构造函数中绑定(bind) this,否则对象的 this-context 是错误的。我该怎么做?
这是普通的 JavaScript 变体:
// import $ from '../../wwwroot/jQuery-3.3.js';
import Slick from './slick.core.js';
export default GroupItemMetadataProvider;
/***
* Provides item metadata for group (Slick.Group) and totals (Slick.Totals) rows produced by the DataView.
* This metadata overrides the default behavior and formatting of those rows so that they appear and function
* correctly when processed by the grid.
*
* This class also acts as a grid plugin providing event handlers to expand & collapse groups.
* If "grid.registerPlugin(...)" is not called, expand & collapse will not work.
*
* @class GroupItemMetadataProvider
* @module Data
* @namespace Slick.Data
* @constructor
* @param options
*/
function GroupItemMetadataProvider(options)
{
let _grid;
let _defaults = {
groupCssClass: "slick-group",
groupTitleCssClass: "slick-group-title",
totalsCssClass: "slick-group-totals",
groupFocusable: true,
totalsFocusable: false,
toggleCssClass: "slick-group-toggle",
toggleExpandedCssClass: "expanded",
toggleCollapsedCssClass: "collapsed",
enableExpandCollapse: true,
groupFormatter: defaultGroupCellFormatter,
totalsFormatter: defaultTotalsCellFormatter
};
options = $.extend(true, {}, _defaults, options);
function defaultGroupCellFormatter(row, cell, value, columnDef, item)
{
if (!options.enableExpandCollapse)
{
return item.title;
}
let indentation = item.level * 15 + "px";
return "<span class='" + options.toggleCssClass + " " +
(item.collapsed ? options.toggleCollapsedCssClass : options.toggleExpandedCssClass) +
"' style='margin-left:" + indentation + "'>" +
"</span>" +
"<span class='" + options.groupTitleCssClass + "' level='" + item.level + "'>" +
item.title +
"</span>";
}
function defaultTotalsCellFormatter(row, cell, value, columnDef, item)
{
return (columnDef.groupTotalsFormatter && columnDef.groupTotalsFormatter(item, columnDef)) || "";
}
function init(grid)
{
_grid = grid;
_grid.onClick.subscribe(handleGridClick);
_grid.onKeyDown.subscribe(handleGridKeyDown);
}
function destroy()
{
if (_grid)
{
_grid.onClick.unsubscribe(handleGridClick);
_grid.onKeyDown.unsubscribe(handleGridKeyDown);
}
}
function handleGridClick(e, args)
{
let item = this.getDataItem(args.row);
if (item && item instanceof Slick.Group && $(e.target).hasClass(options.toggleCssClass))
{
let range = _grid.getRenderedRange();
this.getData().setRefreshHints({
ignoreDiffsBefore: range.top,
ignoreDiffsAfter: range.bottom + 1
});
if (item.collapsed)
{
this.getData().expandGroup(item.groupingKey);
} else
{
this.getData().collapseGroup(item.groupingKey);
}
e.stopImmediatePropagation();
e.preventDefault();
}
}
// TODO: add -/+ handling
function handleGridKeyDown(e)
{
if (options.enableExpandCollapse && (e.which == Slick.keyCode.SPACE))
{
let activeCell = this.getActiveCell();
if (activeCell)
{
let item = this.getDataItem(activeCell.row);
if (item && item instanceof Slick.Group)
{
let range = _grid.getRenderedRange();
this.getData().setRefreshHints({
ignoreDiffsBefore: range.top,
ignoreDiffsAfter: range.bottom + 1
});
if (item.collapsed)
{
this.getData().expandGroup(item.groupingKey);
} else
{
this.getData().collapseGroup(item.groupingKey);
}
e.stopImmediatePropagation();
e.preventDefault();
}
}
}
}
function getGroupRowMetadata(item)
{
return {
selectable: false,
focusable: options.groupFocusable,
cssClasses: options.groupCssClass,
columns: {
0: {
colspan: "*",
formatter: options.groupFormatter,
editor: null
}
}
};
}
function getTotalsRowMetadata(item)
{
return {
selectable: false,
focusable: options.totalsFocusable,
cssClasses: options.totalsCssClass,
formatter: options.totalsFormatter,
editor: null
};
}
function getOptions()
{
return options;
}
return {
init,
destroy,
getGroupRowMetadata,
getTotalsRowMetadata,
getOptions
};
}
最佳答案
这更像是一个 javascript 而不是 typescript 问题。
在示例 1 中,您尝试使用“类模式”,在示例 2 中,您使用类似“闭包类”的东西(我不记得该模式的名称)。
这两种模式在 TS 中都是可写的,我个人更喜欢保留“闭包类”(示例 2)。因此,您可以只保留代码并添加类型注释。打开 strict: true
并为编译器大喊“具有隐式任何类型”的任何内容提供类型注释。
前面的个人意见
模式 nr.2 通常更易于维护(来源?),模式 1 更难重构,需要更多类型注释,更多思考并为 this
绑定(bind)问题留出空间。您仍然希望在性能密集型事物上使用模式 1(例如:游戏,这似乎不是您的情况),除此之外,模式 2 是您的选择。即使是经典的 OOP 案例(扩展一个类并覆盖一个方法)也可以通过选项 2(选项包模式)轻松获得。
Typescript 的类型系统是结构化的——比“经典的”java/C# 更强大——而且类在 TS 中不是名义上的。这些是不使用类的另外两个原因。 class A {}
和 class B {}
或任何具有相同属性的对象都是可分配的。
编辑:关于这个绑定(bind)问题
如果你真的想坚持...类(class)...
您不能让您的
this
同时成为两件事。如果您的this
是您的类,那么您可以通过event.target
找到您的元素。如果您的this
被反弹到一个元素...哦,好吧。因此您必须调用类似
element.addEventListener("click", Instance.doSomething.bind(this))
的方法。addEventListener
重新绑定(bind)函数的this
。.bind
说:不。或者
element.addEventListener("click", (...i) => Instance.doSomething(...i))
如果您的方法确实要从另一个
this
上下文中调用,那么可以这样写方法(这个:HTMLInputElement,x:数字,y:字符串){}
this
只不过是一种隐藏的函数参数(例如,python 和 lua 明确地将其作为第一个参数发送),它被 onX
覆盖调用,这是 JS 数十亿美元的问题之一,也是 JS 类糟糕的原因之一。
关于javascript - 如何在类型方法中使用另一个类方法和 this 上下文?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49696669/