网站设计 webdesign
当前位置:首页 > 网站建设专题 > 网站设计
利用Facade设计模式创建JS日历
发布日期:2010-07-04 阅读次数:817 字体大小:

关于Facade设计模块

设计模式是一个有趣的概念。一般来说,设计模式代表了一种编程语言做好接受的东西(通常是有效的方法)。我已经对模型视图的控制器设计模式写,因为它涉及到整合新闻供稿。设计模式是与语言无关。你可能使用了一些设计模式之前,甚至没有实现它!

Facade是一个术语,它指的是一种人为的或欺骗性的前端公众面对面的方式来隐藏吸引力的基本结构和运作。例如,建筑师可以添加一个大理石墙面的砖大楼外面的街道面临的一面。同样,从外观设计模式是一个概念,即在开发人员创建一个包装,一个公众形象,围绕一个复杂的对象。该包装公开有关的基本方法和对象属性,但往往隐藏了其余大部分。外观模式往往使基础对象更易于使用,或给一个通用对象为特定目的的公众形象。

这正是日历项目一样。要建立日历,你将使用Facade设计模式,创造一个围绕包装内置的JavaScript Date对象。请注意,在这个项目的包装实际上不隐藏任何的日期对象的功能。

制作开始:

1、在程序放置目录里建一个images文件夹(用于存放不同月份所显示的图片)

2、在程序放置目录里建一个calendar.css文件,内容如下:

以下为引用的内容:

以下为引用的内容:

.month, .nav{
 background-color: navy;
 color: white;
 font: 10pt sans-serif;
}
.nav{
 cursor: pointer;
 cursor: hand;
}
.dayHeader{
 color: black;
 font: 10pt sans-serif;
 border-bottom: 1px black solid;
 font-weight: bold;
}
.empty{
 background-color: white;
 border-bottom: 1px black solid;
}
.days{
 color: black;
 background-color: rgb(235,235,235);;
 font: 10pt sans-serif;
 border-bottom: 1px black solid;
 border-left: 1px black solid;
 border-right: 1px black solid;
 cursor: pointer;
 cursor: hand;
}
.date{
 color: maroon;
 font: 10pt sans-serif;
 font-weight: bold;
 border-bottom: 1px black solid;
 border-left: 1px black solid;
 border-right: 1px black solid;
 cursor: pointer;
 cursor: hand;
}

3、在程序放置目录里建一个calendar.js文件,内容如下:

以下为引用的内容:

/*
 脚本创建:齐并科技
 源码出处:www.qbkj.net
*/
//Constructor
function calendar(id,d,p){
 this.id = id;
 this.dateObject = d;
 this.pix = p;
 this.write = writeCalendar;
 this.length = getLength;
 this.month = d.getMonth();
 this.date = d.getDate();
 this.day = d.getDay();
 this.year = d.getFullYear();
 this.getFormattedDate = getFormattedDate;
 //get the first day of the month's day
 d.setDate(1);
 this.firstDay = d.getDay();
 //then reset the date object to the correct date
 d.setDate(this.date);
}

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

function getFormattedDate(){
 return daysthis.day + ', ' + monthsthis.month + ' ' + this.date + ', ' + this.year;
 //return this.month + '/' + this.date + '/' + this.year;
}

function writeCalendar(){
 var calString = '<div id="calContainer">';
 //write month and year at top of table
 calString += '<table id="cal' + this.id + '" cellspacing="0" width="200" style="border:1px black solid;">';
 //write the image ?comment out to hide images
 calString += '<tr><th colspan="7"><img src=http://www.chinaz.com/Design/Pages/"' + this.pixthis.month.src + '"/></th></tr>';
 //write the month
 calString += '<tr><th colspan="7" class="month">' + monthsthis.month + ', ' + this.year + '</th></tr>';
 //write a row containing days of the week
 calString += '<tr>';
 
 for(i=0;i<days.length;i++){
  calString += '<th class="dayHeader">' + daysi.substring(0,3) + '</th>';
 }
 
 //write the body of the calendar
 calString += '<tr>';
 //create 6 rows so that the calendar doesn't resize
 for(j=0;j<42;j++){
  var displayNum = (j-this.firstDay+1);
  if(j<this.firstDay){
   //write the leading empty cells
   calString += '<td class="empty">&nbsp;</td>';
  }else if(displayNum==this.date){
   calString += '<td id="' + this.id +'selected" class="date" onClick="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
  }else if(displayNum > this.length()){
   //Empty cells at bottom of calendar
   calString += '<td>&nbsp;</td>';
  }else{
   //the rest of the numbered cells
   calString += '<td id="" class="days" onClick="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
  }
  if(j%7==6){
   calString += '</tr><tr>';
  }
 }
 //close the last number row
 calString += '</tr>';
 //write the nav row
 calString += '<tr>';
 calString += '<td class="nav" style="text-decoration:underline;" onClick="changeMonth(-12,\'' + this.id + '\')">&lt;</td>';
 calString += '<td class="nav" onClick="changeMonth(-1,\'' + this.id + '\')">&lt;</td>';
 calString += '<td class="month" colspan="3">&nbsp;</td>';
 calString += '<td class="nav" onClick="changeMonth(1,\'' + this.id + '\')">&gt;</td>';
 calString += '<td class="nav" style="text-decoration:underline;text-align:right;" onClick="changeMonth(12,\'' + this.id + '\')">&gt;</td>';
 calString += '</tr>';
 
 calString += '</table>';
 calString += '</div>';
 return calString;
}

function getLength(){
 //thirty days has September...
 switch(this.month){
  case 1:
   if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0)
    return 29; //leap year
   else
    return 28;
  case 3:
   return 30;
  case 5:
   return 30;
  case 8:
   return 30;
  case 10:
   return 30
  default:
   return 31;
 }
}
function changeDate(td,cal){
 //Some JavaScript trickery
 //Change the cal argument to the existing calendar object
 //This is why the first argument in the constructor must match the variable name
 //The cal reference also allows for multiple calendars on a page
 cal = eval(cal);
 document.getElementById(cal.id + "selected").className = "days";
 document.getElementById(cal.id + "selected").id = "";
 td.className = "date";
 td.id = cal.id + "selected";
 //set the calendar object to the new date
 cal.dateObject.setDate(td.firstChild.nodeValue);
 cal = new calendar(cal.id,cal.dateObject,cal.pix);
 //here is where you could react to a date change - I'll just display the formatted date
 alert(cal.getFormattedDate());
}

function changeMonth(mo,cal){
 //more trickery!
 cal = eval(cal);
 //The Date object is smart enough to know that it should roll over in December
 //when going forward and in January when going back
 cal.dateObject.setMonth(cal.dateObject.getMonth() + mo);
 cal = new calendar(cal.id,cal.dateObject,cal.pix);
 cal.formattedDate = cal.getFormattedDate();
 document.getElementById('calContainer').innerHTML = cal.write();
 
}

感谢 齐并科技 的投稿