js_javascriptスキルでデザインパターンにテンプレートメソッドを実装する方法

js のデザインパターンにテンプレートメソッドを実装するにはどうすればよいですか?
アイデアの生成には js に精通している必要があります。それを実現するにはどうすればよいですか?これは非常に簡単です。js で同じ名前の 2 つのメソッドが定義されている場合、前者のメソッドは後者のメソッドによって上書きされます。この機能を使用すると、テンプレート メソッドを実装できます。

例えば、実際のプロジェクトでは、基本的に手順は同じでも、局所的な細部が異なるページ操作が多くあります。たとえば、私のプロジェクトには、データベース レコードを表示するページが多数あります。各ページには、レコードの読み取り、レコードのクエリ、レコードの追加と削除、変更などの同じ操作がありますが、対応するバックグラウンド メソッドは異なります。

コードをコピー コードは次のとおりです:

関数 ListCommon2() {
var urlAdd;
var urlAjax;
varテーブルID;
var titleText="";
var winid = "#win";
var 列。
var ツールバー;
var queryParams;
var コルキー;
var toolsType
this.initList = function (aurlAdd, aurlAjax, atableid, atitleText, awinid, acolumns, atoolbarsType) {
urlAdd = aurlAdd;
urlAjax = aurlAjax;
if (テーブル ID) {
テーブル ID = テーブル ID;
}
if (atitleText) {
titleText = atitleText;
}
if (atitleText) {
winid = awinid;
}
列 = a列;
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 {
ツールバー = ツールバータイプ;
}
queryParams = this.GetqueryParams();
$(tableid).datagrid({
url: urlAjax '?OperationType=list',
columns: 列,
toolbar: ツールバー,
idField:colkey,
pagination: true、
pageSize: 20、
sortName:colkey、
sortOrder: 'desc'、
rownumbers: true、fitColumns: true、
ストライプ: true、
メソッド: "post ",
ストライプ: 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 }, 関数(イベント) {
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 = フィールド名リスト[フィールド名リスト.length-1];
var NameList = fieldNameList.join(",");
return NameList
}
function Add() {
var _content = '';
$(winid).dialog({
width: 600,
height: 400,
modal: true,
content: _content,
title: "增加" titleText,
ドラッグ可能: true、
サイズ変更可能: true、
シャドウ: true、
最小化可能: false
});
}
this.Edit = function (editId) {
var id; var obj = typeof (editId);
if (!editId || obj == "オブジェクト") {
var items = $(tableid).datagrid('getSelections');
var length = items.length;
if (length == 0) {
$.messager.alert('提案', '请选择一条记录然后编辑');
戻る;
} else if (length > 1) {
$.messager.alert('提案', '由以次只能编辑一条记录，所以只能修改第一条记录');
戻る;
}
id = GetId(items[0]);
}
else {
id = editId;
}
var _content = '';
$(winid).dialog({
width: 600,
height: 400,
modal: true,
content: _content,
title: "修正" titleText,
ドラッグ可能: true、
サイズ変更可能: true、
シャドウ: true、
最小化可能: 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;
変数ID;
var 項目; var obj = typeof (delId);
if (!delId || obj == "オブジェクト") {
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('prompt', obj.Msg);
}
else {
$.messager.alert('prompt', obj.Msg)
}
}
}); ) {
SaveOkCallback();
}
}


よく見ると、このコードにはクエリ、変更、追加、削除などのほとんどすべてが含まれていることがわかります。 . の操作ですが、クエリ条件で渡されるパラメータが違うので書き換える必要があるメソッドがあります。GetOtherQueryParams
ページの違いに合わせて書き換えるだけです。

たとえば、次のページを書き換えます:

コードをコピー コードは次のとおりです: $ (document).ready(function () {

obj = new ListCommon2();

obj.initList(urlAdd, urlAjax, tableid, titleText, winid, columns, '#tb');
obj.GetOtherQueryParams = function () {
varcolsinfo = 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]); のように呼び出すこともできます。


で定義します。

コードをコピーします

コードは次のとおりです。


も同じ効果を実現できます。もう 1 つの方法は、関数を渡すことです。どの方法が最適ですか? 個人的には、テンプレート方法を使用するのが最適だと思います。