一、列表
javascript动手写日历组件的文章列表，主要是通过原生的JavaScript写的一个简约的日历组件：
（1）javascript动手写日历组件(1)——构建日历逻辑：http://www.cnblogs.com/vczero/p/js_ui_1.html
（2）javascript动手写日历组件(2)——优化UI和添加交互：http://www.cnblogs.com/vczero/p/js_ui_2.html
（3）javascript动手写日历组件(2)——内存和性能优化：http://www.cnblogs.com/vczero/p/js_ui_3.html
（4）github：https://github.com/vczero/UI
日历虽然很简约，但是作为基本使用可以满足要求，UI也相对清爽。
二、内存和性能优化
（1）手动移除事件处理程序
以为在DOM重绘的过程中，避免事件处理程序驻留内存，因此，手动XXX.onclik = null;
for(var e = 0; e < 35; e++){
var node = document.getElementById(‘vczero_celldom_‘ + e);
node.onclick = null; //移除事件处理程序
this.div.removeChild(node);
}
if(!!exist){
exist.onclick = null;
this.div.removeChild(exist);
}
（2）将绑定事件处理程序改成事件委托
对于事件处理程序过多的问题，使用委托是最好的方式。事件委托实际上是事件冒泡，可以在父节点添加事件处理程序，然后，根据需要的目标节点，执行代码。具体的代码改进如下,将for循环中的事件绑定改为在this.div（父元素）上的事件委托：
1 for(var i = 0; i < 35; i++){
2 var cellDOM = document.createElement(‘div‘);
3 cellDOM.style.width = cell.width + ‘px‘;
4 cellDOM.style.height = cell.height + ‘px‘;
5 cellDOM.style.display = ‘inline-block‘;
6 cellDOM.style.float = ‘left‘;
7 cellDOM.style.cursor = ‘pointer‘;
8 cellDOM.style.textAlign = ‘center‘;
9 cellDOM.id = ‘vczero_celldom_‘ + i;
10 cellDOM.style.lineHeight = cell.height + ‘px‘;
11 cellDOM.setAttribute(‘date‘,monthArr.date[i]); //设置日期对象到DOM属性date上
12 cellDOM.innerHTML = monthArr.date[i].getDate();
13 //去掉最后一行横线
14 if(i < 28){
15 cellDOM.style.borderBottom = ‘1px solid #C8CACC‘;
16 }
17
18 if(i < monthArr.preLen || i >= monthArr.currentLen + monthArr.preLen){
19 cellDOM.style.color = ‘#BFBFBF‘;
20 }
21 this.div.appendChild(cellDOM);
22 }
23
24 var _that = this;26 //使用父元素事件委托
27 this.div.addEventListener(‘click‘,function(e){
28 var node = e.target;
29 if(node.id.indexOf(‘vczero_celldom_‘) > -1){
30 var date = new Date(node.getAttribute(‘date‘)).toLocaleString();
31 callback(date);
32 }
33 });
34 if(i < monthArr.preLen || i >= monthArr.currentLen + monthArr.preLen){
35 cellDOM.style.color = ‘#BFBFBF‘;
36 }
37 this.div.appendChild(cellDOM);
38 }
39
40 var _that = this;
41 this.div.addEventListener(‘click‘,function(e){
43 var node = e.target;
44 if(node.id.indexOf(‘vczero_celldom_‘) > -1){
45 var date = new Date(node.getAttribute(‘date‘)).toLocaleString();
46 callback(date);
47 }
48 });
（3）本次修改还包括：
==>前一个月和下一个的日期变灰，本月黑色。
==>将，showUI函数改为回调，可以在调用时更为方便。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript" src="calendar.js"></script>
6 <script type="text/javascript">
7 function showCalendar(){
8 var c = new Calendar(‘calendar‘,new Date());
9 c.showUI(function(date){
10 console.log(date);
11 });
12 }
13 </script>
14 </head>
15 <body onload="showCalendar()">
16 <div id="calendar" style="width:390px; height:270px;"></div>
17 </body>
18 </html>
（4）整个JS代码，折叠起来吧。
1 /*
2 +------------------------------
3 @author:vczero
4 @time:2014/8/10
5 @desc:简易日历组件
6 +------------------------------
7 */
8 var Calendar = (function(){
9 var Calendar = function(div, date){
10 this.div = document.getElementById(div);
11 var w = this.div.style.width || 390;
12 var h = this.div.style.height || (300 - 30);
13 this.width = parseInt(w) >= 360 ? w : 360;
14 this.height = parseInt(h) >= 180 ? h : 180;
15 this.date = date;
16 this.div.style.width = this.width + ‘px‘; //按默认值设置回去
17 this.div.style.height = this.height + ‘px‘;//按默认值设置回去
18 };
19
20 Calendar.week = [‘星期一‘, ‘星期二‘,‘星期三‘, ‘星期四‘,‘星期五‘, ‘星期六‘, ‘星期日‘];
21
22 Calendar.prototype.showUI = function(callback){
23 var exist = document.getElementById(‘vczero_celldom_0‘);
24 //如果存在节点：移除
25 if(!!exist){
26 for(var e = 0; e < 35; e++){
27 var node = document.getElementById(‘vczero_celldom_‘ + e);
28 node.onclick = null; //移除事件处理程序
29 this.div.removeChild(node);
30 }
31 }
32
33 var width = this.width,
34 height = this.height,
35 cell = {width: (parseInt(width) - 20)/7, height: (parseInt(height) -30 - 20)/5},
36 monthArr = this._monthPanel(this.date);
37 this.div.style.paddingLeft = ‘8px‘;
38 this.div.style.border = ‘2px solid #57ABFF‘;
39 this.div.style.cursor = ‘default‘;
40 this.div.style.fontFamily = ‘微软雅黑‘;
41 this._addHeader();
42 this._addWeekday();
43
44 for(var i = 0; i < 35; i++){
45 var cellDOM = document.createElement(‘div‘);
46 cellDOM.style.width = cell.width + ‘px‘;
47 cellDOM.style.height = cell.height + ‘px‘;
48 cellDOM.style.display = ‘inline-block‘;
49 cellDOM.style.float = ‘left‘;
50 cellDOM.style.cursor = ‘pointer‘;
51 cellDOM.style.textAlign = ‘center‘;
52 cellDOM.id = ‘vczero_celldom_‘ + i;
53 cellDOM.style.lineHeight = cell.height + ‘px‘;
54 cellDOM.setAttribute(‘date‘,monthArr.date[i]); //设置日期对象到DOM属性date上
55 cellDOM.innerHTML = monthArr.date[i].getDate();
56 //去掉最后一行横线
57 if(i < 28){
58 cellDOM.style.borderBottom = ‘1px solid #C8CACC‘;
59 }
60
61 if(i < monthArr.preLen || i >= monthArr.currentLen + monthArr.preLen){
62 cellDOM.style.color = ‘#BFBFBF‘;
63 }
64 this.div.appendChild(cellDOM);
65 }
66
67 var _that = this;
68 //使用父元素事件委托
69 this.div.addEventListener(‘click‘,function(e){
70 var node = e.target;
71 if(node.id.indexOf(‘vczero_celldom_‘) > -1){
72 var date = new Date(node.getAttribute(‘date‘)).toLocaleString();
73 callback(date);
74 }
75 });
76 };
77
78 Calendar.prototype._addHeader = function(){
79 var exist = document.getElementById(‘vczero_datediv‘);
80 if(!!exist){
81 exist.onclick = null;
82 this.div.removeChild(exist);
83 }
84
85 var header = document.createElement(‘div‘);
86 header.style.height = ‘22px‘;
87 header.style.width = this.div.style.width || ‘800px‘;
88
89 //包含左 时间 右的大DIV
90 var dateDiv = document.createElement(‘div‘);
91 dateDiv.style.width = ‘200px‘;
92 dateDiv.style.height = ‘22px‘;
93 dateDiv.style.margin = ‘0 auto‘;
94 dateDiv.style.textAlign = ‘center‘;
95 dateDiv.style.fontWeight = ‘bold‘;
96 dateDiv.id = ‘vczero_datediv‘
97
98 //< DIV
99 var leftDiv = document.createElement(‘div‘);
100 leftDiv.innerHTML = ‘<‘;
101 leftDiv.style.display = ‘inline-block‘;
102 leftDiv.style.float = ‘left‘;
103 leftDiv.style.width = ‘50px‘;
104 leftDiv.style.cursor = ‘pointer‘;
105 leftDiv.style.color = ‘#C5BFBF‘;
106 var _that = this; //获取到this对象
107 leftDiv.addEventListener(‘click‘, function(event){
108 var year = parseInt(_that.date.getFullYear()),
109 month = parseInt(_that.date.getMonth());
110 if(month === 0){
111 _that.date = new Date(year - 1, 11, 1);
112 }else{
113 _that.date = new Date(year, month - 1, 1);
114 }
115 _that.showUI();
116
117 });
118
119 //> DIV
120 var rightDiv = document.createElement(‘div‘);
121 rightDiv.innerHTML = ‘>‘;
122 rightDiv.style.display = ‘inline-block‘;
123 rightDiv.style.float = ‘left‘;
124 rightDiv.style.width = ‘50px‘;
125 rightDiv.style.cursor = ‘pointer‘;
126 rightDiv.style.color = ‘#C5BFBF‘;
127 rightDiv.addEventListener(‘click‘, function(event){
128 var year = parseInt(_that.date.getFullYear()),
129 month = parseInt(_that.date.getMonth());
130 if(month === 11){
131 _that.date = new Date(year + 1, 0, 1);
132 }else{
133 _that.date = new Date(year, month + 1, 1);
134 }
135 _that.showUI();
136 });
137
138
139 //显示月份的DIV
140 var timeDiv = document.createElement(‘div‘);
141 timeDiv.style.display = ‘inline-block‘;
142 timeDiv.style.float = ‘left‘;
143 timeDiv.style.width = ‘100px‘;
144 timeDiv.innerHTML = this.date.getFullYear() + ‘年‘ + (this.date.getMonth() + 1) + ‘月‘;
145
146 dateDiv.appendChild(leftDiv);
147 dateDiv.appendChild(timeDiv);
148 dateDiv.appendChild(rightDiv);
149 this.div.appendChild(dateDiv);
150 }
151
152 //增加星期
153 Calendar.prototype._addWeekday = function(){
154 var exist = document.getElementById(‘vczero_week_0‘);
155 if(!!exist){
156 for(var i = 0; i < 7; i++){
157 var node = document.getElementById(‘vczero_week_‘ + i);
158 node.onclick = null;
159 this.div.removeChild(node);
160 }
161
162 }
163
164 for(var i = 0; i < 7; i++){
165 var weekday = document.createElement(‘div‘);
166 weekday.style.width = (parseInt(this.width) - 20)/7 + ‘px‘;
167 weekday.style.height = ‘20px‘;
168 weekday.style.display = ‘inline-block‘;
169 weekday.style.float = ‘left‘;
170 weekday.style.color = ‘#BFBFBF‘;
171 weekday.style.fontWeight = ‘bold‘;
172 weekday.style.textAlign = ‘center‘;
173 weekday.id = ‘vczero_week_‘ + i;
174 weekday.innerHTML = Calendar.week[i];
175 this.div.appendChild(weekday);
176 }
177 }
178
179 Calendar.prototype._monthPanel = function(date){
180 //如果传递了Date对象，则按Date对象进行计算月份面板
181 //否则，按照当前月份计算面板
182 var date = date || new Date(),
183 year = date.getFullYear(),
184 month = date.getMonth(),
185 day = date.getDate(),
186 week = date.getDay(),
187 currentDays = new Date(year, month + 1, 0).getDate(),
188 preDays = new Date(year, month, 0).getDate(),
189 firstDay = new Date(year, month, 1),
190 firstCell = firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1,
191 bottomCell = 35 - currentDays - firstCell;
192 //前一个月该显示多少天
193 var preMonth = [];
194 for(var p = firstCell; p > 0; p--){
195 preMonth.push(new Date(year, month - 1, preDays - p + 1));
196 }
197 var len = preMonth.length;
198 //本月
199 var currentMonth = [];
200 for(var c = 0; c < currentDays; c++){
201 currentMonth.push(new Date(year, month, c + 1));
202 }
203 //下一个月
204 var nextMonth = [];
205 for(var n = 0; n < bottomCell; n++){
206 nextMonth.push(new Date(year, month + 1, n + 1));
207 }
208
209 preMonth = preMonth.concat(currentMonth, nextMonth);
210 return {
211 date: preMonth,
212 preLen: len,
213 currentLen: currentMonth.length
214 };
215 };
216
217 return Calendar;
218
219 })();
javascript动手写日历组件(3)——内存和性能优化（by vczero）,布布扣,bubuko.com
时间： 2024-12-27 15:35:17