利用原生JavaScript實(shí)現(xiàn)造日歷輪子實(shí)例代碼

constructor(options) {
 let defaluteOptions = {
 element: null, //這是節(jié)點(diǎn)
 startOfWeek: 1,
 strings: {
 week: n => {
 let map = {
 0: '周日',
 1: '周一',
 2: '周二',
 3: '周三',
 4: '周四',
 5: '周五',
 6: '周六',
 }
 return map[n];
 },
 templateDay: `<li class="currentMonth">
 <span class="dayLabel">
 <span class="day"></span>
 <span class="unit">日</span>
 </span>
 </li>`
 },
 days: {},
 }
 //賦值默認(rèn)參數(shù)
 this.options = Object.assign({}, defaluteOptions, options);
 //輪番就調(diào)用函數(shù)動(dòng)態(tài)創(chuàng)建dom
 this.checkOptions()._generateTime()._generateWeekDay()._generateCurrentDay();

checkOptions() {
 //如果節(jié)點(diǎn)不存在直接拋出錯(cuò)誤
 if (!this.options.element) {
 throw new Error('element is request');
 }
 return this;
 }

_generateTime() {
 let data = new Date(); //時(shí)間
 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; //日歷總?cè)兆訑?shù)為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 class="weekdays"></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;
 }

 //創(chuàng)建當(dāng)前月份日子
 _generateCurrentDay() {
 let date = this.options.days;
 let calendar = document.querySelector('.calendar');
 let ol = dom.create(`<ol class="days"></ol>`);
 let getWeek = this._getWeekWeek(date.year, date.month-1, date.day); //星期幾
 let getMonth = this._getMonth(date.year, date.month) //月份天數(shù)
 let getMonthDay = this._getWeekDay(); //幾號(hào)
 date.countDay = 0;
 date.countDay += getMonth;
 calendar.appendChild(ol);
 //創(chuàng)建當(dāng)月日子模塊
 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');
 //判斷日歷起止，對(duì)本月日子進(jìn)行賦值
 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();

 }

_generatePrevMonth() {
 let date = this.options.days;
 let year = date.year;
 let month = date.month;
 let beginWeek = this._getWeekWeek(year,month-1,1);//本月開始星期
 let countMonth = this._getMonth(year,month-1);//上月月份天數(shù)
 let li = document.querySelectorAll('.dayLabel>.day');
 beginWeek == 0 ? beginWeek+= 7 : ''; //如果月份開頭為星期日，會(huì)出bug，這是防止
 date.countDay += beginWeek;
 this.createArray(beginWeek,this.options.startOfWeek).map((day,i)=>{
 if(i<beginWeek) {
 //上月總天數(shù)-本月開始星期幾+1+i
 li[i].textContent = countMonth - beginWeek + 1 + i;
 }
 }); 
 return this;
 }

//創(chuàng)建下個(gè)月日子
_generateNextMonth() {
 let date = this.options.days;
 let year = date.year;
 let month = date.month;
 let beginWeek = this._getWeekWeek(year,month,1);//開始星期
 let countMonth = this._getMonth(year,month+1);//下月月份天數(shù)
 let li = document.querySelectorAll('.dayLabel>.day');
 //data.countDay統(tǒng)計(jì)了上月和本月的日子數(shù)總量，直接減去即可
 this.createArray(42-date.countDay , this.options.startOfWeek).map((day,i)=>{
 li[date.countDay+i].textContent = i+1;
 });
 }

//dom.create()調(diào)用
let dom = {
 create(html) {
 let template = document.createElement('template');
 template.innerHTML = html;
 return template.content.firstChild;
 }
}

 //this.createArray()調(diào)用
 //創(chuàng)建數(shù)組節(jié)點(diǎn)
 createArray(length, fill) {
 let array = Array.apply(null, {
 length: length
 }).map(() => fill);
 return array;
 }

 //上一個(gè)月
 previousMonth() {
 // this.options.days.month -= 1;
 this.changeMonth('prev');
 }

 //下一個(gè)月
 nextMonth() {
 // this.options.days.month += 1;
 this.changeMonth('next');
 }

 //回到今天
 resetMonth() {
 // this._generateTime();
 this.changeMonth('defalut');
 }

 //封裝月份dom
 changeMonth(status) {
 let date = this.options.days;
 switch(status) {
 case 'prev': {
 --date.month < 1 ? date.year-- ? date.month = 12 : '' : '';
 break;
 }

 case 'next': {
 ++date.month > 12 ? date.year++ ? date.month = 1 : '' : '';
 break;
 }

 case 'defalut': {
 this._generateTime();
 break;
 }
 }
 //移除節(jié)點(diǎn)
 this._generateCalendar();
 //重新添加節(jié)點(diǎn)
 this._generateCurrentDay();
 }