AJAX가 백엔드 인터페이스 구현 Solution_javascript 기술에 의존하지 않도록 하세요.

무엇이 문제인가요?
웹 페이지에 ajax 요청이 점점 많아지거나, 애플리케이션이 처음부터 ajax를 사용하여 백엔드와 데이터를 교환해 왔습니다. (제가 현재 회사에서 하고 있는 프로젝트의 경우입니다.) N개의 다중 인터페이스의 프론트엔드와 백엔드를 오가며 디버깅을 하는 것이 번거로운 일입니다.
백엔드가 짧은 시간에 모든 인터페이스를 작성하는 것은 불가능하며, 프런트엔드 테스트를 위한 가짜 데이터 및 인터페이스를 생성하는 것도 불가능합니다. 시간이 많이 걸릴 뿐만 아니라 데이터 구조와 내용이 많을 수도 있습니다. 개발 단계에서 반환되는 인터페이스 이름이 변경됩니다. 그런 다음 백엔드는 프런트엔드에 제공하면서 인터페이스를 작성하는데, 이는 좋아 보입니다. 그러나 특정 구현 프로세스 중에 완료되지 않은 백엔드 인터페이스에 오류가 발생할 수 있으므로 계속 진행하기 전에 중간에 중지하고 백엔드가 올바른 데이터를 반환할 때까지 기다려야 합니다. .


이게 왜죠? 1: 프런트엔드는 개발 초기 단계에서 정형화되지 않은 인터페이스에 의존합니다.
2: 백엔드는 프런트엔드에 필요한 데이터 항목과 데이터 형식을 완전히 알지 못합니다.

어떻게 해결하나요? 1: 요구 사항 확인 회의에서는 프런트엔드와 백엔드가 기능과 인터페이스에 대해 충분히 논의합니다. (요구사항이 명확한 백로그, 이 작업은 매우 간단합니다.)
완전한 백로그 문서를 사용하면 사용자의 모든 작업이 명확한 기능으로 기록됩니다. 개발자가 최종 확인에서 이러한 항목에 동의하는 한 필요한 인터페이스를 쉽게 요약할 수 있습니다.
　2: 프론트엔드 작성 인터페이스 문서(백엔드 지원).

왜 프론트엔드인가? 1: 프런트 엔드는 페이지에 표시되어야 하는 데이터를 완전히 이해합니다. 2: 프런트엔드는 필요한 데이터 형식(오류 코드 처리 방법 등)을 완전히 이해합니다.
프런트엔드 인터페이스 문서는 다음과 같을 수 있습니다. (샘플 로그인 인터페이스)

코드 복사 코드는 다음과 같습니다.

: 사용자 로그인
url: ?
요청 방법: POST
요청 매개변수: 이메일:문자열
pwd:문자열
checkCode:문자열
반환 데이터:
{
코드:int,//오류 코드, 성공적인 로그인은 0입니다. 기타 오류는 오류 코드를 반환하고 결과 항목이 없습니다.
result:{
id:int // 사용자 ID
name:string // 사용자 이름
...
}
}

백엔드를 어떻게 지원하나요? 1: 보충 요청 URL. 2: 반환된 데이터의 필드를 수정합니다. 반환된 데이터 항목의 많은 문서에 있는 필드가 백엔드 개발 필드와 일치하지 않는 경우 백엔드를 수정해야 합니다.
문서 수정은 프론트엔드와 백엔드 논의의 과정입니다. 궁금한 점이 있으면 소통하시면 됩니다. 문서가 완성되면 각자 사본을 갖게 됩니다. (문서의 모든 수정 사항은 다른 사람들이 주의를 기울이도록 하기 위해 다른 색상으로 표시될 수 있습니다.)
백엔드가 완료된 후 다음과 같이 보일 수 있습니다:

코드 복사 코드는 다음과 같습니다.

: 사용자 로그인
url: user/login.php(보조)
요청 방법: POST
요청 매개변수: email:String
pwd:String
checkCode:String
반환 데이터:
{
code:int, // 오류 코드, 성공적인 로그인은 0. 기타 오류 반환 오류 코드, 결과 항목 없음
result :{
id:int // 사용자 ID
user:string // 사용자 이름(수정됨)
...
}
}

3: 개발 과정은 문서에 완전히 부합합니다
문서가 완성된 후에는 내가 이 작업만 수행하면 해당 데이터를 반환하고 사용하는 것이 정확할 것이라는 것을 모두가 알고 있습니다.
백엔드에서 코드 작성을 시작하고 프런트엔드를 전혀 무시하면 전혀 문제가 되지 않습니다.
문서에 따라 프런트엔드가 어떻게 작동하기 시작하나요?
인터페이스도 모두 있고, 반환 데이터도 있습니다. 그런 다음 다음 단계는 시뮬레이션된 데이터를 사용하여 테스트할 수 있는 프레임워크를 구축하는 것입니다.
jquery를 사용한다면 간단한 구조는 다음과 같을 것입니다.
사용자가 로그인 버튼을 클릭하면 프런트 엔드에서 문서에 설명된 데이터를 시뮬레이션하고 콜백 함수를 직접 호출합니다. 이것은 사실이다.

코드 복사 코드는 다음과 같습니다.

코드 보기
Common = {
post:function(url, data, Success){//기본 게시물 요청 캡슐화
$.ajax({
url:url ,
유형:"post",
데이터:데이터,
dataType:"json",
error:function(){
//Common.tip(TipData["1002"] , 0);
//ajax 오류 메시지
},
success:function(data){
if(data && data.code != 0){
//Common.showError ( data);//오류 처리 코드를 사용자를 위한 텍스트 프롬프트로 변환합니다.
success && Success(data)
}
};
///1: 사용자 로그인
기능 로그인(email, pwd, checkCode, callback){
//테스트 환경
var data = { //시뮬레이션 데이터
code : 0 ,
result:{
id:'123456',
user:"lujun"
}
}
callback(data); // 시뮬레이션된 데이터를 직접 전달합니다. 콜백 함수
return
//---실제 데이터를 연결할 때 위 코드에 주석을 달아주세요. 이러한 주석은 온라인에 접속하기 전에 압축 도구를 통해 제거됩니다.
//정식 환경
공통입니다. post(" user/login.php",{email:email, pwd:pwd, checkCode:checkCode}, callback)
}//이벤트 기반 로그인 클릭
//로그인 성공 일련의 작업 수행
$('#submit').click(function(){
var email = $('#email').val();
var pwd = $('# pwd').val( );
var checkCode = $('#checkCode').val();
//로그인 인터페이스 호출
login(email, pwd, checkCode, function(data) {
if(data && data.code == 0){
//ajax가 성공적으로 실행되었습니다
data = data.result
$('#userName').text(data.user) ;
//기타 코드...
}
})
})


어떻게 하면 좋을까요?
모든 기능 인터페이스는 이러한 방식으로 작동합니다. 전체 애플리케이션에는 백엔드 지원이 필요하지 않으며 시뮬레이션된 데이터로 완전히 승인되고 테스트될 수 있습니다.
공식 데이터에 연결할 준비가 되면 테스트 코드를 주석 처리합니다(이 코드는 코드 구석구석, 10개 이상의 위치에 배포될 수 있습니다). 테스트 환경과 데이터베이스에 연결된 환경 사이를 빠르게 전환할 수 없습니다!
그런 테스트 코드의 가치는 너무 제한적입니다.

테스트 데이터를 파일로 분리하고 메소드 커버리지를 사용하여 최하위 AJAX 요청 메소드를 다룰 수 있습니다.




코드 복사

코드는 다음과 같습니다. 코드 보기//testData. 모든 테스트 데이터 저장TestData = {

"userlogin":{ //로그인 테스트 데이터

code : 0,
결과:{
id:'123456',
user :"lujun"
}
}
// ... 다른 구조 테스트
}
// common.js
// Common.post 메서드 재정의
Common.post:function(url, data, Success){//기본 게시물 요청 캡슐화
//URL을 키로 MD5하는 것도 좋은 생각이므로 많은 판단을 내릴 수 있습니다
if(url == "user/login.php"){
success(TestData["userlogin"])
}else if(url == "other"){//기타 인터페이스
/ /...
}
};
/// 1: 사용자 로그인
기능 로그인(email, pwd, checkCode, callback){
Common.post("user/login. php ",{email:email, pwd:pwd, checkCode:checkCode}, callback);
};
//이벤트 기반 로그인 클릭
//일련의 작업을 수행하려면 로그인에 성공했습니다
$(' #submit').click(function(){
var email = $('#email').val();
var pwd = $('#pwd').val() ;
var checkCode = $('#checkCode').val();
//로그인 인터페이스 호출
login(email, pwd, checkCode, function(data){
if(data && data.code = = 0){
//ajax가 성공적으로 실행되었습니다
data = data.result
$('#userName').text(data.user)
//Other code...
}
});
});


위 코드는 데이터 테스트를 시뮬레이션하려는 경우 이해하기 쉽습니다. 레벨 아약스 요청 방법.
물론 이것은 그 중 하나일 뿐입니다. 더 나은 방법이 있거나 debug = false, debug = true처럼 전역 변수를 통해 두 환경 간에 전환할 수 있습니다! 이제 우리 팀은 이런 방식으로 매우 잘 일하고 있습니다.
마지막으로 병합, 난독화 및 압축된 500K JS가 포함된 애플리케이션의 코드를 어떻게 구성할지 고민했습니다.