How to implement the template method in the design pattern in JS?
The generation of ideas will inevitably require familiarity with JS, how to achieve? is very simple, all know that in JS if you define two methods with the same name, the previous method will be overwritten by the latter method, using this feature to implement the template method.
For example, in a real project there are many steps for page operations that are basically the same, but local details are different. For example, in my project, there are many pages showing database records, each page has read records, query records, add delete, modify records, and other similar operations, but the corresponding background method is not the same.
Copy Code code 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 = ' <iframe id= ' frmdetail ' frameborder= ' 0 "src= ' + urladd + ' style= ' width:100%;height:100%;" ></ifra Me> ';
$ (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 (' Hint ', ' Please select a record and edit ');
Return
else if (length > 1) {
$.messager.alert (' hint ', ' because you can only edit one record at a time, so you can only modify the first record ');
Return
}
id = GetId (items[0]);
}
else {
id = editid;
}
var _content = ' <iframe id= ' frmdetail ' frameborder= ' 0 ' src= ' + Urladd + '? Id= ' + ID + ' style= ' width:100%;height:100%; "></iframe>";
$ (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 then delete ');
Return
}
}
else {
id = delid;
}
var text = ' Do you confirm delete ' + length + ' record? '
if (length = = 1) {
Text = ' Are you sure you want to delete the record? '
}
$.messager.confirm (' Hint ', 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 (' Hint ', obj.) MSG);
Selectcallback ();
}
else {
$.messager.alert (' Hint ', obj.) MSG);
}
}
});
}
function Selectcallback () {
Saveokcallback ();
}
}
A closer look will find that this code contains, query, modify, add, delete and so on almost all the operations, but because the query conditions pass different parameters, so there is a need to rewrite the method this. Getotherqueryparams
Based on the different page rewrite is OK.
For example, rewrite the following page:
Copy Code code 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, where only calls, such as GetID (Items[0]), there is no definition in the specific page in the specific definition
Copy Code code as follows:
<script type= "Text/javascript" >
function GetId (item) {
return item. swv_id
}
</script>
can achieve the same effect. Another way is to pass a function. Which is the most appropriate way, personally think or use template method best.
