js如何實作設計模式中的範本方法_javascript技巧

在js中如何實作設計模式中的範本方法？
思路的產生必然要求熟悉js，如何實現？就很簡單了，都知道在js中如果定義兩個相同名稱的方法，前一個方法就會被後一個方法覆蓋掉，使用此特點就可以實現模板方法。

例如在實際的專案中有很多頁面操作的步驟基本上相同，但局部細節卻不一樣。例如在我所在的專案中，就有很多展示資料庫記錄的頁面，每個頁面都存在讀取記錄，查詢記錄，增加刪除，修改記錄等相同的操作，但對應的後台方法卻不一樣。

複製程式碼 程式碼如下:

function ListCommon2() {
var urlAdd;
var urlAjax;
var tableid;
var titleText="";
var winid = "#win";
var 欄位；
var 工具列；
var queryParams;
var colkey;
vartoolbarsType
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;
}
列 = 列；
toolbarsType = atoolbarsType;
};
this.initData = function () {
if (!toolbarsType) {
toolbars = [{ text: '加', iconCls: 'icon-add', handler: 加 } , '-', { text: '編輯', iconCls: 'icon-edit', handler: this.Edit }
, '-', { text: '刪除', iconCls: 'icon-cancel', handler : this.delMsg }
];
} else {
工具列=toolbarsType;
}
queryParams = this.GetqueryParams();
$(tableid).datagrid({
url: urlAjax '?OperationType=list',
列: 列,
工具列: 工具列,
idField: colkey,
工具列: 工具列,
idField: colkey,
分頁: true,
pageSize: 20,
sortName: colkey,
sortOrder: 'desc',
行號: true, fitColumns: true,
striped: true,
true,
方法: " post ",
striped: true,
queryParams: this.GetqueryParams(),
showFooter: true
, pageList: [10, 20, 30, true
, pageList: [10, 20, 30, 40, 50] $("#add").click(function (e) {
Add();
})
$("#edit").bind('click', { obj: this }, function (event) {
event.data.obj.
})
$("#del").bind('click', { obj: this }, function (事件) {
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 fieldNameList.push(columns[0][i] 。 ) ;
}
}
else {
alert("未綁定資料");
}
colkey = fieldNameList[fieldNameList.length-1]; NameList = fieldNameList.join (",");
return NameList
}
function Add() {
var _content = '';
$(winid).dialog({
寬度: 600,
高度: 400,
模態: true ,
內容: _content,
標題: "增加" titleText,
可拖曳: true,
可調整大小: true,
陰影: true,
可放大: false
});
this.Edit = function (editId) {
var id; var obj = typeof (editId); | obj == "object") {
var items = $(tableid ).datagrid('getSelections');
var length = items.length
if (length == 0) {
$.messager.alert('提示', '請選擇一筆記錄然後編輯' );
回傳；
} else if (length > 1) {
$.messager.alert('提示'); , '由於只能編輯一筆記錄，所以只能修改第一筆記錄');
回傳；
id = GetId(items[0]); {
id = editId;
}
var _content = '';
$(winid).dialog({
寬度: 600,
高度: 400,
模態: true,
內容: _content,
標題: "修改" titleText,
可拖曳: true,
可調整大小: true,
陰影: true,
可放大: false
});
}
this.windowclose = function () {
$(winid).window('close');
}
this.SaveOkCallback = function () {
this.windowclose();
$(tableid).datagrid('重新載入');
$(tableid).datagrid('unselectAll');
}
this.delMsg = function (delId) {
var length = 1;
var id;
var 項目； var obj = typeof (delId);
if (!delId || obj == "object") {
items = $(tableid).datagrid('getSelections');
長度 = items.length;
if (length == 0) {
$.messager.alert('提示', '請至少選擇一筆記錄然後刪除');
回傳；
}
}
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); // 我們想要更改鍵
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').combox, $.com S_NAME").val(), SQ_NAME: $("#SQ_NAME").val() }; } obj.initData(); }) 當然也可以不定義方法，此處只調用，例如GetId(items[0]);在此處就沒有定義，在具體的頁面在具體定義

複製程式碼


程式碼如下:

都可以達到相同的效果。還有一種就是傳遞一個函數。具體哪一種方式最合適，個人認為還是使用模板方法最好。