莉丝前端

起因

需要实现一个日历功能，网上找了几个示例，都是根据各种库和插件，居然没有纯净的js完成的日历插件，不免有些诧异，正好有时间，准备通过js编写一个简单的日历demo基础，可自由根据使用的插件进行显示层的定制。

效果图

前提

算法

说一下日历的算法 1. (本月第一天的星期数+本月的天数)/7 可以知道本月需要占据几行。 2. 将日历看为二维数组，第一级遍历条件为本月行数，第二级为0~7（直观形象为一个日历table，自左向右，自上而下循环）。 3. n为0~7循环参数， 计算当前日历方格显示数值为当前日期： 行数*7 + n - 本月第一天 + 1。 4. 二月的天数根据闰年会有不同，闰年的计算方式： 当前年份能被400整除，或者当前的年份能被4整除且不能被100整除。

Date

日历功能实现必须通过js的Date对象提供的基础数值。介绍一下用到的方法功能

new Date().getFullYear();
//当前年份 2015
new Date().getMonth();
//当前月份 0~11 
new Date().getDate();
//当前月中的某一天 1~31
new Date().getDay();
//一周中的某一天 0~6
new Date(year, month, day);
//根据构造函数返回Date对象

实现

这里写出来编写代码思路分析的过程，可以跳过直接看下方的完整代码。 先抽象出二维数组模型，7列已经确定，需要先根据算法1算出本月的日历行数，但是二月的天数不一致，所以先要根据是否为闰年算出二月的天数。

var calendar = 
{
    isLeap : function (vYear) 
    {
        return vYear % 400 == 0 || (vYear % 4 == 0 && vYear % 100 != 0);
    },
    getFebruaryDays : function (vYear) 
    {
        return this.isLeap(vYear) ? 29 : 28;
    }
}

本月第一天的星期数可以根据new Date(currentYear, currentMonth, 1).getDay()得出。 monthFirstDay为本月第一天的星期数，monthDays为12月的天数组成的数组。根据构造函数计算赋值，并返回this对象方便链式调用。

var calendar = 
{
    year : null, month : null, date : null, day : null, monthDays : null, monthFirstDay : null,
    ctor : function (vNow) 
    {
        var now = vNow || new Date();
        //如果为指定date对象，则为当前日期对象
        this.year = now.getFullYear();
        this.month = now.getMonth();
        this.date = now.getDate();
        this.day = now.getDay();
        this.monthFirstDay = new Date(this.year, this.month, 1).getDay();
        this.monthDays = [ 31, this.getFebruaryDays(this.year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
        return this;
    },
    isLeap : function (vYear) 
    {
        return vYear % 400 == 0 || (vYear % 4 == 0 && vYear % 100 != 0);
    },
    getFebruaryDays : function (vYear) 
    {
        return this.isLeap(vYear) ? 29 : 28;
    }
}

计算日历行数

getMonthDay : function () 
{
    return this.monthDays[this.month];
},
getCalTr : function () 
{
    return (this.monthFirstDay + this.getMonthDay())  / 7;
},

循环二维数组得到日历, console.log(n);可结合使用的框架进行输出展示。

cal : function () 
{
    var that = this;
    for (var i = 0; i < this.getCalTr(); i++) 
    {
        for (var j = 0; j < 7; j++) 
        {
            var n = (i * 7 + j) - that.monthFirstDay + 1;
            if (n > 0 && n <= that.getMonthDay()) {
                console.log(n);
            }
        }
    }
}

完整代码，在控制台查看输出的日历

var calendar = 
{
    year : null, month : null, date : null, day : null, monthDays : null, monthFirstDay : null, days : [ "星期一", 
    "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ],
    ctor : function (vNow) 
    {
        var now = vNow || new Date();
        //如果为指定date对象，则为当前日期对象
        this.year = now.getFullYear();
        this.month = now.getMonth();
        this.date = now.getDate();
        this.day = now.getDay();
        this.monthFirstDay = new Date(this.year, this.month, 1).getDay();
        this.monthDays = [ 31, this.getFebruaryDays(this.year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ];
        return this;
    },
    isLeap : function (vYear) 
    {
        return vYear % 400 == 0 || (vYear % 4 == 0 && vYear % 100 != 0);
    },
    getFebruaryDays : function (vYear) 
    {
        return this.isLeap(vYear) ? 29 : 28;
    },
    format : function () 
    {
        return (this.month + 1) + "/" + this.date + "/" + this.year + "  " + this.dayMap[this.day];
    },
    getDay : function () 
    {
        return this.days[this.day - 1] ;
    },
    getMonthDay : function () 
    {
        return this.monthDays[this.month];
    },
    getCalTr : function () 
    {
        return (this.monthFirstDay + this.getMonthDay())  / 7;
    },
    cal : function () 
    {
        var that = this;
        console.log("%c   日   一   二   三   四   五   六   ", 'background: #222; color: #bada55');
        console.log("-----------------------------------");
        for (var i = 0; i < this.getCalTr(); i++) 
        {
            var temp = "";
            for (var j = 0; j < 7; j++) 
            {
                var tempData = (i * 7 + j) - that.monthFirstDay + 1 if (tempData < 1) {
                    temp = temp + "prev ";
                }
                else if (tempData > that.getMonthDay()) {
                    temp = temp + " next";
                }
                else {
                    if (tempData > 9) {
                        temp = temp + "  " + tempData + " ";
                    }
                    else {
                        temp = temp + "   " + tempData + " ";
                    }
                }
            }
            console.log(temp);
            console.log("-----------------------------------");
        }
    }
}
calendar.ctor().cal();
calendar.ctor(new Date(2015, 10)).cal();

总结

不足

本例中的ctor并非构造函数，而是针对一个对象进行变更，重新执行ctor后会替换calendar的属性值。 未对之前和之后的日期进行获取，如需相关功能，可在ctor中设置prevMonth 和 nextMonth的值，需要注意跨年度问题，时间和需求问题，暂未实现。

思考

是否采用构造函数的方式生成多个对象？ （如果是工具类的话，不需要构造函数） 方法中采用this.param 还是获取外部参数 如何界定？

收获

用面向对象的方式编写js，思路清晰，语感更好。