控件
状态机
了解状态机的作用以及状态机的使用方法
Example
import { } from 'javascript-state-machine';
export default function my_widget(dom: HTMLElement, {
arg1 = 'abc',
arg2 = 123
}: {
arg1: string;
arg2: number;
}, {
onClick = (id: string) => { }
}) {
function method1(){
alert(arg1);
}
function method2(){
alert(++arg2);
}
function method3(){
onClick('abc')
}
return {
method1,
method2
};
}
类和函数
使用函数代替类
参数默认值
参数
固定参数格式 第一个参数为控件使用的dom结点 第二个参数为调用控件的参数 第三个参数为调用事件
方法
调用者对控件实例方法调用
做一做
完成一个开始时间和结束时间在一起的控件,要求:
- 包含两个日期输入框(这是浏览器内置控件),一个是开始日期,一个是结束日期;
- 结束日期不能早于开始日期;
- 开始日期和结束日期当用户选择后均可向调用者发出事件,通知调用者开始日期或结束日期改变;
- 该控件可接受初始化参数,包括开始日期和结束日期;
- 应该至少包含两个方法,一个用来修改开始日期,一个用来修改结束日期;
- 其它能考虑到的应用场景(比如多次在某个结点上绑定该控件)