NodeJS를 기반으로 한 프론트엔드와 백엔드 분리에 대한 생각과 실천 (3) 경량 인터페이스 구성 모델링 Framework_node.js
- WBOY원래의
- 2016-05-16 16:35:211134검색
머리말
Node를 사용하여 프런트엔드와 백엔드를 분리하는 개발 모델은 성능과 개발 프로세스에서 몇 가지 이점을 제공하지만 많은 과제에 직면합니다. Taobao의 복잡한 비즈니스 및 기술 아키텍처에서 백엔드는 Java를 사용하여 인프라를 구축하고 프런트엔드가 사용할 관련 비즈니스 인터페이스를 제공해야 합니다. 전체 환경에서 Node의 가장 중요한 작업 중 하나는 이러한 비즈니스 인터페이스를 프록시하여 프런트 엔드(노드 측 및 브라우저 측)가 페이지 렌더링을 위한 데이터를 통합할 수 있도록 하는 것입니다. 프론트엔드와 백엔드 개발이 분리된 후에도 프로세스가 여전히 원활하게 연결될 수 있도록 에이전시 업무를 어떻게 잘 수행할 것인지는 우리가 고려해야 할 문제입니다. 이 기사에서는 이 문제에 대해 논의하고 해결책을 제안합니다.
백엔드에서 제공하는 인터페이스가 다양할 수 있으므로 개발자가 노드 측 코드를 작성할 때 이러한 인터페이스에 액세스하는 방법도 다양할 수 있습니다. 인터페이스 접근 방법 및 사용법 측면에서 통일된 아키텍처를 구현하지 않으면 다음과 같은 문제가 발생합니다.
1. 개발자마다 자신만의 코딩 스타일을 사용하여 인터페이스 액세스 코드를 작성하므로 프로젝트 디렉터리와 코딩 스타일에 혼란이 생겨 유지 관리가 상대적으로 어려워집니다.
2. 각 개발자는 자신의 모의 데이터 메서드를 작성하고, 모의를 제거하려면 코드를 수동으로 수정해야 합니다.
3. 각 개발자는 인터페이스의 다양한 환경 전환(일일, 사전 출시, 온라인)을 구현하기 위해 일부 구성 파일을 유지 관리할 수 있습니다.
4. 데이터 인터페이스 호출 방법은 다양한 비즈니스 모델에서 쉽게 재사용할 수 없습니다.
5. 데이터 인터페이스에 대한 설명은 코드 구석구석에 흩어져 있으며 백엔드 직원이 동의한 인터페이스 문서와 일치하지 않을 수 있습니다.
6. 전체 프로젝트를 별도로 개발한 후에도 인터페이스의 공동 디버깅 또는 테스트 회귀 비용은 여전히 매우 높으며 모든 인터페이스 제공자와 사용자가 참여해야 합니다.
그래서 우리는 프레임워크가 제공하는 메커니즘을 사용하여 프로젝트가 의존하는 모든 외부 인터페이스를 설명하고, 이를 균일하게 관리하며, 유연한 인터페이스 모델링 및 호출 방법을 제공하고, 편리한 온라인 환경과 프로덕션 환경을 제공하는 프레임워크를 갖기를 희망합니다. 전환 방식을 사용하면 프런트엔드와 백엔드 개발을 원활하게 통합할 수 있습니다. ModelProxy는 이러한 요구 사항을 충족하는 경량 프레임워크이며 Midway Framework의 핵심 구성 요소 중 하나이며 독립적으로 사용할 수도 있습니다. ModelProxy를 사용하면 다음과 같은 이점을 얻을 수 있습니다.
1. 다양한 개발자가 인터페이스 액세스 코드를 통일된 방식으로 작성하여 의미가 명확하고 유지관리 어려움이 줄어듭니다.
2. 프레임워크 내부에서는 팩토리 싱글톤 모드를 채택하여 인터페이스 구성을 한 번 구현하고 여러 번 재사용합니다. 그리고 개발자는 자신의 비즈니스 모델(종속성 주입)을 마음대로 맞춤화하고 조합할 수 있습니다.
3. 온라인, 일일, 사전 출시 환경 간 전환이 매우 편리합니다.
4. river-mock, mockjs 등의 모의 엔진이 내장되어 있어 모의 데이터 제공이 매우 편리합니다.
5. 인터페이스 구성 파일을 사용하여 인터페이스 종속성 설명을 균일하게 관리하여 다양한 코드에 분산되는 것을 방지합니다.
6. 프런트 엔드 데이터 렌더링을 위해 브라우저에서 사용할 수 있는 브라우저 측 공유 모델을 지원합니다. 전체 프록시 프로세스는 브라우저에 투명합니다.
7. 인터페이스 구성 파일 자체는 구조화된 설명 문서이며 River 도구 모음을 사용하여 문서를 자동으로 생성할 수 있습니다. 또한 관련 자동화 인터페이스 테스트에도 사용할 수 있어 전체 개발 프로세스가 폐쇄 루프를 형성하게 됩니다.
ModelProxy 작동 원리 다이어그램 및 관련 개발 프로세스 다이어그램
위 그림에서 개발자는 먼저 프로젝트의 모든 종속 백엔드 인터페이스에 대한 설명을 지정된 json 형식으로 interface.json 구성 파일에 작성해야 합니다. 필요한 경우 인터페이스별로 규칙 파일을 작성해야 하는데, 이는 그림의 인터페이스 규칙 부분입니다. 이 규칙 파일은 개발 단계에서 데이터를 모의하는 데 사용되거나 River 도구 세트를 사용하여 공동 디버깅 단계에서 인터페이스를 확인하는 데 사용됩니다. 규칙 파일의 내용은 사용되는 모의 엔진(예: mockjs, river-mock 등)에 따라 다릅니다. 구성이 완료되면 필요에 따라 코드에서 자신만의 비즈니스 모델을 만들 수 있습니다.
다음은 간단한 예입니다.
【예시 1】
첫 번째 단계는 프로젝트 디렉토리에 인터페이스 구성 파일인 인터페이스.json을 생성하고 그 안에 기본 검색 인터페이스 json 정의를 추가하는 것입니다
{
"title": "pad Taobao 프로젝트 데이터 인터페이스 컬렉션 정의",
"버전": "1.0.0",
"엔진": "mockjs",
"rulebase": "./interfaceRules/",
"상태": "온라인",
"인터페이스": [ {
"name": "주 검색 인터페이스",
"id": "Search.getItems",
“URL”: {
"온라인": "http://s.m.taobao.com/client/search.do"
}
} ]
}
2단계: 코드에서 모델 생성 및 사용
//모듈 소개
var ModelProxy = require( 'modelproxy' );
// 전역 초기화는 인터페이스 구성 파일을 도입합니다(참고: 초기화 작업은 한 번만 발생합니다)
ModelProxy.init( './interface.json' );
//모델 생성에 대한 자세한 내용은 다음 문서를 참조하세요
var searchModel = 새로운 ModelProxy( {
SearchItems: 'Search.getItems' // 사용자 정의 메소드 이름: 구성 파일에 정의된 인터페이스 ID
} );
// 모델 사용 시 참고: 메서드를 호출하는 데 필요한 매개변수는 실제 인터페이스에 필요한 매개변수입니다.
searchModel.searchItems( { q: 'iphone6' } )
// !위에서 searchItems를 비동기적으로 호출하여 얻은 데이터를 얻기 위한 콜백 함수를 지정하려면 done 메소드를 호출해야 합니다!
.done( 함수( 데이터 ) {
console.log( 데이터 );
} )
.error( 함수( err ) {
console.log(err);
} );
ModelProxy의 풍부한 기능은 필요한 비즈니스 모델을 생성하기 위해 다양한 형태의 프로필을 지원한다는 것입니다.
인터페이스 ID를 사용하여 생성> 생성된 객체는 ID의 마지막 '.' 뒤의 단어를 메서드 이름으로 사용합니다
ModelProxy.create( 'Search.getItem' );
키-값 JSON 객체 사용> 맞춤 메서드 이름: 인터페이스 ID
ModelProxy.create( {
GetName: 'Session.getUserName',
GetMyCarts: 'Cart.getCarts'
} );
배열 형식 사용> 마지막 .
다음 예에서 생성된 메소드 호출 이름은 Cart_getItem, getItem, presents, getName
입니다.
[예시 2] 병합 요청
// 병합 요청(done을 제외하고 아래에서 호출되는 모델 메소드는 인터페이스 ID 구성 시 모두 지정됩니다.)
model.suggest( { q: '여성' } )
.list( { 키워드: 'iphone6' } )
.getNav( { 키: '패션 의류' } )
.done( 함수( 데이터1, 데이터2, 데이터3 ) {
// 매개변수의 순서는 메소드 호출 순서와 일치합니다
console.log( 데이터1, 데이터2, 데이터3 );
} );
[예시 3] 종속성 요청
var 모델 = 새 ModelProxy( {
GetUser: 'Session.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