머리말
노드를 사용하여 전면 및 백엔드 개발 모델을 분리하면 성능 및 개발 프로세스 이점이 있지만 많은 과제에 직면 해 있습니다. Taobao의 복잡한 비즈니스 및 기술 아키텍처에 따라 백엔드는 Java에 의존하여 인프라를 구축하고 프론트 엔드를 사용할 관련 비즈니스 인터페이스를 제공해야합니다. 전체 환경에서 노드의 가장 중요한 작업 중 하나는 이러한 비즈니스 인터페이스를 프록시하여 페이지 렌더링을위한 프론트 엔드 (노드 측 및 브라우저 측)의 데이터 통합을 용이하게하는 것입니다. 대행사 작업에서 좋은 작업을 수행하는 방법은 전면 및 백엔드 개발이 프로세스에서 여전히 원활하게 연결될 수 있도록하는 것이 우리가 고려해야 할 문제입니다. 이 기사는이 문제에 대해 논의하고 솔루션을 제안합니다.
백엔드는 다양한 인터페이스를 제공하기 때문에 개발자는 이러한 인터페이스에 액세스하기 위해 노드 측 코드를 작성하는 다양한 방법을 가질 수 있습니다. 인터페이스 액세스 방법 및 사용에서 통합 아키텍처 처리를 수행하지 않으면 다음과 같은 문제가 발생합니다.
1. 각 개발자는 자신의 코드 스타일을 사용하여 인터페이스 액세스 코드를 작성하여 프로젝트 디렉토리 및 코딩 스타일에 혼란을 일으켜 유지하기가 비교적 어렵습니다.
2. 모든 개발자는 자신의 모의 데이터 방법을 작성합니다. 개발이 완료된 후에는 모의를 제거하기 위해 코드를 수동으로 수정해야합니다.
3. 인터페이스의 다양한 환경 (매일, 사전 문제, 온라인)의 전환을 실현하기 위해 각 개발자는 일부 구성 파일을 유지할 수 있습니다.
4. 다양한 비즈니스 모델에서는 데이터 인터페이스 호출 방법을 쉽게 재사용 할 수 없습니다.
5. 데이터 인터페이스에 대한 설명 계약은 코드의 모든 구석에 흩어져 있으며, 이는 백엔드 직원이 합의한 인터페이스 문서와 일치하지 않을 수 있습니다.
6. 전체 프로젝트가 배포 된 후 인터페이스를 연결하거나 테스트 회귀 분석 비용이 여전히 매우 높으며 각 인터페이스 제공 업체 및 사용자를 포함해야합니다.
따라서이 프레임 워크가 제공하는 메커니즘을 사용하여 엔지니어링 프로젝트에 의존하는 모든 외부 인터페이스를 설명하고 통합 방식으로 관리하며 유연한 인터페이스 모델링 및 호출 방법을 제공 할뿐만 아니라 편리한 온라인 환경 및 생산 환경 전환 방법을 제공하여 프론트 엔드 및 백엔드 개발을 완벽하게 결합하는 프레임 워크를 사용 하여이 프레임 워크에서 제공하는 모든 외부 인터페이스를 제공하기를 희망합니다. ModelProxy는 이러한 요구 사항을 충족하는 경량 프레임 워크입니다. 그것은 미드웨이 프레임 워크의 핵심 구성 요소 중 하나이며 단독으로 사용할 수도 있습니다. ModelProxy를 사용하면 다음과 같은 장점이 있습니다.
1. 다른 개발자들은 인터페이스 액세스 코드 쓰기 방법, 명확한 의미 및 유지 보수 난이도를 줄였습니다.
2. 프레임 워크는 공장 + 싱글 톤 모드를 채택하여 한 번에 인터페이스 구성의 다중 멀티플렉싱을 실현합니다. 개발자는 자체 비즈니스 모델 (종속성 주입)을 사용자 정의하고 조립할 수 있습니다.
3. 온라인, 매일 및 사전 발행 환경을 쉽게 전환 할 수 있습니다.
4. River-Mock 및 Mockjs와 같은 내장형 모의 엔진은 모의 데이터를 제공하는 것이 매우 편리합니다.
5. 인터페이스 구성 파일을 사용하여 인터페이스 종속성 설명을 균일하게 관리하여 다양한 코드에 흩어지지 않도록하십시오.
6. 브라우저 측의 모델 공유를 지원하며 프론트 엔드 데이터를 렌더링하는 데 사용할 수 있습니다. 전체 프록시 프로세스는 브라우저에 투명합니다.
7. 인터페이스 구성 파일 자체는 구조화 된 설명 문서이며, River Tool Collection을 사용하여 문서를 자동으로 생성 할 수 있습니다. 또한 관련 자동화 인터페이스 테스트에 사용하여 전체 개발 프로세스에서 폐쇄 루프를 형성 할 수 있습니다.
ModelProxy 작업 원리 다이어그램 및 관련 개발 프로세스 다이어그램
위의 그림에서 개발자는 먼저 프로젝트의 백엔드 인터페이스의 모든 종속성을 설명하고 지정된 JSON 형식에 따라 인터페이스.json 구성 파일에 작성해야합니다. 필요한 경우 각 인터페이스에 대해 규칙 파일을 작성해야합니다. 즉, 인터페이스 규칙은 그림의 일부입니다. 이 규칙 파일은 개발 단계에서 데이터를 조롱하거나 강 공구 세트를 사용하여 공동 디버깅 단계에서 인터페이스를 확인하는 데 사용됩니다. 규칙 파일의 내용은 사용되는 모의 엔진 (예 : Mockjs, River-Mock 등)에 따라 다릅니다. 구성이 완료되면 필요에 따라 코드에서 고유 한 비즈니스 모델을 만들 수 있습니다.
간단한 예는 다음과 같습니다.
【예제 1】
첫 번째 단계는 프로젝트 디렉토리에서 인터페이스 구성 파일 interface.json을 작성하고 기본 검색 인터페이스 JSON 정의를 추가하는 것입니다.
코드 사본은 다음과 같습니다.
{
"제목": "Pad Taobao 프로젝트 데이터 인터페이스 컬렉션 정의",
"버전": "1.0.0",
"엔진": "mockjs",
"Rulebase": "./interfacerules/",
"상태": "온라인",
"인터페이스": [{
"이름": "메인 검색 인터페이스",
"ID": "search.getItems",
"urls": {
"온라인": "http://smtaobao.com/client/search.do"
}
}]
}
2 단계 코드에서 모델을 작성하고 사용합니다
코드 사본은 다음과 같습니다.
// 모듈을 소개합니다
var modelproxy = require ( 'modelproxy');
// 글로벌 초기화는 인터페이스 구성 파일을 소개합니다 (참고 : 초기화는 한 번만 작동)
modelproxy.init ( './interface.json');
// 더 많은 생성 모드는 다음 기사를 참조하십시오.
var searchModel = 새로운 ModelProxy ({
SearchItems : 'search.getItems'// 사용자 정의 메소드 이름 : 구성 파일에 정의 된 인터페이스 ID
});
// 모델 사용, 참고 : 메소드를 호출하는 데 필요한 매개 변수는 실제 인터페이스에 필요한 매개 변수입니다.
searchModel.SearchItems ({Q : 'iPhone6'})
//! 콜백 함수를 지정하려면 완료된 메소드를 호출해야합니다.
.Done (함수 (데이터) {
Console.log (데이터);
})
.Error (function (err) {
Console.log (err);
});
ModelProxy의 풍부함은 다양한 형태의 프로필을 지원하여 비즈니스가 필요한 비즈니스 모델을 생성한다는 것입니다.
인터페이스 ID를 사용하여 객체를 만듭니다. 메소드 이름으로 ID 수
코드 사본은 다음과 같습니다.
modelproxy.create ( 'search.getItem');
키 값 JSON 개체> 사용자 정의 메소드 이름 : 인터페이스 ID 사용
코드 사본은 다음과 같습니다.
modelproxy.create ({
getName : 'session.getUserName',
getmycarts : 'cart.getCarts'
});
배열 양식을 사용하십시오> 마지막 후에 단어를 가져 가십시오. 메소드 이름으로 번호입니다
다음 예제에서 생성 된 메소드 호출 이름은 다음과 같습니다. cart_getItem, getItem, proply, getName
코드 사본은 다음과 같습니다.
modelproxy.create ([ 'cart.getitem', 'search.getitem', 'search.suggest', 'session.user.getname']);
접두사 양식> 접두사를 만족하는 모든 인터페이스 ID가 객체에 소개되고 후자는 메소드 이름으로 간주됩니다.
코드 사본은 다음과 같습니다.
modelproxy.create ( 'search.*');
동시에 이러한 모델을 사용하여 병합 요청 또는 종속성 요청을 쉽게 구현하고 관련 템플릿을 렌더링 할 수 있습니다.
[예제 2] 병합 요청
코드 사본은 다음과 같습니다.
var model = 새로운 modelproxy ( 'search.*');
// 병합 요청 (아래에 불리는 모델 메소드는 완료 한 경우를 제외하고 인터페이스 ID를 구성 할 때 지정됩니다)
model.suggest ({q : 'female'})
.List ({키워드 : 'iPhone6'})
.getnav ({키 : '인기 의류'})
.Done (function (data1, data2, data3) {
// 매개 변수 순서는 메소드 호출 순서와 일치합니다.
Console.log (data1, data2, data3);
});
[예 3] 종속성 요청
코드 사본은 다음과 같습니다.
var model = 새로운 modelproxy ({
getUser : '세션 .getUser',
getmyorderList : 'Order.GetOrder'
});
// 사용자 ID를 먼저 가져온 다음 ID 번호를 기준으로 주문 목록을 가져옵니다.
model.getUser ({sid : 'fdkaldjfgsakls0322yf8'})
.Done (함수 (데이터) {
var uid = data.uid;
// 보조 데이터 요청은 처음으로 얻은 ID 번호에 따라 다릅니다.
this.getmyorderList ({id : uid})
.Done (함수 (데이터) {
Console.log (데이터);
});
});
또한 ModelProxy는 노드 측뿐만 아니라 브라우저 측에서도 사용할 수 있습니다. 공식 패키지에서 제공 한 ModelProxy-Client.js를 페이지에 소개하십시오.
[예제 4] 브라우저쪽에 ModelProxy를 사용합니다
코드 사본은 다음과 같습니다.
<!-Kissy가 캡슐화 한 표준 모듈 인 ModelProxy 모듈을 소개했습니다.
<script src = "modelproxy-client.js"> </script>
<script type = "text/javaScript">
kissy.use ( "modelproxy", function (s, modelproxy) {
//! 두 번째 단계에서 구성된 절편 경로와 일치하는 기본 경로를 구성하십시오!
// 글로벌 구성이 있고 한 번만 있습니다!
modelproxy.configbase ( '/model/');
// 모델을 만듭니다
var searchmodel = modelproxy.create ( 'search.*');
SearchModel
.list ({q : 'ihpone6'})
.List ({Q : 'Shangchao'})
.Suggest ({Q : 'I'})
.getnav ({q : 'skateboard'})
.DONE (function (data1, data2, data3, data4) {
Console.log ({
"list_ihpone6": data1,
"list_shocksuit": data2,
"제안 _i": data3,
"getnav_skateboard": data4
});
});
});
</스크립트>
동시에, ModelProxy는 미드웨이의 또 다른 핵심 구성 요소 인 Midway-XTPL과 함께 사용하여 브라우저 및 서버 측에서 데이터, 템플릿 및 관련 렌더링 프로세스의 전체 공유를 실현할 수 있습니다. ModelProxy에 대한 자세한 자습서 및 문서는 https://github.com/purejs/modelproxy로 이동하십시오.
요약
ModelProxy는 구성된 경량 프레임 워크로 존재하여 친숙한 인터페이스 모델 어셈블리 및 사용 방법을 제공하며 동시에 프론트 엔드 및 백엔드 개발 모드 분리에서 인터페이스 사용 사양 문제를 해결합니다. 전체 프로젝트 개발 프로세스 동안 인터페이스는 항상 한 번 정의하고 설명해야하며 프론트 엔드 개발자는이를 참조 할 수 있습니다. 동시에 River Tool은 문서를 자동으로 생성하고 백엔드 개발자와 계약을 체결하고 관련 자동 테스트를 수행하여 전체 소프트웨어 엔지니어링 개발 프로세스를 크게 최적화하는 데 사용됩니다.
Note is River는 Alibaba Group이 개발하고 Alibaba Group이 개발 한 프론트 엔드 통합 인터페이스 사양 및 관련 도구의 일반적인 용어입니다.