Javascript乱弹设计模式系列(2) － 抽象工厂以及工厂方法模式(Factory)

核心提示： 通过var member = MemberFactory.createMemberType(membertype);获取用户对象，通过用户对象判断是否可设置布局和颜色；3) 初始化版块类型和颜色类型//初始化版块类型和颜色类型blockfactory=newLMRBlockFactory(

通过var member = MemberFactory.createMemberType(membertype);获取用户对象，通过用户对象判断是否可设置布局和颜色；

3) 初始化版块类型和颜色类型

//初始化版块类型和颜色类型
blockfactory=newLMRBlockFactory();
varblock=blockfactory.getBlock(color);
block.displayBlock();
$("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
$("#imgcolor_"+color).removeClass().addClass("color-selected");

通过创建工厂对象，从颜色中获取布局实现类的对象，然后通过调用displayBlock方法的实现初始化界面的布局；

前台JS代码完整实现如下：

前台JS代码完整实现

　　varmembertype="superadmin";//从用户类型得到值，这里是个假设，包含三个类型用户：guest,blogmember,superadmin
　　varcolor="blue";//这里是初始化颜色，包括四种颜色：blue,green,red,violet
　　varblockfactory;//布局工厂类的全局变量声明
　　$(function(){
　　　　$("#container-1").tabs();
　　　　
　　　　//初始化用户类型
　　　　varmember=MemberFactory.createMemberType(membertype);
　　　　$("#spanMemberType").html(member.getMemberInfo());
　　　　$("#container-1li[id^='li']").css("display","block");
　　　　$("#container-1li[id^='li']").each(function(index){
　　　　　　vararr=$(this).attr("power").split('|');//取得对应标签的权限数组
　　　　　　if(arr.indexOf(membertype)==-1)//权限比较
　　　　　　{
　　　　　　　　$(this).css("display","none");
　　　　　　　　$("#fragment-"+(index+1)).css("display","none");
　　　　　　}
　　　　});
　　　　if(member.isSetColorBlock())//是否可设置布局和颜色
　　　　　　$("#Set").css("display","block");
　　　　else
　　　　　　$("#Set").css("display","none");
　　　　$("#selMemberType").val(membertype);
　　　　//初始化版块类型和颜色类型
　　　　blockfactory=newLMRBlockFactory();
　　　　varblock=blockfactory.getBlock(color);
　　　　block.displayBlock();
　　　　$("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
　　　　$("#imgcolor_"+color).removeClass().addClass("color-selected");
　　　　//用户类型下拉框绑定
　　　　$("#selMemberType").bind("change",function(){
　　　　　　$('#container-1').triggerTab(1);
　　　　　　varmt=$(this).val();
　　　　　　membertype=MemberFactory.createMemberType(mt);
　　　　　　$("#spanMemberType").html(membertype.getMemberInfo());
　　　　　　$("#container-1li[id^='li']").css("display","block");
　　　　　　$("#container-1li[id^='li']").each(function(index){
　　　　　　　　vararr=$(this).attr("power").split('|');
　　　　　　　　if(arr.indexOf(mt)==-1)
　　　　　　　　{
　　　　　　　　　　$(this).css("display","none");
　　　　　　　　　　$("#fragment-"+(index+1)).css("display","none");
　　　　　　　　}
　　　　　　});
　　　　　　if(membertype.isSetColorBlock())
　　　　　　　　$("#Set").css("display","block");
　　　　　　else
　　　　　　　　$("#Set").css("display","none");
　　　　});
　　　　//版块类型选择
　　　　$("img[id^='imgblock_']").bind("click",function(){
　　　　　　if($(this).className!="block-selected")
　　　　　　{
　　　　　　　　$("img[id^='imgblock_']").removeClass().addClass("block-unselected");
　　　　　　　　$(this).removeClass().addClass("block-selected");
　　　　　　}
　　　　　　varblocktext=$(this).attr("id").substring(9);
　　　　　　switch(blocktext)
　　　　　　{
　　　　　　　　case"LMR":blockfactory=newLMRBlockFactory();break;
　　　　　　　　case"LRM":blockfactory=newLRMBlockFactory();break;
　　　　　　　　case"MLR":blockfactory=newMLRBlockFactory();break;
　　　　　　　　default:blockfactory=newLMRBlockFactory();break;
　　　　　　}
　　　　　　varblock=blockfactory.getBlock(color);
　　　　　　block.displayBlock();
　　　　});
　　　　//颜色选择
　　　　$("img[id^='imgcolor_']").bind("click",function(){
　　　　　　color=$(this).attr("id").substring(9);
　　　　　　varblock=blockfactory.getBlock(color);
　　　　　　block.displayBlock();
　　　　　　$("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
　　　　　　$("#imgcolor_"+color).removeClass().addClass("color-selected");
　　　　});
　　});

至此，抽象工厂和工厂方法模式的一些思路已经应用在该博客系统中。

这里实现链接实例：

抽象工厂和工厂方法模式Demo(http://leepy.cwsurf.de/factory.html)

源代码就不提供下载了，无非就是html，js，css文件，从链接实例中可以查看源代码；

总结

该篇文章用Javascript设计抽象工厂和工厂方法模式的思路，实现一个博客系统的构想。