重构日期选择级联组件
这是一个很常见的日期选择级联组件，先看下效果：
View Code
<div>
<p>
<input type="text" id="birthday" name="birthday" value="2008/2/29" />
</p>
</div>
<script src="https://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个数及其值。
- 日期需要有一个上限及下限，比如从1900年1月1日开始，最多能选到2012年12月21日；
- 能根据不同的月份显示不同的天数，比如1月有31天可选，闰年的2月则只有29天可选等；
- 可以手动设定其默认选中的值；
- 最后一个特殊的地方，依赖一个input的文本框（业务需要），当JS失效时可以实现平稳退化，手动输入日期（当然可以不依赖这个，直接将select的功能抽取出来）。
二、配置参数
根据上边的结构分析，我们很容易想到组件的配置参数：
- dateStart：日期的下限，可选，默认为1900/01/01;
- dateEnd：日期的上限，可选，默认为当天；
- dateDefault：初始化时默认选中的日期，可选，可以为input里的日期值；
- id：input的id，js将会将select动态加到input节点的后面。
组件的使用方法如下：
var date = new DateCascade(id, {
dateStart: xxxx/xx/xx,
dateEnd: xxxx/xx/xx,
dateDefault: xxxx/xx/xx
});
三、对外提供的接口
师兄说过，开发一个组件，先想好其接口方法，再思考实现其功能的逻辑方法。这个组件提供了一些常用的方法：
- render：渲染结构，这个方法在初始化init的时候调用了一次，后面可以多次调用更改其参数重新渲染结构（不影响之前绑定过的事件）；
//上下限均为默认值，初始化时已经调用过一次render方法 var dt = new DateCascade('birthday',{}); //重新设置上下限及默认选中值 dt.render({ dateStart: '1930/01/01', dateEnd: '2012/12/21', dateDefault: '1989/11/05' }); - renderYear，renderMonth，renderDay：分别渲染年月日的select结构；
- setNewDate：设置新的选中日期，参数形式有两种：
dt.setNewDate('2011/01/20');// 传进Date值 dt.setNewDate('2011', '01', '20'); //按年月日传进参数，主要考虑到传进的年月日可能有空值 - 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;
}();
五、其他
其他的一些细节及应该注意的地方
- render年月日结构时使用原生的select.add(new Option(text, value), undefined)的形式添加选项，速度快（原来的组件使用YUI方法添加的，IE6下会出现渲染延迟的bug）；
- 将日期值转成数值时要用parseInt(v, 10)，别忘了后面的参数10，因为如果v是以0开头的数最后会转成八进制数，而日期经常会出现以0开头的数；
- 选中值的时候可以直接使用select.value = v的形式，而不用一个个option的匹配；
- 用3的方法选值，如果选项里没有对应的值，不同浏览器的处理不一样，除IE外的浏览器会默认选中第一个选项，而IE不会选中任何值，因此要hack一下；
- 添加了getSelectedDate（取得选中日期的值）和updateInput（更新input里的值）的方法；
- 没有设置回调函数的功能（个人觉得没必要）
