js 디자인 모델 의 템 플 릿 방법 을 어떻게 실현 합 니까?

js 에서 어떻게 디자인 모델 중의 템 플 릿 방법 을 실현 합 니까?사고의 발생 은 반드시 js 에 익숙해 져 야 하 는데 어떻게 실현 합 니까?간단 합 니 다. js 에서 같은 이름 의 두 가지 방법 을 정의 하면 앞의 방법 은 뒤의 방법 으로 덮어 쓰 이 고 이 특징 을 사용 하면 템 플 릿 방법 을 실현 할 수 있 습 니 다.예 를 들 어 실제 프로젝트 에서 많은 페이지 작업 의 절 차 는 기본적으로 같 지만 부분 적 인 세부 사항 은 다르다.예 를 들 어 제 가 있 는 프로젝트 에 데이터베이스 기록 을 보 여 주 는 페이지 가 많 습 니 다. 각 페이지 에 읽 기 기록, 조회 기록, 삭제, 기록 수정 등 똑 같은 조작 이 존재 하지만 해당 하 는 배경 방법 은 다 릅 니 다.

 
  
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: '  ', iconCls: 'icon-add', handler: Add }, '-', { text: '  ', iconCls: 'icon-edit', handler: this.Edit } 
  
, '-', { text: '  ', 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("     "); 
  
} 
  
colkey = fieldNameList[fieldNameList.length-1]; 
  
var NameList = fieldNameList.join(","); 
  
return NameList 
  
} 
  
function Add() { 
  
var _content = '