看了博友auntion的【擅用事件代理，警惕闭包的性能陷阱】真是一语惊醒梦中人的感觉...

本文主要是介绍看了博友auntion的【擅用事件代理，警惕闭包的性能陷阱】真是一语惊醒梦中人的感觉...，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

之前写过一个日历控件，现在回头看了一下代码，简直就是一坨屎

今天抽个时间，用事件代理模式重写了一下

代码

  1 Date.prototype.Add = function () {
  2      if (arguments[ 0 ] !== undefined)
  3          this .setTime( this .getTime() + ( 60 * 60 * 24 * 1000 * parseInt(arguments[ 0 ])));
  4      return this ;
  5 };
  6 Date.prototype.format = function () {
  7      var y = this .getFullYear();
  8      var m = this .getMonth() + 1 ;
  9      var d = this .getDate();
10      if (arguments[ 0 ] !== undefined)
11          return arguments[ 0 ].replace( " MM " , m).replace( " dd " , d).replace( " yyyy " , y);
12      return m + " / " + d + " / " + y;
13 };
14 Date.prototype.convert = function () {
15      if (arguments[ 0 ] !== undefined && arguments[ 0 ] !== "" )
16          return new Date(arguments[ 0 ]);
17      return this ;
18 };
19 var Calendar = ( function () {
20      var that = this ;
21      var zIndex = 1000 ;
22      var monthRow = 0 ;
23      var Week = [ " <font color='red'>Sun</font> " , " Mon " , " Tue " , " Wed " , " Thur " , " Fri " , " <font color='red'>Sat</font> " ];
24      var Month = [ " January " , " February " , " March " , " April " , " May " , " June " , " July " , " August " , " September " , " October " , " November " , " December " ];
25      var MonthDay = [ 31 , 28 , 31 , 30 , 31 , 30 , 31 , 31 , 30 , 31 , 30 , 31 ];
26      var tdStyle = " font-size: 12px;height: 18px;font-family: verdana, arial, helvetica; " ;
27      var thStyle = " font-size: 11px;height: 20px;font-family: verdana, arial, helvetica;background-color:#ebf4fc;width:30px " ;
28      var selStyle = " color:black; background:white; font-family:verdana, arial, helvetica; font-size:11px;  BORDER-BOTTOM:#DDE3E6 solid 1px; BORDER-LEFT:#ADC3C6 solid 1px; BORDER-RIGHT:#DDE3E6 solid 1px; BORDER-TOP:#ADC3C6 solid 1px; " ;
29      var ImgArr = { closeBtn: " images/button_close.gif " , navLeft: " images/navLeft.gif " , Left: " images/left.gif " , navRight: " images/navRight.gif " , Right: " images/right.gif " , yclose: " images/yclose.gif " };
30      var getPosXY = function (e) {
31          if (e) {
32              var rect = e.getBoundingClientRect();
33              var top = rect.top + document.documentElement.scrollTop - document.documentElement.clientTop + e.offsetHeight;
34              var left = rect.left + document.documentElement.scrollLeft - document.documentElement.clientLeft;
35              if (document.all) {
36                 top -= 2 ;
37                 left -= 2 ;
38             }
39              return { top: top, left: left };
40         }
41          else
42              return { top: 0 , left: 0 };
43     };
44      var currentDate = new Date();
45      var currentInput = null ;
46      var currentCallback = null ;
47      var bodyCalendar = function () {
48          var html = "" ;
49         html += ' <div id="__viewdiv" style="position: absolute; display: none; width: 210px; height: 150px;cursor:pointer;z-index: ' + (zIndex ++ ) + ' ;background-color:white;border:1px solid #6D84B4"> ' ;
50         html += ' <div style="background-color:#6D84B4;padding:0px 3px;height:25px;line-height:25px;"> ' ;
51         html += ' <div style="width:88%;float:left;text-align:left;padding:3px 0px;"><table cellspacing="0" cellpadding="0" style="width:100%" align="center"> ' ;
52         html += ' <tr><td><img src=" ' + ImgArr.navLeft + ' " name="navLeft"></td><td><img src=" ' + ImgArr.Left + ' " name="left"></td> ' ;
53         html += ' <td> ' ;
54         html += ' <span style=" ' + tdStyle + ' ;width:70px;" id="__monthSpan"> ' + Month[(currentDate.getMonth())] + ' </span> ' ;
55         html += ' </td><td> ' ;
56         html += ' <span style=" ' + tdStyle + ' " id="__yearSpan"> ' + currentDate.getFullYear() + ' </span> ' ;
57         html += ' </td><td><img src=" ' + ImgArr.Right + ' " name="right"></td><td><img src=" ' + ImgArr.navRight + ' " name="navRight"></td> ' ;
58         html += ' </tr></table></div> ' ;
59         html += ' <div style="width:12%;float:right;text-align:right;padding:3px 0px;"><img name="btnClose" src=" ' + ImgArr.closeBtn + ' "></div> ' ;
60         html += ' </div> ' ;
61         html += ' <div id="__calendar" style="cursor:pointer"> ' ;
62         html += infoCalendar();
63         html += ' </div> ' ;
64         html += ' <div style="background-color:#ebf4fc;height:18px;line-height:18px;text-align:right;font-family:verdana, arial, helvetica; font-size:11px;">Today: ' + new Date().format() + '  </div> ' ;
65         html += ' </div> ' ;
66          return html;
67     };
68      var infoCalendar = function () {
69          var dateStr = currentDate;
70          var y = parseInt(dateStr.getFullYear());
71          var m = parseInt(dateStr.getMonth());
72          var d = parseInt(dateStr.getDate());
73         dateStr = new Date((m + 1 ) + " /1/ " + y);
74          var dayofweek = parseInt(dateStr.getDay());
75          function buildTH(vle, style) {
76              return ' <th style=" ' + style + ' "> ' + vle + ' </th> ' ;
77         }
78          var html = "" ;
79         html += ' <table style="border-collapse: collapse;border: 1px solid #ccffff" cellspacing="0" cellpadding="0" width="100%" align="center" border="1"> ' ;
80         html += ' <tr> ' ;
81          for ( var i = 0 , len = Week.length; i < len; i ++ )
82             html += buildTH(Week[i], thStyle);
83         html += ' </tr> ' ;
84          if (m == 1 ) {
85              if (parseInt(y) % 4 == 0 )
86                 MonthDay[m] = 29 ;
87              else
88                 MonthDay[m] = 28 ;
89         }
90          var nowprintday = 0 ;
91          var truedayMonth = MonthDay[m];
92          var html_week = '' ;
93          for ( var j = 0 ; j < 6 ; j ++ ) {
94             monthRow = j;
95             dayofweek = parseInt(dateStr.getDay());
96             html_week += ' <tr align="center"> ' ;
97              for ( var w = 0 ; w < dayofweek; w ++ ) {
98                  if (m == 0 )
99                     m = 12 ;
100                  var x = parseInt(parseInt(MonthDay[m - 1 ]) - dayofweek + (w + 1 ));
101                 html_week += ' <td style=" ' + tdStyle + ' width:30px;"><font color="#d3d3d3"> ' + x + ' </font></td> ' ;
102             }
103              for ( var tw = dayofweek; tw < 7 ; tw ++ ) {
104                 nowprintday ++ ;
105                  if (nowprintday == d) {
106                     html_week += ' <td name="daytd"  vle=" ' + ((dateStr.getMonth() + 1 ) + " / " + nowprintday + " / " + y) + ' " style=" ' + tdStyle + ' background-color:#696969;width:30px;"> ' + nowprintday + ' </td> ' ;
107                 }
108                  else {
109                     html_week += ' <td name="daytd" vle=" ' + ((dateStr.getMonth() + 1 ) + " / " + nowprintday + " / " + y) + ' " style=" ' + tdStyle + ' width:30px;"> ' + nowprintday + ' </td> ' ;
110                 }
111                 dateStr = dateStr.Add( 1 );
112                  if (nowprintday >= truedayMonth)
113                      break ;
114             }
115              for ( var i = 1 ; i <= ( 7 - (tw + 1 )); i ++ ) {
116                 html_week += ' <td style=" ' + tdStyle + ' width:30px;"><font color="#d3d3d3"> ' + i + ' </font></td> ' ;
117             }
118             html_week += ' </tr> ' ;
119              if (nowprintday >= truedayMonth)
120                  break ;
121         }
122         html += html_week;
123         html += ' </table> ' ;
124          return html;
125     };
126      var GetIndex = function (arr, key) {
127          for ( var i = 0 ; i < arr.length; i ++ ) {
128              if (arr[i] == key)
129                  return i + 1 ;
130         }
131          return - 1 ;
132     }
133      var SetHeight = function () {
134          if ( ! document.all) {
135              if (monthRow > 4 )
136                 document.getElementById( " __viewdiv " ).style.height = 173 + " px " ;
137              else
138                 document.getElementById( " __viewdiv " ).style.height = 154 + " px " ;
139         }
140     };
141      var setCalendarDiv = function (dateStr, calendardiv) {
142         currentDate = new Date().convert(dateStr);
143         calendardiv.innerHTML = bodyCalendar();
144     };
145      var showYearMonth = function (ID, div, target, current) {
146          var yearDiv = document.getElementById(ID);
147          if ( ! yearDiv) {
148             yearDiv = document.createElement( " div " );
149             yearDiv.id = ID;
150             div.appendChild(yearDiv);
151             yearDiv.innerHTML = createYearMonth(ID, current);
152         }
153          else
154             yearDiv.innerHTML = createYearMonth(ID, current);
155          var o = getPosXY(target);
156         yearDiv.style.zIndex = zIndex ++ ;
157         yearDiv.style.position = " absolute " ;
158         yearDiv.style.display = "" ;
159         yearDiv.style.width = (ID.indexOf( " month " ) >= 0 ? " 80px " : " 360px " );
160         yearDiv.style.top = o.top;
161         yearDiv.style.left = o.left;
162     }
163      var createYearMonth = function (ID, current) {
164          var row, col;
165          if (ID.indexOf( " month " ) >= 0 )
166             row = 12 , col = 1 , mid = GetIndex(Month, document.getElementById( " __monthSpan " ).innerHTML);
167          if (ID.indexOf( " year " ) >= 0 )
168             row = 8 , col = 9 , mid = parseInt(document.getElementById( " __yearSpan " ).innerHTML);
169          var html = '' , w = (col == 1 ? 100 : 90 ) / col;
170          var start = col == 1 ? 1 : current - 40 ;
171          var end = 0 ;
172         html += ' <table cellspacing="0" cellpadding="0" border="0" style="width:100%;cursor:pointer;background-color:white;border: 1px solid #6D84B4;font-family:verdana, arial, helvetica; font-size:12px;"> ' ;
173         html += ' <tr> ' ;
174          if (col != 1 )
175             html += ' <td style="width:3%" valign="midden" align="center"><img src=" ' + ImgArr.Left + ' " name="year_img_left" vle=" ' + start + ' " /></td> ' ;
176          for ( var i = 0 ; i < col; i ++ ) {
177              var yearStart = start + (i * row);
178              var yearEnd = yearStart + row;
179             html += ' <td style="width: ' + w + ' %" align="center"> ' ;
180             html += ' <table cellspacing="0" cellpadding="0" border="0" style="width:100%;font-family:verdana, arial, helvetica; font-size:12px;"> ' ;
181              for ( var j = yearStart; j < yearEnd; j ++ ) {
182                  if (mid == j)
183                     html += ' <tr><td name=" ' + (col == 1 ? " monthtd " : " yeartd " ) + ' " vle=" ' + j + ' " style="height:20px;background-color: #6D84B4"> ' + (col == 1 ? Month[j - 1 ] : j) + ' </td></tr> ' ;
184                  else
185                     html += ' <tr><td name=" ' + (col == 1 ? " monthtd " : " yeartd " ) + ' " vle=" ' + j + ' " style="height:20px;"> ' + (col == 1 ? Month[j - 1 ] : j) + ' </td></tr> ' ;
186             }
187             html += ' </table> ' ;
188             html += ' </td> ' ;
189             end = yearEnd;
190         }
191          if (col != 1 ) {
192             html += ' <td style="width:3%" valign="midden" align="center"> ' ;
193             html += ' <img src=" ' + ImgArr.Right + ' " name="year_img_right" vle=" ' + end + ' " /> ' ;
194             html += ' </td> ' ;
195         }
196         html += ' </tr> ' ;
197         html += ' </table> ' ;
198          return html;
199     }
200      var show = function () {
201          var o = getPosXY(currentInput);
202         document.getElementById( " __viewdiv " ).style.top = o.top;
203         document.getElementById( " __viewdiv " ).style.left = o.left;
204         document.getElementById( " __viewdiv " ).style.display = '' ;
205         SetHeight();
206     }
207      var init = function (dest, today, callbackfn) {
208          if ( ! dest || dest == "" ) {
209             alert( " No target! " );
210              return ;
211         }
212          if ( typeof dest == " string " )
213             dest = document.getElementById(dest);
214          var div = document.getElementById( " body_div_temp_ " );
215          if ( ! div) {
216             div = document.createElement( " div " );
217             div.id = " body_div_temp_ " ;
218             document.body.appendChild(div);
219         }
220          var span = document.createElement( " span " );
221         span.innerHTML = (today && today === 1 ? '  <a href="javascript:void(0);">Today</a> ' : "" ) + '  <img src="images/icon_calendar.gif" /> ' ;
222         dest.parentNode.insertBefore(span, dest.nextSibling);
223         span.onclick = ( function (obj, callback) {
224              return function () {
225                 currentCallback = callback;
226                  var _event = arguments[ 0 ] || window.event;
227                  var target = _event.target || _event.srcElement;
228                  var tagname = target.tagName.toLowerCase();
229                  if (tagname == " a " ) {
230                     obj.value = new Date().format();
231                      if ( typeof currentCallback == " function " )
232                         currentCallback();
233                 }
234                  else if (tagname == " img " ) {
235                     currentInput = obj;
236                     setCalendarDiv(obj.value, div);
237                     show();
238                 }
239                  else
240                      return false ;
241             }
242         })(dest, callbackfn);
243         div.onclick = ( function (callback) {
244              return function () {
245                  var _event = arguments[ 0 ] || window.event;
246                  var target = _event.target || _event.srcElement;
247                  var tagname = target.tagName.toLowerCase();
248                  if (tagname == " td " ) {
249                      var name = target.getAttribute( " name " );
250                      var vle = target.getAttribute( " vle " );
251                      if (name == " daytd " ) {
252                         currentInput.value = vle
253                         document.getElementById( " __viewdiv " ).style.display = ' none ' ;
254                          if ( typeof callback == " function " )
255                             callback();
256                     }
257                      else if (name == " yeartd " ) {
258                          var text = GetIndex(Month, document.getElementById( " __monthSpan " ).innerHTML) + " / " + 1 + " / " + vle;
259                         setCalendarDiv(text, div);
260                         show();
261                     }
262                      else if (name == " monthtd " ) {
263                          var text = vle + " / " + 1 + " / " + document.getElementById( " __yearSpan " ).innerHTML;
264                         setCalendarDiv(text, div);
265                         show();
266                     }
267                 }
268                  else if (tagname == " img " ) {
269                      var name = target.getAttribute( " name " );
270                      var vle = target.getAttribute( " vle " );
271                      if (name == " btnClose " ) {
272                         div.innerHTML = "" ;
273                     }
274                      if (name == " year_img_left " || name == " year_img_right " ) {
275                         showYearMonth( " yearDiv " , div, document.getElementById( " __yearSpan " ), parseInt(vle));
276                     }
277                      if (name == " navLeft " || name == " navRight " || name == " left " || name == " right " ) {
278                          var y = parseInt(document.getElementById( " __yearSpan " ).innerHTML);
279                          var m = GetIndex(Month, document.getElementById( " __monthSpan " ).innerHTML);
280                          if (name == " navLeft " )
281                             y -= 1 ;
282                          if (name == " navRight " )
283                             y += 1 ;
284                          if (name == " left " )
285                             m -= 1 ;
286                          if (name == " right " )
287                             m += 1 ;
288                          var text = m + " / " + 1 + " / " + y;
289                         setCalendarDiv(text, div);
290                         show();
291                     }
292                 }
293                  else if (tagname == " span " ) {
294                      if (target.id == ' __monthSpan ' ) {
295                         showYearMonth( " monthDiv " , div, target, GetIndex(Month, target.innerHTML));
296                     }
297                      else if (target.id == " __yearSpan " ) {
298                         showYearMonth( " yearDiv " , div, target, parseInt(target.innerHTML));
299                     }
300                 }
301                  else
302                      return false ;
303             }
304         })(callbackfn);
305     }
306      var isArray = function (vle) {
307          return Object.prototype.toString.call(vle) === " [object Array] " ;
308     }
309     that.ready = function (ArrID, today, callbackfn) {
310          if ( ! isArray(ArrID))
311             ArrID = [ArrID];
312          for ( var i = 0 , len = ArrID.length; i < len; i ++ ) {
313             init(ArrID[i], today, callbackfn);
314         }
315     }
316      return that;
317 })();

下载地址 /Files/yithcn/Calender.rar

转载于:https://www.cnblogs.com/yithcn/archive/2011/01/20/1940425.html

这篇关于看了博友auntion的【擅用事件代理，警惕闭包的性能陷阱】真是一语惊醒梦中人的感觉...的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！