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 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php 启动报错如何解决
2014/01/17 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
在python中pandas的series合并方法
2018/11/12 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
高一新生军训感言
2014/03/02 职场文书
霸王洗发水广告词
2014/03/14 职场文书
大学社团活动总结
2014/04/26 职场文书
结婚老公保证书
2015/02/26 职场文书