一、说在前面
最近在完成一个项目，其中需要用到日历组件，但是这个日历组件不同于点击按钮选日期，而是在一个月内选择自己想要的日期，只是单月内，其中还可以折叠，在一周内选择日期，切换周的时候也只能在一个月内，由于这个类似一个组件，想用js面向对象的思维去开发这个功能。
二、实现效果
三、基本思路
(
function ($) {
// 构造函数
var Calendar =
function (elem, options) {
// some public methods
}
// 原型链
Calendar.prototype =
{
// some private methods
// 填充月日子数据
showCalendar:
function () {
},
// 填充周日子的数据
showCalendarWeek:
function () {
},
// 建立dom结构
renderDOM:
function () {
},
// 初始化操作
inital:
function () {
// 先渲染dom
this.renderDOM()
// 填充日子dom
this.showCalendar()
// 填充周日子dom
this.showCalendarWeek(thisweek()[0], thisweek()[1
])
},
// 执行点击事件
dom.click =
function () {
},
// 指向构造函数就是Calendar
constructor: Calendar
}
// some common methods
var dateObj = (
function () {
})
// 继承
$.fn.calendar =
function (options) {
return new Calendar(
this, options).inital()
}
})(Zepto)
// 执行
$(
function () {
$('#calendar'
).calendar({
// 点击周日子的时候
clickWeekDay:
function ($ele) {
console.log($ele.data('date'
))
},
// 点击月日子的时候
clickListDay:
function ($ele) {
console.log($ele.data('date'
))
}
})
})
四、倡导原则
虽然说用的是zepto，相对于高大上的vue和react等比较low，但是接地气，拿来就能用。我在写功能的时候，基本做到先dom渲染，然后再去初始化数据。
上面大体给了写此功能的思路和结构，源码我已经放在了我的github里面了，有需要可以去下载，希望能帮到写业务的大家。
下载地址：https://github.com/dirkhe1051931999/writeBlog/tree/master/calendar
转载于:https://www.cnblogs.com/dirkhe/p/10171256.html
相关资源：使用JAVA实现日历功能
