How does js implement the template method in the Design Pattern _ javascript skills

We all know that if two methods with the same name are defined in js, the previous method will be overwritten by the latter method. With this feature, the template method can be implemented, interested friends can understand this article. In js, how does one implement the template method in the design mode?
The idea must be familiar with js and how to implement it? It's easy. We all know that if two methods with the same name are defined in js, the previous method will be overwritten by the latter method. With this feature, the template method can be implemented.

For example, there are many page operation steps in the actual project, but the local details are different. For example, in my project, there are many pages showing database records. Each page has the same operations such as reading records, querying records, adding delete records, and modifying records, however, 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: 'editor', 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 ('hprompt ', 'select a record and then edit ');
Return;
} Else if (length> 1 ){
$. Messager. alert ('hprompt ',' because only one record can be edited at a time, only the first record can be modified ');
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 ('hprompt ', 'select at least one record and then delete ');
Return;
}
}
Else {
Id = delId;
}
Var text = 'Are you sure you want to delete '+ length +' records? ';
If (length = 1 ){
Text = 'Are you sure you want to delete this record? ';
}
$. Messager. confirm ('hprompt ', text, function (r ){
If (r ){
If (! DelId ){
Var idList = [];
$. Each (items,
Function (key, value ){
Var id = GetId (value); // in case we're 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 ('hprompt ', obj. Msg );
Selectcallback ();
}
Else {
$. Messager. alert ('hprompt ', obj. Msg );
}
}
});
}
Function selectcallback (){
SaveOkCallback ();
}
}

A closer look will show that this Code contains almost all the operations, such as query, modification, addition, and deletion. However, because the parameters passed by the query conditions are different, so there is a method to override this. getOtherQueryParams
You can rewrite the data based on different pages.
For example, rewrite the next 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 do not define the method. Only call here, for example, GetId (items [0]); it is not defined here. On the specific page

The Code is as follows: