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

Source: Internet
Author: User
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:


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.