在前端接入后端接口数据时,刚开始入门的小白,基本都是都是使用如下结构来接入:
function m1(){
$.ajax({
type: 'post',
url: basePath+"/interface/get?outsys=roma&name=asdf",
data:{
params:{}
},
success: function(result) {
console.log(result);
eval('initChart_' + name + '(result)');
}
});
}
以上我把它称为散装的js方法,这样如果有多个有多个接口需要对接,就会有多个这种散装function();
升级改造后如下,拿一个项目来举例:
/**
* 事项列表
*/
var sxml_list = function(){
/**
* 接口集
* 包含每个图表,的测试地址和正式地址
*/
var apiArray = {
"0":{"url":"getEventList","params":{},"testUrl":"","desc":"根据条件筛选事项列表"},
"1":{"url":"getEventDetailByConfidition","params":{},"testUrl":"","desc":"根据条件筛选事项详情"},
"2":{"url":"oneEventHasManyDuty","params":{"name":""},"testUrl":"","desc":"一事多责"}
}
var initChart_0 = function(result){
console.log(result);
var data = result.retJSON.result.retJSON.result;
$('#row_count').text(data.length);
$("#list").empty();
if(data.length>0){
let htmlstr = '';
$.each(data,function(i,n){
htmlstr += '<tr class="tr" eventId='+data[i].事项id+' >';
htmlstr += '<td>'+(i+1)+'</td>';
htmlstr += '<td>'+data[i].事项名称+''+(data[i].事项简述==null?'':'--'+data[i].事项简述)+'</td>';
htmlstr += '</tr>';
$("#list").html(htmlstr);
});
//将拼接好的字符串追加到tbody中
$('.tr').bind('click',function(){
sxml_list.apiArray['1'].params.eventId = $(this).attr('eventId');
setTimeout(function(){
sxml_list.init('1',true);
},300);
if($(this).hasClass('heighlight')){
$(this).removeClass('heighlight');
return;
}
$('.tr').removeClass('heighlight');
$(this).addClass('heighlight');
})
}
}
var initChart_1 = function(result){
var data = result.retJSON.result;
$("#sxmc").html(data[0].事项名称+''+(data[0].事项简述==null?'':'--'+data[0].事项简述));
// $("#sxbm").html(data[0].事项编码)
// $("#sxjs").html(data[0].事项简述)
$("#glzr").html(data[0].部门名称)
$("#glzt").html(data[0].部门名称)
$("#glyj").html(data[0].管理依据==null?'--':data[0].管理依据)
$("#ysdz").html(data[0].是否一事多责==null?"处理流程":"一事多责");
data[0].是否一事多责==null?(show0()):(show())
$("#sxlx").html(data[0].事项名称)
$(".one-item").html("");
//展示流程
function show0(){
$('.right .body .process').show();
$(".one-n").hide();
$("#czls").html(data[0].部门名称)
// $("#glzt").html(data[0].部门名称)
}
//展示一事多责
function show(){
$('.right .body .process').hide();
$(".one-n").show();
sxml_list.apiArray['2'].deptName = data[0].部门名称+data[0].事项简述;
sxml_list.apiArray['2'].params.name = data[0].事项名称;
sxml_list.init('2',true);
}
}
var initChart_2 = function(result){
var data = result.retJSON.result;
var oneData = [];
if(data.length>0){
for(var i in data){
oneData.push({
name:data[i].resume,
bm:data[i].deptname
})
}
}
one_item_load(oneData);
}
//****获取数据接口***
var getAjaxSources = function(name,dataType){
if(dataType){
return basePath+"/interface/get?outsys=roma&name="+apiArray[name].url;
}else{
return basePath+apiArray[name].testUrl;
}
}
var init = function(name,dataType){
try {
/*统一访问*/
var ajaxSources = getAjaxSources(name,dataType);
$.ajax({
type: 'post',
url: ajaxSources,
data:{
params:JSON.stringify(apiArray[name].params)
},
success: function(result) {
console.log(result);
eval('initChart_' + name + '(result)');
}
});
} catch(e) {}
}
return{
init:init,
apiArray:apiArray
}
}();
这样把接口,变量,以及获取后端的ajax都拆分开来统一放到一个对象里面来管理,代码结构清晰明朗,复用性也比较高。
以上仅为工作中的小小总结。
有更好的代码结构及优化建议的朋友欢迎留言。