1024programmer Java How to implement the template method in design pattern in js_javascript skills

How to implement the template method in design pattern in js_javascript skills

How to implement the template method in design pattern in js?
The generation of ideas must be familiar with js. How to achieve it? It’s very simple. We all know that if two methods with the same name are defined in js, the former method will be overwritten by the latter method. Using this feature, you can implement the template method.

For example, in actual projects, there are many page operations where the steps are basically the same, but the local details are different. For example, in my project, there are many pages that display database records. Each page has the same operations such as reading records, querying records, adding and deleting, modifying records, etc., but the corresponding background methods are different.

The code is as follows:


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: ‘Add’, iconCls: ‘icon-add’, handler: Add }, ‘-‘, { text: ‘Edit’, iconCls: ‘icon-edit’, handler : this.Edit }
, ‘-‘, { text: ‘Delete’, 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(” Unbound data”);
}
colkey = fieldNameList[fieldNameList.length-1];
var NameList = fieldNameList.join(“,”);
return NameList
}
function Add() {
var _cOntent= ”;
$(winid).dialog({
width: 600,
height: 400,
modal: true,
content: _content,
title: “Add” + 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(‘Prompt’, ‘Please Select a record and edit it’);
return;
} else if (length > 1) {
$.messager.alert(‘Tip’, ‘Since only one record can be edited at a time, only Modify the first record’);
return;
}
id = GetId(items[0]);
}
else {
id = editId;
}
var _cOntent= ”;
$(winid).dialog({
width: 600,
height: 400,
modal: true,
content: _content,
title: “Modify” + 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(‘Prompt’, ‘Please select at least one record and delete it’);
return;
}
}
else {
id = delId;
}
var text = ‘Are you sure to delete’ + length + ‘Record?’;
if (length == 1) {
text = ‘Are you sure to delete this record?’;
}
$.messager.confirm(‘prompt’, 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(‘prompt’, obj.Msg);
selectcallback();
}
else {
$.messager.alert(‘prompt’, obj.Msg);
}
}
});
}
function selectcallback() {
SaveOkCallback();
}
}


If you look closely, you will find that this code contains, query, Modify, add, delete and other almost all operations, but because the parameters passed by the query conditions are different, there is a method that needs to be rewritten this.GetOtherQueryParams
Just rewrite it according to different pages.
For example, rewrite the following page:

The code is as follows:


$(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();
} )


Of course, you can also not define the method, just call it here, for example, GetId(items[0]); there is no definition here, and it will be specifically defined on the specific page

The code is as follows:


All are OK achieve the same effect. Another way is to pass a function. Which method is most suitable? Personally, I think it is best to use the template method.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/633038

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索