バックエンドインターフェイスデータへのフロントエンドjsアクセスの簡単な要約

フロントエンドがバックエンドインターフェイスデータにアクセスする場合、始めたばかりの初心者は基本的に次の構造を使用してアクセスします。

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メソッドと呼んでいるため、ドッキングする必要のあるインターフェイスが複数ある場合は、そのようなバルク関数（）が複数存在します。

アップグレード後、例としてプロジェクトを取り上げます。

/**
 * 事项列表
 */
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は、管理のために1つのオブジェクトに分離および統合されます。コード構造は明確で明確であり、再利用性は比較的高くなります。

上記は作業のほんの一部です。

より良いコード構造と最適化の提案を持っている友人は、メッセージを残すことを歓迎します。