Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

日历组件与Date2增加注释 #18

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

日历组件与Date2增加注释 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 41 additions & 22 deletions lib/calendar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@
this._checkOptions()
this._generateCalendar()
}
// 按钮事件
nextMonth() {
// nextMonth返回的是Date2对象，所以要取到他的date属性，这才是真正的Date对象
this.currentDate = new Date2(this.currentDate).nextMonth.date
this._generateCalendar()
}
Expand All @@ -38,44 +40,53 @@
this.currentDate = new Date()
this._generateCalendar()
}
//判空事件
_checkOptions() {
if (!this.options.element) {
throw new Error('element is required')
}
return this
}
_generateWeekdays() {
//整理页面上星期的显示，受到option里startOfWeek的控制
_generateWeekdays() {
let { startOfWeek, strings } = this.options
let items = createArray({ length: 7, fill: startOfWeek }).map((day, i) => {
//通过这个表达式，得出星期的排列
let n = day + i >= 7 ? day + i - 7 : day + i
let text = strings.weekdays(n)
let li = dom.create(`<li>${text}</li>`)
//对周六周天添加样式
if ([0, 6].indexOf(n) >= 0) {
li.classList.add('weekend')
}
return li
})
return dom.create(`<ol class="weekdays"></ol>`, items)
}
_generateCurrentMonth() {
let current = new Date2(this.currentDate)
let dayCount = current.monthEnding.day()
let convert = this.options.strings.days
return createArray({ length: dayCount }).map((_, i) => {
let date2 = current.day(i + 1)
let li = dom.create(this.options.strings.dayTemplate)
li.className = 'currentMonth'
if (date2.isSameDayAs(new Date())) {
li.classList.add('today')
}
if ([0, 6].indexOf(date2.weekday()) >= 0) {
li.classList.add('weekend')
}
li.querySelector('.day').textContent = convert(i + 1)
return li
})
}
_generatePreviousMonth() {
//整理当前月DOM排列
_generateCurrentMonth() {
let current = new Date2(this.currentDate)
//该月的天数 = 该月最后一天的日期
let dayCount = current.monthEnding.day()
//这个convert是为了每一天对应的元素上写入当天的日期，就是几号就写多少号
let convert = this.options.strings.days
//遍历长度为天数的数组，“_”下划线起到占位的效果，没其他用途
return createArray({ length: dayCount }).map((_, i) => {
let date2 = current.day(i + 1)
let li = dom.create(this.options.strings.dayTemplate)
li.className = 'currentMonth'
if (date2.isSameDayAs(new Date())) {
li.classList.add('today')
}
if ([0, 6].indexOf(date2.weekday()) >= 0) {
li.classList.add('weekend')
}
li.querySelector('.day').textContent = convert(i + 1)
return li
})
}
//整理与当前月连接的上一月DOM排列
_generatePreviousMonth() {
let { startOfWeek } = this.options
let date2 = new Date2(this.currentDate)
let monthBeginning = date2.monthBeginning
Expand All @@ -90,11 +101,14 @@
if ([0, 6].indexOf(date2.day(-i).weekday()) >= 0) {
li.classList.add('weekend')
}
//这里的-i是一个小技巧,例如，对 一个Date对象为 2017-08-08，对它这个day（0），会返回上一个月的最后一天这个日期对象。
li.querySelector('.day').textContent = convert(date2.day(-i).day())
return li
})
//这里反转了数组的顺序，因为他是从当月的一号依次找到上一个月在日历上的边界，得反过来
.reverse()
}
//整理与当前月连接的下一月DOM排列
_generateNextMonth() {
let { startOfWeek } = this.options
let date2 = new Date2(this.currentDate)
Expand All @@ -115,17 +129,21 @@
return li
})
}
//整理所有的日期,在这里调用上面的三个方法
_generateDays() {
let { startOfWeek } = this.options
let date2 = new Date2(this.currentDate)
let monthBeginning = date2.monthBeginning
let monthEnding = date2.monthEnding
//这里定义的monthBeginning和monthEnding应该没有用处，因为在_generateCurrentMonth和_generatePreviousMonth方法中，他们又重新获取了
//let monthBeginning = date2.monthBeginning
//let monthEnding = date2.monthEnding

let days = this._generateCurrentMonth()
//连接数组
days = this._generatePreviousMonth().concat(days)
days = days.concat(this._generateNextMonth())
return dom.create(`<ol class=days></ol>`, days)
}
//整理日历，插入页面
_generateCalendar() {
let { element } = this.options
dom.removeChildren(element)
Expand All @@ -140,6 +158,7 @@

// 生成一个长度位 length，内容为 fill 的数组
// 不同于 new Array(length)，createArray 生成的数组是有 0 到 length 下标的
// https://segmentfault.com/q/1010000006793990 这里贴一个这种特殊写法的链接，只是还不清楚为啥会有下标
function createArray({ length, fill }) {
let array = Array.apply(null, { length: length })
if (fill !== undefined) {
Expand Down
13 changes: 12 additions & 1 deletion lib/date2/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
}
return this._proxy('day')
}

day(n) {
return this._proxy('date', n)
}
Expand All @@ -18,9 +19,11 @@
month(n) {
return this._proxy('month', n, 1)
}
//ES6 get语法
get monthBeginning() {
return this.day(1)
}
//不知道该月的实际天数,故而得到该月后一个月的Date对象，再去取得上一个月的最后一天，day(0)实际为setDate(0)，返回的是上一个月的最后一天，小技巧
get monthEnding() {
return this.month(this.month() + 1).day(0)
}
Expand All @@ -37,7 +40,9 @@
get previousMonth() {
let day = this.day()
let month = this.month()
//这里的day是为了初始化该月的日期
let nextMonth = this.day(1).month(month - 1)
//修正日期，如果原日期大于当前月的最大日期，则将当前月日期设置为最后一天
if (day > nextMonth.monthEnding.day()) {
return nextMonth.monthEnding
} else {
Expand All @@ -56,15 +61,20 @@
milliseconds(n) {
return this._proxy('milliseconds', n)
}
// ES6 GETTER语法，访问该属性时，自动调用对应的方法
get clone() {
return new Date2(this.date)
}

//这是核心方法，通过判断n决定set还是get
_proxy(name, n, offset = 0) {
if (n === undefined) {
// this.date是日期对象的实例，这里调用他的原型上的方法,
// getMonth、getDay、getHours、getMinutes、getDate、getFullYear、getMilliseconds
// getDate 返回一个指定日期对象是该月的第几天 setDate 制定一个日期对象的天数
return this.date[`get${capitalize(name)}`]() + offset
} else {
let d = this.clone
//调用set方法 这里的减去offset只是为了setMonth准备的
d.date[`set${capitalize(name)}`](n - offset)
return d
}
Expand All @@ -77,6 +87,7 @@
}
}

//让首字母大写
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
Expand Down