js如何實(shí)現(xiàn)設(shè)計模式中的模板方法
更新時間：2013年07月23日 17:29:54 作者：
都知道在js中如果定義兩個相同名稱的方法，前一個方法就會被后一個方法覆蓋掉，使用此特點(diǎn)就可以實(shí)現(xiàn)模板方法，感興趣的朋友可以了解下本文哈
在js中如何實(shí)現(xiàn)設(shè)計模式中的模板方法？
思路的產(chǎn)生必然要求熟悉js，如何實(shí)現(xiàn)？就很簡單了，都知道在js中如果定義兩個相同名稱的方法，前一個方法就會被后一個方法覆蓋掉，使用此特點(diǎn)就可以實(shí)現(xiàn)模板方法。
例如在實(shí)際的項(xiàng)目中有很多頁面操作的步驟基本相同，但局部細(xì)節(jié)卻不一樣。例如在我所在的項(xiàng)目中，就有很多展示數(shù)據(jù)庫記錄的頁面，每個頁面都存在讀取記錄，查詢記錄，增加刪除，修改記錄等相同的操作，但對應(yīng)的后臺方法卻不一樣。
復(fù)制代碼 代碼如下:
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("未綁定數(shù)據(jù)");
}
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 = '你確認(rèn)刪除' + length + '條記錄嗎?';
if (length == 1) {
text = '你確認(rèn)刪除該條記錄嗎?';
}
$.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();
}
}
仔細(xì)看看就會發(fā)現(xiàn)，這段代碼就包含了，查詢，修改，添加，刪除等幾乎所有的操作，但由于查詢條件傳遞的參數(shù)不同，所以有一個需要重寫的方法this.GetOtherQueryParams
根據(jù)不同的頁面重寫就可以了。
例如如下一個頁面的重寫：
復(fù)制代碼 代碼如下:
$(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();
})
當(dāng)然也可以不定義方法，此處只調(diào)用，例如GetId(items[0]);在此處就沒有定義，在具體的頁面在具體定義
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function GetId(item) {
return item.SWV_ID
}
</script>
都可以達(dá)到同樣的效果。還有一種就是傳遞一個函數(shù)。具體哪種方式最合適，個人認(rèn)為還是使用模板方法最好。
您可能感興趣的文章:
- JavaScript 設(shè)計模式 安全沙箱模式
- javascript設(shè)計模式 接口介紹
- JavaScript設(shè)計模式之觀察者模式（發(fā)布者-訂閱者模式）
- 小議javascript 設(shè)計模式 推薦
- JavaScript 設(shè)計模式之組合模式解析
- javascript 設(shè)計模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
- javascript設(shè)計模式之解釋器模式詳解
- JavaScript設(shè)計模式之原型模式(Object.create與prototype)介紹
- 常用的Javascript設(shè)計模式小結(jié)
- JS設(shè)計模式之惰性模式（二）
相關(guān)文章
用javascript編寫的第一人稱射擊游戲...2007-02-02
如何使用JavaScript快速創(chuàng)建一個1到100的數(shù)組
平時寫代碼時,我們會生產(chǎn)一些測試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下2022-08-08
下面小編就為大家?guī)硪黄猨s自調(diào)用匿名函數(shù)的三種寫法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了懸浮廣告方法日常收集整理的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript編寫更好的條件語句的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript實(shí)現(xiàn)登錄拼圖驗(yàn)證的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)登錄拼圖驗(yàn)證的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-01-01
如何通過js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】
如何通過js實(shí)現(xiàn)圖片預(yù)覽功能呢？下面小編就為大家?guī)硪黄胘s實(shí)現(xiàn)圖片預(yù)覽功能。給大家做個參考吧，一起跟隨小編過來看看2016-03-03
這篇文章介紹了JS操作數(shù)據(jù)庫的實(shí)例代碼，有需要的朋友可以參考一下2013-10-10
關(guān)于JavaScript中原型繼承中的一點(diǎn)思考
JS中原型的概念不想多說，這里只是探討一下修改父類原型屬性與覆蓋父類原型中屬性的區(qū)別，防止以后出問題2012-07-07
JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果完整實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)響應(yīng)顏色漸變效果,涉及javascript面向?qū)ο蠹笆录O(jiān)聽、響應(yīng)機(jī)制相關(guān)操作技巧,需要的朋友可以參考下2017-02-02