Chrome 확장 프로그램에서 비동기 메시지 전달에 가장 적합한 디자인 패턴은 무엇입니까?

Question

localStorage 데이터베이스로 데이터를 가져오고 설정하는 백그라운드 스크립트가 있습니다. 내 콘텐츠 스크립트는 데이터를 보내고 받으려면 백그라운드 스크립트와 통신해야합니다.

지금은 명령과 데이터가 포함 된 함수에 JSON 객체를 보냅니다. 그래서 데이터베이스에 객체를 추가하려고하면 addObject라는 명령 속성과 데이터 인 다른 객체가있는 JSON을 만듭니다. 이 작업이 완료되면 백그라운드 스크립트는 성공했다는 응답을 보냅니다.

함수의 또 다른 사용 사례는 성공/실패가 아닌 개체를 다시 보낼 데이터를 요청하는 것입니다.

일단 백그라운드 스크립트에서 반환 된 객체를 검색하려고하면 코드가 해커가됩니다.

내가 따라 잡지 못한 간단한 디자인 문제가 여기에있는 것처럼 보입니다. 어떤 사람들은 미래/약속의 디자인 문제를 제안했지만 아주 좋은 예는 발견하지 못했습니다. 여기

내용 스크립트

function sendCommand(cmdJson){ 
    chrome.extension.sendRequest(cmdJson, function(response){ 
     //figure out what to do with response 
    }); 
} 

배경 스크립트

if (request.command == "addObject"){ 
    db[request.id]= JSON.stringify(request.data); 
    sendResponse("success"); 
} 
else if(request.command == "getKeystroke"){ 
var keystroke = db[request.id]; 
sendResponse(keystroke); 
} 

Answer 1

시스템 확인을보고는 약간의 개선이다. 각각의 원격 명령에 대한

은 (아마도 빈 필드와) 동일한 유형의 개체를 다시 보내

var response = { 
    success: true, // or false 
    data: {}, 
    errors: [], 
    callback: '' 
} 

을 또한, 데이터를 다시 보내 여러 다른 명령이있는 경우, 당신은 객체의 조회와 if-else을 대체 할 수 : 당신이 응답에 데이터가있는 경우

var commands = { 
    addObject: function() { /* ... */ }, 

    getKeystroke: function (request, response) { 
     response.data = db[request.id] 
    } 
} 

그럼, 그냥 객체에 추가합니다. 그리고 모든 명령에 대해 동일한 개체를 보내

이

var fn = commands[request.commands] 
fn(request, response) 

응답으로 무엇을 알아내는에 관해서는, 나는 sendCommand 함수에 콜백을 전달하고 콘텐츠 스크립트를 요청하자 그들이 보는 바와 같이 응답 데이터를 처리 할 것 적합 :

function sendCommand(cmdJson, callback){ 
    chrome.extension.sendRequest(cmdJson, callback) 
}