我有calendar小部件，用TypeScript编写。我可以将侦听器绑定到单独的函数，但是我希望这个单独的函数具有默认功能，直到有人覆盖传递给构造函数的config对象中的函数。在构造函数中，我传递了类似的东西
{
container: 'xxx',
cellClick: function(sender, event, data) {
// custom functionality
}
}
如何在我的基类中定义一个函数cellClick，当我渲染我的td单元格以将事件监听器绑定到此函数并为该单元格传递一些数据时，这些数据将具有一些默认功能。单元格，但是如果定义了某个对象中的函数来覆盖它，则单击该单元格的数据。
我这样做，但这会将监听器直接绑定到config函数。我打赌我的setter很容易做到这一点，但我无法弄清楚如何。
td.addEventListener('click', function () {
this.config.cellClick(td, event, data);
})
修改
这是我的abstract类，它扩展了Table类，只为thead, tbody and tfoot创建了对象
defaultConfig = {
container: '',
dataSource: [],
currentDate: new Date(),
currentView: 'month',
views: [
{ type: 'Day' },
{ type: 'Week' },
{ type: 'Month' }
],
startDayHour: 8,
endDayHour: 20,
cellDuration: 60,
todayHighlight: true,
cellClick: this.cellClick,
eventClick: this.eventClick,
showAllDayPanel: false,
disabledDays: [],
resources: {
dataSource: [],
field: null
},
groupBy: null,
}
set config(cfg: my.core.calendar.iCalendarConfiguration) {
if (cfg) {
for (var key in cfg) {
if (cfg[key] == null) {
cfg[key] = this.defaultConfig[key];
}
}
if (cfg.cellClick != null) {
cfg.cellClick.bind(this.cellClick);
}
this.configuration = cfg;
this.MonthLength = new Date(cfg.currentDate).getMonth();
this.weekDayStart = cfg.currentDate;
this.weekDayEnd = cfg.currentDate;
}
}
get config(): iCalendarConfiguration {
return this.configuration;
}
.............
constructor(config: iCalendarConfiguration) {
super();
this.element.className = "table table-bordered table-responsive col-sm-12"; // could be readed from config but tbd
this.config = config;
this.appointmentsArray = config.dataSource;
this.tools = new my.calendar.CalendarTools();
/**
* Append the element to the container
* which is defined in the config.
*/
document.getElementById(config.container).appendChild(this.tools.createDiv('', 'row', this.parentID)).appendChild(this.element);
}
abstract createCalendar();
abstract bindAppointments(view: string);
abstract Next(sender, e, data)
abstract Previous(sender, e, data)
abstract TabClick(sender: any, event: any, data: any)
abstract initialize()
abstract onResize()
abstract cellClick(sender: any, event: any, data: any)
abstract eventClick(sender: any, event: any, data: any)
还有一个类calendar，它扩展了抽象类及其用配置对象实例化的类。
export class Calendar extends my.core.calendar.CalendarTable {
weeklyView: my.calendar.WeeklyView;
monthlyView: my.calendar.MontlyView;
dayView: my.calendar.DayView;
constructor(cfg: my.core.calendar.iCalendarConfiguration) {
super(cfg);
this.weeklyView = new my.calendar.WeeklyView(this);
this.monthlyView = new my.calendar.MontlyView(this);
this.dayView = new my.calendar.DayView(this);
}
onResize() {
/**
* Repaint all appointments on window resize
* For many reasons
*/
this.bindAppointments();
}
createCalendar() {
/** Clear everything on change */
if (this.tBody.rows.length > 0) {
this.tBody.clear();
this.tHead.clear();
}
switch (this.config.currentView) {
case "month":
this.monthlyView.createMontlyView();
break;
case "day":
this.dayView.createDayView();
break;
case "week":
this.weeklyView.createWeeklyView();
break;
}
this.bindAppointments();
}
bindAppointments() {
/** Remove the events div for week/day view. Its here because reasons. */
if (this.element.parentElement.querySelector("#events") !== null) {
let child = document.getElementById('events');
this.element.parentElement.removeChild(child);
}
switch (this.config.currentView) {
case "month":
this.monthlyView.bindMonthAppointments();
break;
case "day":
this.dayView.bindDayAppointments();
break;
case "week":
this.weeklyView.bindWeekAppointments();
break;
}
}
Next(sender, e, data) {
switch (this.config.currentView) {
case "month":
this.monthlyView.monthNavigationChange(true);
break;
case "day":
this.dayView.dayNavigationChange(true);
break;
case "week":
this.weeklyView.weekNavigationChange(true);
break;
}
this.createCalendar();
this.updateLabels();
}
Previous(sender, e, data) {
switch (this.config.currentView) {
case "month":
this.monthlyView.monthNavigationChange(false);
break;
case "day":
this.dayView.dayNavigationChange(false);
break;
case "week":
this.weeklyView.weekNavigationChange(false);
break;
}
this.createCalendar();
this.updateLabels();
}
TabClick(sender: any, event: any, data: any) {
switch (sender.id.toLowerCase()) {
case "day":
this.tools.setActiveTab(this, 'day', event);
// update currentdate
break;
case "month":
this.tools.setActiveTab(this, 'month', event);
// update currentdate
break;
case "week":
this.tools.setActiveTab(this, 'week', event);
// update currentdate
break;
}
this.createCalendar();
this.updateLabels();
}
updateLabels() {
let date = new Date(this.config.currentDate);
switch (this.config.currentView) {
case "month":
this.currentDateMonth.value = String(this.calendar_months_label[date.getMonth()]) + ' ' + String(date.getFullYear());
break;
case "day":
this.currentDateMonth.value = String(this.config.currentDate.getDate()) + ' ' + String(this.calendar_months_label[this.config.currentDate.getMonth()]) + ' ' + String(this.config.currentDate.getFullYear());
break;
case "week":
this.currentDateMonth.value = String(this.tools.getPreviousWeekStr(this.weekStart, this.weekEnd, this.calendar_months_label[this.config.currentDate.getMonth()], this.config.currentDate.getFullYear()));
break;
}
}
initialize() {
this.tools.createNavigation(this, this.config);
this.createCalendar();
this.bindAppointments();
}
cellClick(sender, event, data) {
console.log('fired up from mycalendar');
}
eventClick(sender, event, data) {
}
}; // end class basic
还有3个类用于view渲染，逻辑等获取表对象并执行一些操作。
以下是我如何初始化它。
var calendar = new my.calendar.Calendar({
container: 'calendarTestContainer',
dataSource: data,
views: [
{ type: 'Week' },
{ type: 'Day' },
{ type: 'Month' }
],
currentDate: new Date('2017-03-15'),
currentView: 'week',
startDayHour: 8,
disabledDays: [6],
cellDuration: 30,
resources: {
dataSource: staffs,
field: 'UID'
},
endDayHour: 24,
cellClick: function (sender, e, data) {
// this has to be overrided
},
showAllDayPanel: true
}).initialize();
由于我不是真的在OOP ，我愿意接受重复因素建议。
答案 0 :(得分：1)
您可以使用默认功能提供默认对象：
defaults = {
option1: 'value1',
cellClick: function() {/*do your default stuff here*/}
}
获得配置对象后，可以使用Object.assign合并它们：
Object.assign(defaults, config || {});
您的defaults对象现在包含所有默认值，除非您的config对象中有值。现在你可以使用
td.addEventListener('click', defaults.cellClick)
这会将您的默认函数或覆盖函数添加为处理程序。