使用面向对象的 js 代码写法,写了一个日历,代码如下
1 | <!DOCTYPE html> |
思路
这段代码是使用面向对象的语法写的,面向对象程序设计的主要使用了构造函数和原型的语法。代码如下:1 | function person () { |
new
操作符创建了 person
构造函数的一个实例,在构造函数中定义了一个属性 eye
,根据在原型链中的继承的特性,使用 new
操作符创建的实例,会继承构造函数上定义的属性和方法,因此,我们可以在构造函数上定义公共属性和方法。在通过在上面的代码中new
操作符的过程中发生了什么?1.创建一个新对象2.将构造函数的作用域赋给新对象,(这时候this
指向这个新对象)3.执行构造函数的代码 (这个新对象添加属性)4.返回新对象
1 | var dateCanlender = new dateUI(true, 'startTime', function () { |
dateUI
的一个新实例。在构造函数的原型上,给原型添加方法 : initTable
reactData
initDate
initColor
dateAct
initTable
用来初始化表格,生成表格1 | initTable: function () { |
[].slice.call(that.tds)
将类数组对象 tds
转化为数组,从而可以使用数组的方法
数组中 slice
的方法
reactData
: 将数据变为可以跟踪变化的形式,类似于在 vue
中的,将 data
数据变为可响应式的,使用的是 Object.defineProperty()
方法, getter
setter
等方法构建响应式数据。通过这种方法创建的数据是可以响应式的。代码如下:1 | reactData: function () { |
initDate
用来像表格中填入数据:代码如下:1 | initDate: function () { |
initColor
:用来重置表格的颜色dateAct
用来定义日历的一些行为代码总结:
1.使用面向对象的写法进行编写的,而非之前的面向过程编写2.熟悉 js 中关于使用日期事件的一些方法在代码中的一些问题:
1.代码逻辑混乱,这一部分需要加强2.代码中需要规范,包括注释,变量的定义3.使用面向对象的写法的时候,需要知道使用 使用property
构建函数的时候发生了什么,以及代码中 this
的指向值little Tips
addEventListener
attachEvent
1
2
3
4
5
6
7
8
9
10<div id='btn'>
</div>
<script>
window.onload = function () {
var button = document.getElementById('btn');
Good.addEventListener('click', function () {
console.log(this); // this 指向的是 id 为 good 的 dom 元素
})
}
</script>addEventistener
用于监听事件target.addEventListenter(event, fn , [userCapture])
event
: 表示要进行监听的事件 [string]fn
:表示 监听到事件之后的回调函数userCapture
: 表示事件是应用到冒泡阶段还是应用到捕获阶段 [boolean]addEventListener
中定义的this
值指向的是 tartget 对象在 IE 下 使用attachEvent
来实现类似addEventListener
的行为:实现兼容性:1
2
3
4
5
6
7
8function listenEvent(dom,event,fn) {
if (dom.attachEvent) {
dom.attachEvent('on' + event, fn);
} else {
dom.addEventListener(event, fn);
}
}
Date
对象对于得到月份的天数以及当前月第一天的星期几的求法是不同的