重构日期选择级联组件

这是一个很常见的日期选择级联组件,先看下效果:

View Code
<div>
<p>
<input type="text" id="birthday" name="birthday" value="2008/2/29" />
</p>
</div>
<script src="http://files.cnblogs.com/akakingback/datacascade-origin.js"></script>
<script>
window.onload
= function() {
var date = new DateCascade('birthday');
};
</script>

这个组件是基于Cubee里的相同组件Y.DateCascade改写的,由于原来的组件代码依赖于YUI过于繁琐及存在着一些bug,于是用原生js重构了一遍。以下是重构的过程的一些思路。

一、分析组件的结构及行为

其实这个组件的结构及行为很简单,不外乎是年月日间互相联动,动态改变select里的option个数及其值。

  1. 日期需要有一个上限及下限,比如从1900年1月1日开始,最多能选到2012年12月21日;
  2. 能根据不同的月份显示不同的天数,比如1月有31天可选,闰年的2月则只有29天可选等;
  3. 可以手动设定其默认选中的值;
  4. 最后一个特殊的地方,依赖一个input的文本框(业务需要),当JS失效时可以实现平稳退化,手动输入日期(当然可以不依赖这个,直接将select的功能抽取出来)。

二、配置参数

根据上边的结构分析,我们很容易想到组件的配置参数:

  1. dateStart:日期的下限,可选,默认为1900/01/01;
  2. dateEnd:日期的上限,可选,默认为当天;
  3. dateDefault:初始化时默认选中的日期,可选,可以为input里的日期值;
  4. id:input的id,js将会将select动态加到input节点的后面。
组件的使用方法如下:
var date = new DateCascade(id, {
    dateStart: xxxx/xx/xx,
    dateEnd: xxxx/xx/xx,
    dateDefault: xxxx/xx/xx
});

三、对外提供的接口

师兄说过,开发一个组件,先想好其接口方法,再思考实现其功能的逻辑方法。这个组件提供了一些常用的方法:

  1. render:渲染结构,这个方法在初始化init的时候调用了一次,后面可以多次调用更改其参数重新渲染结构(不影响之前绑定过的事件);
    //上下限均为默认值,初始化时已经调用过一次render方法
    var dt = new DateCascade('birthday',{});
    //重新设置上下限及默认选中值
    dt.render({
        dateStart: '1930/01/01',
        dateEnd: '2012/12/21',
        dateDefault: '1989/11/05'
    });
    
  2. renderYear,renderMonth,renderDay:分别渲染年月日的select结构;
  3. setNewDate:设置新的选中日期,参数形式有两种:
    dt.setNewDate('2011/01/20');// 传进Date值
    dt.setNewDate('2011', '01', '20'); //按年月日传进参数,主要考虑到传进的年月日可能有空值
    
  4. setNewYear,setNewMonth,setNewDay:分别设置新的年月日;

四、逻辑的实现

实现逻辑的思路很简单:知道年月日的可选择范围(如1月的可选天数范围为1-31) -> 渲染相应的日期结构 -> 设置选中日期。

所以起始点在于获取年月日的可选择范围:

        /**
		 * 获取年份区间
		 * @method _getYearRange
         * @return {Object}
		 * @private
		 */
		_getYearRange: function(){
			var that = this;
			return {
				min: that._dsYear,
				max: that._deYear
			};
		},
        
        /**
		 * 获取月份区间
		 * @method _getMonthRange
         * @param y {Number}
         * @return {Object}
		 * @private
		 */
		_getMonthRange: function(y){
			var that = this, min = 1, max = 12;
			if (y == that._dsYear) {
				min = that._dsMonth;
			}
			if (y == that._deYear) {
				max = that._deMonth;
			}
			return {
				min: min,
				max: max
			};
		},
        
        /**
		 * 获取天数区间
		 * @method _getMonthRange
         * @param y {Number}
         * @param m {Number}
         * @return {Object}
		 * @private
		 */
		_getDayRange: function(y, m){
			var that = this, min = 1, max = 31;
			if (m) {
				if (m != 2) {
					max = that._dayInMonth[m - 1];
				}
				else {
					max = that._isLeapYear(y) ? 29 : 28;
				}
				if (y == that._dsYear && m == that._dsMonth) {
					min = that._dsDay;
				}
				if (y == that._deYear && m == that._deMonth) {
					max = that._deDay;
				}
			}
			return {
				min: min,
				max: max
			};
		}
然后粗略浏览一下实现整个组件的逻辑方法:(细节请看这里
var DateCascade = function(){
        //构造函数
	function DateCascade(){
		this._init.apply(this, arguments);
	}
        //函数原型
	DateCascade.prototype = {
		constructor: DateCascade,
		_init: function(id, config){
            //初始化  
		},
		_buildParam: function(config){
            //设置参数
		},
		_bindEvent: function(){
            //绑定change事件
		},
		render: function(config){
            //渲染结构
		},
		_isLeapYear: function(y){
            //是否是闰年
		},
		_isDate: function(d){
            //检查是否是正确的Date格式
		},
		_checkDate: function(date){
            //是否是正确的Date或可形成Date的字符串
		},    
		setNewDate: function(/*y, m, d*/) {
            //设置新日期
		},
		setNewYear: function(y, l){
            //设置新年份
		},
		setNewMonth: function(m, l){
            //设置新月份
		},
		setNewDay: function(d){
            //设置新天数
		},
		renderYear: function(){
            //渲染年份
		},
		renderMonth: function(y){
            //渲染月份
		},
		renderDay: function(y, m){
            //渲染天数
		},
		_getYearRange: function(){
            //获取年份区间
		},
		_getMonthRange: function(y){
            //获取月份区间
		},
		_getDayRange: function(y, m){
            //获取天数区间
		}
	};
	return DateCascade;
}();

五、其他

其他的一些细节及应该注意的地方
  1. render年月日结构时使用原生的select.add(new Option(text, value), undefined)的形式添加选项,速度快(原来的组件使用YUI方法添加的,IE6下会出现渲染延迟的bug);
  2. 将日期值转成数值时要用parseInt(v, 10),别忘了后面的参数10,因为如果v是以0开头的数最后会转成八进制数,而日期经常会出现以0开头的数;
  3. 选中值的时候可以直接使用select.value = v的形式,而不用一个个option的匹配;
  4. 用3的方法选值,如果选项里没有对应的值,不同浏览器的处理不一样,除IE外的浏览器会默认选中第一个选项,而IE不会选中任何值,因此要hack一下;
  5. 添加了getSelectedDate(取得选中日期的值)和updateInput(更新input里的值)的方法;
  6. 没有设置回调函数的功能(个人觉得没必要)

六、下载

posted @ 2011-03-01 10:04  akakingback  阅读(892)  评论(0编辑  收藏