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 = '<iframe id="FRMdetail" frameborder="0" src=' + urlAdd + ' style="width:100%;height:100%;" ></iframe>'; 
$(winid).dialog({ 
width: 600, 
height: 400, 
modal: true, 
content: _content, 
title: "  " + 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('  ', '           '); 
return; 
} else if (length > 1) { 
$.messager.alert('  ', '            ，           '); 
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: "  " + 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('  ', '             '); 
return; 
} 
} 
else { 
id = delId; 
} 
var text = '     ' + length + '    ?'; 
if (length == 1) { 
text = '          ?'; 
} 
$.messager.confirm('  ', 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('  ', obj.Msg); 
selectcallback(); 
} 
else { 
$.messager.alert('  ', obj.Msg); 
} 
} 
}); 
} 
function selectcallback() { 
SaveOkCallback(); 
} 
} 

자세히 살 펴 보면 이 코드 에는'조회,수정,추가,삭제'등 거의 모든 작업 이 포함 되 어 있 지만,조회 조건 이 전달 하 는 매개 변수 가 다 르 기 때문에 다시 써 야 할 방법 이 있 습 니 다 this.GetOtherQuery Params 는 페이지 에 따라 다시 쓰 면 됩 니 다.예 를 들 어 다음 페이지 의 재 작성:

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

물론 방법 을 정의 하지 않 아 도 됩 니 다.여기 서 는 GetId(items[0])만 호출 할 수 있 습 니 다.여기 서 정의 되 지 않 았 습 니 다.구체 적 인 페이지 에서 구체 적 인 정의

 
<script type="text/javascript"> 
function GetId(item) { 
return item.SWV_ID 
} 
</script> 

는 똑 같은 효 과 를 얻 을 수 있 습 니 다.또 하 나 는 함 수 를 전달 하 는 것 이다.구체 적 으로 어떤 방식 이 가장 적합 한 지 개인 적 으로 는 템 플 릿 을 사용 하 는 것 이 가장 좋다 고 생각 합 니 다.