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


Posted in Javascript onJuly 23, 2013

在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>

都可以达到同样的效果。还有一种就是传递一个函数。具体哪种方式最合适,个人认为还是使用模板方法最好。
Javascript 相关文章推荐
js获取url中指定参数值的示例代码
Dec 14 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
Highcharts入门之简介
Aug 02 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
js替换字符串的所有示例代码
Jul 23 #Javascript
通过一段代码简单说js中的this的使用
Jul 23 #Javascript
JS分页控件 可用于无刷新分页
Jul 23 #Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 #Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 #Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 #Javascript
JS 实现图片直接下载示例代码
Jul 22 #Javascript
You might like
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
jquery延迟对象解析
2016/10/26 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
详解jQuery中的事件
2016/12/14 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
详解Python中的Cookie模块使用
2015/07/06 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python字典DICT类型合并详解
2017/08/17 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
Python Json数据文件操作原理解析
2020/05/09 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
日语专业个人求职信范文
2014/02/02 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
单位考核鉴定意见
2015/06/05 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库