JavaScript设计模式之抽象工厂及工厂方法模式(1)(4)
7. 现在该创建个工厂来实现它们了，添加BlockFactory.js文件，首先创建布局抽象工厂类： function BlockFactory(){}BlockFactory.prototype = { getBlock : function(block) { var
7. 现在该创建个工厂来实现它们了，添加BlockFactory.js文件，首先创建布局抽象工厂类：
function BlockFactory(){
}
BlockFactory.prototype = {
getBlock : function(block) {
var _block;
_block = this.createBlock(block);
// 添加其他逻辑
//
return _block;
},
createBlock : function(block) {
return new Error("抽象方法，不能调用");
},
getBlockText : function() {
return new Error("抽象方法，不能调用");
}
};
|
这里createBlock和getBlockText同样是做为抽象方法；
现在要创建三个继承于这个布局抽象工厂类，LMRBlockFactory，LRMBlockFactory，MLRBlockFactory，这里同样以LMRBlockFactory为例：
function LMRBlockFactory(){
}
inheritClass(LMRBlockFactory,BlockFactory);
LMRBlockFactory.prototype.createBlock = function(block) {
var _block;
switch(block)
{
case "blue": _block = new BlueLMRBlock(); break;
case "red": _block = new RedLMRBlock(); break;
case "green": _block = new GreenLMRBlock(); break;
case "violet": _block = new VioletLMRBlock(); break;
default: _block = new BlueLMRBlock(); break;
}
return _block;
};
LMRBlockFactory.prototype.getBlockText = function() {
return "LMR";
};
|
LMRBlockFactory继承于布局抽象工厂类，实现它的抽象方法createBlock和getBlockText，其中creatBlock通过参数值，创建对应的布局实现类，这里用到了典型的抽象工厂模式；
8. 好了，一切都具备好了，现在开始讨论我们的前台使用了，添加factory.html，引用该引用的JS文件，这里列出一些核心代码：
1) 添加初始化数据
var membertype = "superadmin"; //从用户类型得到值，这里是个假设，包含三个类型用户： |
（你可以通过用户登录将登录信息存入cookies中，从cookies获取用户类型和用户选择色调）
2) 初始化用户类型
// 初始化用户类型
var member = MemberFactory.createMemberType(membertype);
$("#spanMemberType").html(member.getMemberInfo());
$("#container-1 li[id^='li']").css("display","block");
$("#container-1 li[id^='li']").each(function(index){
var arr = $(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);
|
通过var member = MemberFactory.createMemberType(membertype);获取用户对象，通过用户对象判断是否可设置布局和颜色；
3) 初始化版块类型和颜色类型
// 初始化版块类型和颜色类型
blockfactory = new LMRBlockFactory();
var block = blockfactory.getBlock(color);
block.displayBlock();
$("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
$("#imgcolor_" + color).removeClass().addClass("color-selected");
|
通过创建工厂对象，从颜色中获取布局实现类的对象，然后通过调用displayBlock方法的实现初始化界面的布局；
前台JS代码完整实现如下：
var membertype = "superadmin"; //从用户类型得到值，这里是个假设，包含三个类型用户：guest,blogmember,superadmin
var color = "blue"; //这里是初始化颜色，包括四种颜色：blue,green,red,violet
var blockfactory; //布局工厂类的全局变量声明
$(function() {
$("#container-1").tabs();
// 初始化用户类型
var member = MemberFactory.createMemberType(membertype);
$("#spanMemberType").html(member.getMemberInfo());
$("#container-1 li[id^='li']").css("display","block");
$("#container-1 li[id^='li']").each(function(index){
var arr = $(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 = new LMRBlockFactory();
var block = 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);
var mt = $(this).val();
membertype = MemberFactory.createMemberType(mt);
$("#spanMemberType").html(membertype.getMemberInfo());
$("#container-1 li[id^='li']").css("display","block");
$("#container-1 li[id^='li']").each(function(index){
var arr = $(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");
}
var blocktext = $(this).attr("id").substring(9);
switch(blocktext)
{
case "LMR": blockfactory = new LMRBlockFactory(); break;
case "LRM": blockfactory = new LRMBlockFactory(); break;
case "MLR": blockfactory = new MLRBlockFactory(); break;
default: blockfactory = new LMRBlockFactory(); break;
}
var block = blockfactory.getBlock(color);
block.displayBlock();
});
// 颜色选择
$("img[id^='imgcolor_']").bind("click", function() {
color = $(this).attr("id").substring(9);
var block = blockfactory.getBlock(color);
block.displayBlock();
$("img[id^='imgcolor_']").removeClass().addClass("color-unselected");
$("#imgcolor_" + color).removeClass().addClass("color-selected");
});
});
精彩图集
精彩文章