关于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"> </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> </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 + '\')"><</td>';
calString += '<td class="nav" onClick="changeMonth(-1,\'' + this.id + '\')"><</td>';
calString += '<td class="month" colspan="3"> </td>';
calString += '<td class="nav" onClick="changeMonth(1,\'' + this.id + '\')">></td>';
calString += '<td class="nav" style="text-decoration:underline;text-align:right;" onClick="changeMonth(12,\'' + this.id + '\')">></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();
}
|
感谢 齐并科技 的投稿
