js如何实现设计模式中的模板方法

都知道在js中如果定义两个相同名称的方法,前一个方法就会被后一个方法覆盖掉,使用此特点就可以实现模板方法,感兴趣的朋友可以了解下本文哈
 

在js中如何实现设计模式中的模板方法?
思路的产生必然要求熟悉js,如何实现?就很简单了,都知道在js中如果定义两个相同名称的方法,前一个方法就会被后一个方法覆盖掉,使用此特点就可以实现模板方法。

例如在实际的项目中有很多页面操作的步骤基本相同,但局部细节却不一样。例如在我所在的项目中,就有很多展示数据库记录的页面,每个页面都存在读取记录,查询记录,增加删除,修改记录等相同的操作,但对应的后台方法却不一样。

复制代码 代码如下:

function ListCommon2() {
var urlAdd;
var urlAjax;
var tableid;
var titleText="";
var winid = "#win";
var columns;
var toolbars;
var queryParams;
var colkey;
var toolbarsType
this.initList = function (aurlAdd, aurlAjax, atableid, atitleText, awinid, acolumns, atoolbarsType) {
urlAdd = aurlAdd;
urlAjax = aurlAjax;
if (atableid) {
tableid = atableid;
}
if (atitleText) {
titleText = atitleText;
}
if (atitleText) {
winid = awinid;
}
columns = acolumns;
toolbarsType = atoolbarsType;
};
this.initData = function () {
if (!toolbarsType) {
toolbars = [{ text: '添加', iconCls: 'icon-add', handler: Add }, '-', { text: '编辑', iconCls: 'icon-edit', handler: this.Edit }
, '-', { text: '删除', iconCls: 'icon-cancel', handler: this.delMsg }
];
} else {
toolbars = toolbarsType;
}
queryParams = this.GetqueryParams();
$(tableid).datagrid({
url: urlAjax + '?OperationType=list',
columns: columns,
toolbar: toolbars,
idField: colkey,
pagination: true,
pageSize: 20,
sortName: colkey,
sortOrder: 'desc',
rownumbers: true, fitColumns: true,
striped: true,
method: "post",
striped: true,
queryParams: this.GetqueryParams(),
showFooter: true
, pageList: [10, 20, 30, 40, 50]
});
$("#add").click(function (e) {
Add();
})
$("#edit").bind('click', { obj: this }, function (event) {
event.data.obj. Edit();
})
$("#del").bind('click', { obj: this }, function (event) {
event.data.obj.delMsg();
})
$("#btnQuery").bind('click', { obj: this }, function (event) {
var queryParamsnew = event.data.obj.GetqueryParams();
$(tableid).datagrid('load', queryParamsnew)
})
}
this.GetqueryParams = function () {
var NameList = this.Getcolsinfo();
var otherQueryParams = this.GetOtherQueryParams();
if (!otherQueryParams) {
return { colkey: colkey, colsinfo: NameList }
}
else {
return otherQueryParams;
}
}
this.GetOtherQueryParams = function () {
return null;
}
this.Getcolsinfo = function () {
var fieldNameList = [];
if (columns.length > 0) {
for (var i = 0; i < columns[0].length; i++) {
fieldNameList.push(columns[0][i].field);
}
}
else {
alert("未绑定数据");
}
colkey = fieldNameList[fieldNameList.length-1];
var NameList = fieldNameList.join(",");
return NameList
}
function Add() {
var _content = '<iframe id="FRMdetail" frameborder="0" src=' + urlAdd + ' style="width:100%;height:100%;" ></iframe>';
$(winid).dialog({
width: 600,
height: 400,
modal: true,
content: _content,
title: "增加" + titleText,
draggable: true,
resizable: true,
shadow: true,
minimizable: false
});
}
this.Edit = function (editId) {
var id; var obj = typeof (editId);
if (!editId || obj == "object") {
var items = $(tableid).datagrid('getSelections');
var length = items.length;
if (length == 0) {
$.messager.alert('提示', '请选择一条记录然后编辑');
return;
} else if (length > 1) {
$.messager.alert('提示', '由于一次只能编辑一条记录,所以只能修改第一条记录');
return;
}
id = GetId(items[0]);
}
else {
id = editId;
}
var _content = '<iframe id="FRMdetail" frameborder="0" src=' + urlAdd + '?Id=' + id + ' style="width:100%;height:100%;" ></iframe>';
$(winid).dialog({
width: 600,
height: 400,
modal: true,
content: _content,
title: "修改" + titleText,
draggable: true,
resizable: true,
shadow: true,
minimizable: false
});
}
this.windowclose = function () {
$(winid).window('close');
}
this.SaveOkCallback = function () {
this.windowclose();
$(tableid).datagrid('reload');
$(tableid).datagrid('unselectAll');
}
this.delMsg = function (delId) {
var length = 1;
var id;
var items; var obj = typeof (delId);
if (!delId || obj == "object") {
items = $(tableid).datagrid('getSelections');
length = items.length;
if (length == 0) {
$.messager.alert('提示', '请至少选择一条记录然后删除');
return;
}
}
else {
id = delId;
}
var text = '你确认删除' + length + '条记录吗?';
if (length == 1) {
text = '你确认删除该条记录吗?';
}
$.messager.confirm('提示', text, function (r) {
if (r) {
if (!delId) {
var idList = [];
$.each(items,
function (key, value) {
var id = GetId(value); // in case we're changing the key
idList.push(id);
});
id = idList.join(",");
}
del(id)
}
});
}
function del(id) {
$.ajax({ type: "post",
url: urlAjax + "?OperationType=del&id=" + id,
success: function (msg) {
var obj = jQuery.parseJSON(msg);
if (obj.IsSuccess == true) {
$.messager.alert('提示', obj.Msg);
selectcallback();
}
else {
$.messager.alert('提示', obj.Msg);
}
}
});
}
function selectcallback() {
SaveOkCallback();
}
}

仔细看看就会发现,这段代码就包含了,查询,修改,添加,删除等几乎所有的操作,但由于查询条件传递的参数不同,所以有一个需要重写的方法this.GetOtherQueryParams
根据不同的页面重写就可以了。
例如如下一个页面的重写:

复制代码 代码如下:

$(document).ready(function () {
obj = new ListCommon2();
obj.initList(urlAdd, urlAjax, tableid, titleText, winid, columns, '#tb');
obj.GetOtherQueryParams = function () {
var colsinfo = obj.Getcolsinfo();
return { colsinfo: colsinfo, SWV_Performance_fk: $('#SWV_Performance_fk').combobox('getValue'), S_NAME: $("#S_NAME").val(), SQ_NAME: $("#SQ_NAME").val() };
}
obj.initData();
})

当然也可以不定义方法,此处只调用,例如GetId(items[0]);在此处就没有定义,在具体的页面在具体定义

复制代码 代码如下:

<script type="text/javascript">
function GetId(item) {
return item.SWV_ID
}
</script>

都可以达到同样的效果。还有一种就是传递一个函数。具体哪种方式最合适,个人认为还是使用模板方法最好。

时间: 2024-11-08 19:14:55

js如何实现设计模式中的模板方法的相关文章

js如何实现设计模式中的模板方法_javascript技巧

在js中如何实现设计模式中的模板方法? 思路的产生必然要求熟悉js,如何实现?就很简单了,都知道在js中如果定义两个相同名称的方法,前一个方法就会被后一个方法覆盖掉,使用此特点就可以实现模板方法. 例如在实际的项目中有很多页面操作的步骤基本相同,但局部细节却不一样.例如在我所在的项目中,就有很多展示数据库记录的页面,每个页面都存在读取记录,查询记录,增加删除,修改记录等相同的操作,但对应的后台方法却不一样. 复制代码 代码如下: function ListCommon2() { var urlA

java-23种设计模式中,模板方法模式体现了什么原则,求大神

问题描述 23种设计模式中,模板方法模式体现了什么原则,求大神 百度上看到有人说是 单一职责原则和开放封闭原则.开放封闭原则我懂,可是单一职责原则真的有吗?子类继承了父类,实现父类的方法中的具体操作,不同的子类类型有不同的实现方式,这好像不是单一职责原则的意义啊.还是说体现了其他原则?求大神,谢谢各路英雄好汉 解决方案 1)模板方法模式是一种类的行为型模式,在它的结构图中只有类之间的继承关系,没有对象关联关系. 2)板方法模式是基于继承的代码复用基本技术,模板方法模式的结构和用法也是面向对象设计

设计模式中的模板方法模式在Ruby中的应用实例两则_ruby专题

实例一今天你还是像往常一样来上班,一如既往地开始了你的编程工作. 项目经理告诉你,今天想在服务器端增加一个新功能,希望写一个方法,能对Book对象进行处理,将Book对象的所有字段以XML格式进行包装,这样以后可以方便与客户端进行交互.并且在包装开始前和结束后要打印日志,这样方便调试和问题定位. 没问题!你觉得这个功能简直是小菜一碟,非常自信地开始写起代码. Book对象代码如下: class Book attr_accessor :book_name, :pages, :price, :aut

详解设计模式中的模板方法模式及在C++中的使用_C 语言

模板方法模式是设计模式行为型中最简单的一种设计模式.在实际中你甚至可能经常用到,只是你自己不知道它是一种设计模式罢了. 模板方法模式定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤.角色:抽象类(AbstractClass): 定义抽象的原语操作,具体的子类将重定义它们以实现一个算法,实现一个模板方法,定义一个算法的骨架.该模板方法不仅调用原语操作,也调用定义 具体子类 (ConcreteClass): 实现原语操作以完

【java设计模式】之 模板方法(Template Method)模式

版权声明:尊重博主原创文章,转载请注明出处哦~http://blog.csdn.net/eson_15/article/details/51323902 目录(?)[+] 1. 模板方法的一个实例         这一节主要来学习一下设计模式中的模板方法模式.我们先来看一个例子:假如现在老板让你做一个汽车的模型,要求只要完成基本功能即可,不考虑扩展性,那你会怎么做呢?我们首先会根据经验设计一个类图:        由这个类图可知,非常简单的实现了悍马车,该车有两个型号H1和H2.那现在我们开始实

设计模式 ( 十九 ) 模板方法模式Template method(类行为型)

设计模式 ( 十九 ) 模板方法模式Template method(类行为型) 1.概述 在面向对象开发过程中,通常我们会遇到这样的一个问题:我们知道一个算法所需的关键步骤,并确定了这些步骤的执行顺序.但是某些步骤的具体实现是未知的,或者说某些步骤的实现与具体的环境相关. 例子1:银行业务办理流程 在银行办理业务时,一般都包含几个基本固定步骤: 取号排队->办理具体业务->对银行工作人员进行评分. 取号取号排队和对银行工作人员进行评分业务逻辑是一样的.但是办理具体业务是个不相同的,具体业务可能

C# 设计模式系列教程-模板方法模式_C#教程

1. 概述 定义一个操作中的算法的骨架,而将步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义算法的某些特定步骤. 2. 模式中的角色 2.1 抽象类(AbstractClass):实现了模板方法,定义了算法的骨架. 2.2 具体类(ConcreteClass):实现抽象类中的抽象方法,已完成完整的算法. 3. 模式解读 3.1 模板方法类图 3.2 模板方法模式代码实现 /// <summary> /// 抽象类 /// </summary> public ab

(单例设计模式中)懒汉式与饿汉式在多线程中的不同

/*  目的:分析一下单例设计模式中,懒汉式与饿汉式在多线程中的不同!  开发时我们一般选择饿汉式,因为它简单明了,多线程中不会出现安全问题!  而饿汉式需要我们自己处理程序中存在的安全隐患,但是饿汉式的程序技术含量更高! */ /* class SinglePerson implements Runnable{    private static SinglePerson ss = new SinglePerson("hjz", 22);//恶汉式    private int ag

lash轮播+ js+ xml+-几个flash轮播,求把XML中的参数直接写入js或者静态html中

问题描述 几个flash轮播,求把XML中的参数直接写入js或者静态html中 js部分: <!-- var so = new SWFObject(""/home/home_features.swf""visualMovie""935""470""9""#ffffff""); so.addParam(""wmode""tr