Subject.prototype.removeObserver = function (observer) {
this.observers.removeAt(this.observers.indexOf(observer, 0))
}
// notify: 通知函数,用于通知观察者并且执行update函数,update是一个实现接口的方法,是一个通知的触发方法。
Subject.prototype.notify = function (context) {
let observerCount = this.observers.count()
for (let i = 0; i < observerCount; i++) {
this.observers.get(i).update(context)
}
}
/*
* ObserverList
* 内部维护了一个数组,4个方法用于数组的操作,这里相关的内容还是属于subject,因为ObserverList的存在是为了将subject和内部维护的observers分离开来,清晰明了的作用。
*/
function ObserverList () {
this.observerList = []}
ObserverList.prototype.add = function (obj) {
return this.observerList.push(obj)
}
ObserverList.prototype.count = function () {
return this.observerList.length
}
ObserverList.prototype.get = function (index) {
if (index > -1 && index < this.observerList.length) {
return this.observerList[index] }
}
ObserverList.prototype.indexOf = function (obj, startIndex) {
let i = startIndex
while (i < this.observerList.length) {
if (this.observerList[i] === obj) {
return i
}
i++
}
return -1
}
ObserverList.prototype.removeAt = function (index) {
this.observerList.splice(index, 1)
}
/*
* The Observer
* 提供更新接口,为想要得到通知消息的主体提供接口。
*/
export const Observer = function () {
this.update = function () {
// ...
}
}
CalendarBody观察者注册:

CalendarHeader通知消息

组件设计以及结构
VueCalendar Component
CalendarBody.vue
CalendarHeader.vue
lib
Subject.js
Util.js
index.vue
当前效果
周一为第一天:

周日为第一天

Github地址










