JavaScript设计模式之抽象工厂及工厂方法模式(1)(3)
二、接下来开始本篇的重点，JavaScript工厂模式的网站应用
1. 延续上面的博客网站的场景：
游客只能进行简单的查看博客的文章，个人资料等等；
博客会员还可以对自己的博客进行管理；
超级管理员还可以对于博客系统后台进行管理；
这里有这些标签Tab：首页，文章，电影，音乐，相册，关于我，文章管理，个人资料管理，系统后台管理，其中 游客只能访问“首页，文章，电影，音乐，相册，关于我”，博客会员（登录后）增加访问“文章管理，个人资料管理”，超级管理员增加访问“系统后台管理”；另外博客会员和超级管理员拥有修改皮肤颜色和版块类型的功能；
最终页面显示如下所示：
从图上可以看出，博客会员以上的用户类型可以显示“文章管理，个人资料管理”标签，超级管理员可以显示“系统后台管理”；而布局选择包括“左，中，右结构”，“左，右上，右下结构”，“左上，左下，右结构”，颜色包括“蓝”，“红”，“绿”，“紫”，这里只能博客会员和超级管理员才可以显示；
（这里我使用了网上提供的jquery.tab.js插件对标签进行实现，详细请看http://stilbuero.de/jquery/tabs_3/）
好了，现在开始介绍这个实例通过JavaScript工厂模式是如何实现的。
2. IMember.js不变，从简单工厂中直接复制。
3. IMember的具体实现类Guest，BlogMember，SuperAdmin从简单工厂中复制，这里分别添加个原型方法isSetColorBlock，判断该用户类型是否可设置颜色和布局，如下所示：
Guest.prototype = {
//…
isSetColorBlock : function() {
return false;
}
}
BlogMember.prototype = {
//…
isSetColorBlock : function() {
return true;
}
}
SuperAdmin.prototype = {
//…
isSetColorBlock : function() {
return true;
}
}
|
可以看到游客不能进行设置，而博客会员和超级管理能进行设置；
4. MemberFactory.js不变，从简单工厂直接复制。
5. 添加IBlock.js，创建布局接口：
var IBlock = new Interface("IBlock", [["getData"]]);
|
6. 实现它的具体类，这里添加LMRBlock.js（左 中 右 布局），LRMBlock.js（左上 左下 右 布局），MLRBlock.js（左 右上 右下 布局），这里以LMRBlock.js为例：
// 左、中、右结构样式版块
function LMRBlock()
{
this.color = "blue";
Interface.registerImplements(this, IBlock); //继承布局IBlock接口
}
LMRBlock.prototype = {
displayBlock : function() {
this.getData();
// 具体布局实现
},
getData : function() {
return new Error("抽象方法，不能调用");
}
}
|
这里首先创建的是类似于一个抽象类，该类首先继承于布局接口，从代码中可以看出getData方法的实现返回错误异常，实际上它作为一个抽象方法，不需要实现任何东西；这里displayBlock方法中调用它的抽象方法，这里就是典型的抽象方法模式，以备于它的子类继承实现它的抽象方法；
现在看看它的子类有哪些：
function BlueLMRBlock(){
}
inheritClass(BlueLMRBlock, LMRBlock); //继承LMRBlock抽象类
BlueLMRBlock.prototype.getData = function() { //父类抽象方法的具体实现
$(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_blue.png)"});
this.color = "blue";
}
function GreenLMRBlock(){
}
inheritClass(GreenLMRBlock, LMRBlock);
GreenLMRBlock.prototype.getData = function() {
$(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_green.png)"});
this.color = "green";
}
function RedLMRBlock(){
}
inheritClass(RedLMRBlock, LMRBlock);
RedLMRBlock.prototype.getData = function() {
$(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_red.png)"});
this.color = "red";
}
function VioletLMRBlock(){
}
inheritClass(VioletLMRBlock, LMRBlock);
VioletLMRBlock.prototype.getData = function() {
$(".tabs-nav a, .tabs-nav a span").css({"background-image":"url(script/tab/tab_violet.png)"});
this.color = "violet";
}
