在日常开发中，大多数都是在和框架打交道，久而久之便遗忘了原生JS的感觉，个人感觉中原生JS基础还是很重要的，所以最近就利用了空余时间造一个轮子出来，虽然以我的水平造出来的轮子质量还是不太可靠的，但是我觉得用来练练手还是不错的，哈哈！！
So, Let's begin!
github：github.com/Zero-jian/p…
以下是日历的样子，是有点难看，讲究讲究，重点在于JS部分，嘻嘻！！！
关于日历组件的实现思路
设置默认参数
检查节点参数是否传入，否则抛出错误
动态创建显示本日星期几的横轴
动态创建日历的日子
最后添加一点dom动作就好
先来看看构造函数内容
constructor(options) { let defaluteOptions = { element: null, //这是节点 startOfWeek: 1, strings: { week: n => { let map = { 0: '周日', 1: '周一', 2: '周二', 3: '周三', 4: '周四', 5: '周五', 6: '周六', } return map[n]; }, templateDay: `<li> <span> <span></span> <span>日</span> </span> </li>` }, days: {}, } //赋值默认参数 this.options = Object.assign({}, defaluteOptions, options); //轮番就调用函数动态创建dom this.checkOptions()._generateTime()._generateWeekDay()._generateCurrentDay();
初始化创建Calendar类对象的时候设置数值，赋值默认参数以及调用方法来动态创建dom，相信小伙伴们看懂这段代码没压力。
该轮子我全程都是用ES6写的，毕竟程序员还是要跟上潮流的！！
赋值参数后开始轮番调用函数，首先调用的是**this.checkOptions()**方法，检查节点是否存在
checkOptions() { //如果节点不存在直接抛出错误 if (!this.options.element) { throw new Error('element is request'); } return this; }
接下来就是获取当天的年月日
毕竟是日历，获取当前的年月日当参考还是很重要的
_generateTime() { let data = new Date(); //时间 let year = this.options.days.year = data.getFullYear(); //年份 let month = this.options.days.month = data.getMonth() + 1; //月份 let day = this.options.days.day = data.getDate(); //日子 this.options.days.countDay = 0; //日历总日子数为7*6=42 this.options.days.noMonth = data.getMonth() + 1; //不变的月份 this.options.days.noYear = data.getFullYear(); //不变的年份 return this; }
创建星期横轴
_generateWeekDay() { let { startOfWeek, strings } = this.options; let calendar = document.querySelector('.calendar'); let ol = dom.create(`<ol></ol>`); calendar.appendChild(ol); let weekIndex = this.createArray(7, startOfWeek).map((day, i) => { let li = dom.create(`<li>${strings.week(i)}</li>`); //判断是否为今天 ol.appendChild(li); }); return this; }
dom.create是封装好的方法，传入模板即可创建并返回回来
this.createArray()也是封装好的方法，本函数是创建一个长度为7的数组，为什么长度为7？因为周一到周日的长度为7啊，然后开始使用map映射和遍历来创建节点并添加document.body里面！！！
唔唔唔，去到这里，星期横轴就创建好了，接下来是重点部分了，就是创建对于的星期的日子日历，其实只要掌握逻辑就好了，不过因为我是菜鸡，写的时候也有点掉坑，所以，哈哈，你们对我写的代码参考参考就好了！！
接下来是重点了，就是创建日子
创建日历日子分为三个部分，第一部分是上个月的日子，第二是本月的日子，第三部分是下个月的日子，三个部分所以把它们分别封装起来，嫑相互影响！！
话不多说，贴上代码
//创建当前月份日子 _generateCurrentDay() { let date = this.options.days; let calendar = document.querySelector('.calendar'); let ol = dom.create(`<ol></ol>`); let getWeek = this._getWeekWeek(date.year, date.month-1, date.day); //星期几 let getMonth = this._getMonth(date.year, date.month) //月份天数 let getMonthDay = this._getWeekDay(); //几号 date.countDay = 0; date.countDay += getMonth; calendar.appendChild(ol); //创建当月日子模块 let dayIndex = this.createArray(42, this.options.startOfWeek).map((day, i) => { let li = dom.create(this.options.strings.templateDay); let span = li.querySelector('.dayLabel>.day'); //判断日历起止，对本月日子进行赋值 if (i >= getWeek && i <= (getMonth + getWeek)) { span.textContent = i - getWeek; } //判断是否为今天 if (i == (getMonthDay + getWeek) && date.noMonth == date.month && date.noYear == date.year) { li.classList.add('today'); } ol.appendChild(li); }); document.querySelector('h1.date').appendChild(dom.create(`<p data-role="time">${date.year}-${date.month}-${date.day}</p>`)); this._generatePrevMonth()._generateNextMonth(); }