js_javascript 기술의 디자인 패턴에서 템플릿 메소드를 구현하는 방법

JS 디자인 패턴에서 템플릿 메소드를 어떻게 구현하나요?
아이디어 생성자는 반드시 js에 익숙해야 합니다. 매우 간단합니다. 동일한 이름을 가진 두 개의 메소드가 js에 정의되면 전자의 메소드가 후자의 메소드로 덮어쓰여진다는 것을 우리는 모두 알고 있습니다. 이 기능을 사용하면 템플릿 메소드를 구현할 수 있습니다.

예를 들어 실제 프로젝트에서는 기본적으로 단계는 동일하지만 로컬 세부 사항이 다른 페이지 작업이 많이 있습니다. 예를 들어 내 프로젝트에는 데이터베이스 레코드를 표시하는 페이지가 많이 있는데, 각 페이지에는 레코드 읽기, 레코드 쿼리, 레코드 추가 및 삭제, 수정 등과 같은 작업이 동일하지만 해당 백그라운드 방법이 다릅니다.

코드 복사 코드는 다음과 같습니다.

function ListCommon2() {
var urlAdd;
var urlAjax;
var tableid;
var titleText="";
var winid = "#win";
var 열;
var 도구 모음;
var queryParams;
var 콜키;
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;
}
열 = a열;
toolbarsType = atoolbarsType;
};
this.initData = function () {
if (!toolbarsType) {
toolbars = [{ text: '添加', iconCls: 'icon-add', handler: Add }, '-', { 텍스트: '编辑', iconCls: 'icon-edit', 핸들러: this.Edit }
, '-', { 텍스트: '删除', iconCls: 'icon-cancel', 핸들러: this.delMsg }
];
} else {
toolbars = 툴바 유형;
}
queryParams = this.GetqueryParams();
$(tableid).datagrid({
url: urlAjax '?OperationType=list',
columns: columns,
toolbar: toolsbars,
idField: colkey,
페이지 매김: 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.data.obj.delMsg();
})
$("#btnQuery").bind('click', { obj: this }, function (event) {
var queryParamsnew = event.data.obj.GetqueryParams();
$(tableid).datagrid('load', queryParamsnew)
})
}
this.GetqueryParams = 함수( ) {
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] .필드);
}
}
else {
alert("未绑定数据");
}
colkey = fieldNameList[fieldNameList.length-1];
var NameList = fieldNameList.join(",");
Return NameList
}
function Add() {
var _content = '';
$(winid).dialog({
너비: 600,
높이: 400,
modal: true,
content: _content,
title: "增加" titleText,
드래그 가능: true,
크기 조정 가능: true,
그림자: true,
최소화 가능: false
});
}
this.Edit = function (editId) {
var id; var obj = typeof(editId);
if (!editId || obj == "object") {
var items = $(tableid).datagrid('getSelections');
var 길이 = items.length;
if (길이 == 0) {
$.messager.alert('提示', '请选择一条记录然后编辑');
반환;
} else if (길이 > 1) {
$.messager.alert('提示', '由于一次只能编辑一条记录，所以只能修改第一条记录');
반환;
}
id = GetId(items[0]);
}
else {
id = editId;
}
var _content = '';
$(winid).dialog({
너비: 600,
높이: 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 == "object") {
items = $(tableid).datagrid('getSelections');
길이 = items.length;
if (길이 == 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)
selectcallback(); 🎜>}
else {
$.messager.alert('prompt', 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]); 여기에는 정의가 없습니다.

코드 복사 코드는 다음과 같습니다.

도 같은 효과를 얻을 수 있습니다. 또 다른 방법은 함수를 전달하는 것입니다. 어떤 방법이 가장 적합할까요? 개인적으로 템플릿 방식을 사용하는 것이 가장 좋다고 생각합니다.