利用Facade設計模式創建JS日歷

關於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 days[this.day] + ', ' + months[this.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="' + this.pix[this.month].src + '"/></th></tr>';
 //write the month
 calString += '<tr><th colspan="7" class="month">' + months[this.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">' + days[i].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=&q