6KBBS门户站长频道业界新闻网站运营网络编程站长资源社区论坛
当前位置: 6kbbs V8.0 官方论坛 » 站长资源 » 利用Facade设计模式创建JS日历
利用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 = ’

‘;

//write month and year at top of table

calString += ’‘;

//write the image ?comment out to hide images

calString += ’‘;

//write the month

calString += ’‘;

//write a row containing days of the week

calString += ’‘;

for(i=0;i

calString += ’‘;

}

//write the body of the calendar

calString += ’‘;

推荐资讯
热文排行