AJAX의 비동기적 특성을 추상화하기 위한 유창한 Javascript 인터페이스 설계

AJAX의 비동기적 특성을 추상화하기 위한 유창한 Javascript 인터페이스 설계

AJAX 및 HTTP 요청의 비동기성을 숨기거나 기본적으로 유창한 인터페이스를 제공하기 위해 API를 어떻게 설계해야 합니까?Twitter의 새로운 Anywhere API의 예를 보여주는 방법:

// get @ded's first 20 statuses, filter only the tweets that
// mention photography, and render each into an HTML element
T.User.find('ded').timeline().first(20).filter(filterer).each(function(status) {
    $('div#tweets').append('<p>' + status.text + '</p>');
});

function filterer(status) {
    return status.text.match(/photography/);
}

vs. 이것 (각 통화의 연속적인 특성이 명확하게 나타남)

T.User.find('ded', function(user) {
    user.timeline(function(statuses) {
        statuses.first(20).filter(filterer).each(function(status) {
            $('div#tweets').append('<p>' + status.text + '</p>');
        });
    });
});

function filterer(status) {
    return status.text.match(/photography/);
}

사용자를 찾고, 트윗 타임라인을 받아 처음 20개의 트윗만 필터링하고, 사용자 정의 필터를 적용하며, 궁극적으로 콜백 기능을 사용하여 각 트윗을 처리합니다.

이와 같이 잘 설계된 API는 각 함수 호출이 각/map/등과 같은 루프 함수에 도달할 때까지 쿼리를 작성하는 쿼리 작성기(이 경우 HTTP URL)처럼 작동해야 하며, HTTP 호출이 이루어지고 전달된 함수가 콜백이 되어야 한다고 생각합니다.

쉬운 개발 경로는 각 AJAX 호출을 동기화하는 것이지만, 그것이 최선의 해결책은 아닐 것입니다.저는 그것을 비동기적으로 만드는 방법에 관심이 있지만, 여전히 AJAX의 비동기적인 성격을 숨기고 있습니다.

@anywhere의 트위터 엔지니어인 더스틴 디아즈가 불과 며칠 전에 발표한 다음 기사를 보십시오.

• JavaScript의 비동기 메서드 대기열 체인

그는 매우 간단한 큐 구현을 사용하여 비동기식 방법, 즉 콜백과 무관하게 체인으로 연결된 방법에서 유창한 인터페이스를 구현할 수 있는 매우 좋은 기술에 대해 이야기합니다.

나는 미래를 개발하고 있습니다.원래 Crockford의 약속(원작 슬라이드)을 기반으로 한 JS.현재 목표는 자바스크립트의 비동기 도구 상자이며 체인 잡동사니를 제거하는 것입니다.

futures.chainify(공급자, 소비자, 컨텍스트, 매개 변수)

비동기식 방법 큐잉을 사용하면 쉽게 사용할 수 있거나 사용할 수 없는 데이터에 대한 작업을 체인으로 연결할 수 있습니다.트위터의 @Anywhere api는 이렇게 작동합니다.

다음과 같은 방식으로 원격으로 데이터를 가져오는 모델이 필요할 수 있습니다.

Contacts.all(params).randomize().limit(10).display();
Contacts.one(id, params).display();

다음과 같이 구현할 수 있습니다.

var Contacts = Futures.chainify({
  // Providers must be promisables
  all: function(params) {
    var p = Futures.promise();
    $.ajaxSetup({ error: p.smash });
    $.getJSON('http://graph.facebook.com/me/friends', params, p.fulfill);
    $.ajaxSetup({ error: undefined });
    return p.passable();
  },
  one: function(id, params) {
    var p = Futures.promise();
    $.ajaxSetup({ error: p.smash });
    $.getJSON('http://graph.facebook.com/' + id, params, p.fulfill);
    $.ajaxSetup({ error: undefined });
    return p.passable();
  }
},{
  // Consumers will be called in synchronous order
  // with the `lastResult` of the previous provider or consumer.
  // They should return either lastResult or a promise
  randomize: function(data, params) {
    data.sort(function(){ return Math.round(Math.random())-0.5); // Underscore.js
    return Futures.promise(data); // Promise rename to `immediate`
  },
  limit: function(data, n, params) {
    data = data.first(n);
    return Futures.promise(data);
  },
  display: function(data, params) {
    $('#friend-area').render(directive, data); // jQuery+PURE
    // always return the data, even if you don't modify it!
    // otherwise your results could be unexpected
    return data;
  }
});

알아야 할 사항:

• providers데이터를 반환하는 약속 문서
• consumers데이터를 사용하거나 변경하는 기능
  • 첫 번째 인수는 다음과 같아야 합니다.data
  • 약속을 반환할 때 체인의 다음 메소드는 약속이 이행될 때까지 실행되지 않습니다.
  • "반복 객체"를 반환할 때 체인의 다음 메서드는 해당 객체를 사용합니다.
  • 에를 할 때.undefined( 아무것도) 된 개체(또는아도반지않음환하다사개정니용)를
• context-apply()는 각 소비자에게 되며, 는 d가 됩니다.this
• params할 수 있도록 .

또는 동기식 콜백 체인을 사용할 수 있습니다. 다른 곳에서 체인(.next() 또는 다음()으로 볼 수 있습니다.

Futures.sequence(function(callback) {

    $.getJSON("http://example.com", {}, callback);

}).then(function(callback, result, i, arr) {

    var data = transform_result(result);
    $.getJSON("http://example.com", data, callback);

}).then(...)

이름을 지었습니다sequencechain에는 _.js라는 이름의 있기 입니다.chain라이브러리에도 _.methodName을 사용하고 싶습니다.

한 번 보고 어떻게 생각하는지 알려주세요.

FutureJS는 jQuery, Dojo 등과 함께 문제없이 작동할 것입니다.종속성이 없습니다.Node.js(및 env.js 사용 시 Rhino)와 함께 작동합니다.

=8^D

추신: ORM/MVC 수정에 대해서는 JavaScriptMVC와 SprootCore를 확인하실 수 있습니다.저도 TriforceJS라는 자체 솔루션을 개발 중인데 아직 출시 준비가 안 되어 있습니다.

S 예의 P.P.S예 의promisables

var doStuff = function (httpResult) {
    // do stuff
  },
  doMoreStuff = function (httpResult) {
    // do more stuff
  };

function fetchRemoteData(params) {
  var promise = Futures.promise();
  $.getJSON("www.example.com", params, promise.fulfill, 'jsonp');
  return promise;
}

p = fetchRemoteData(params);
p.when(doStuff);
p.when(doMoreStuff);

AJAX 동기화 문제는 jQuery와 같은 라이브러리(즉, 비동기 속성을 통해 비동기 또는 동기화 작업을 지정할 수 있는 아약스 호출)에 의해 이미 추상화되었다고 생각합니다.동기화 모드를 선택하면 구현의 비동기성이 숨겨집니다.

jQuery는 또한 유창한 인터페이스와 체인의 예입니다.같은 일을 하는 다른 도서관들도 있습니다.운전대를 다시 만드는 것을 절약할 수 있습니다. 원하는 것을 바로 실행할 수 있습니다.

이 기능이 응답으로 작동하면 이러한 기능 전반에 걸쳐 우수한 자동 브라우저 호환성을 얻을 수 있습니다.그 물건들은 처음부터 다시 만드는 데 시간이 오래 걸립니다.

Twitter의 새로운 Anywhere API 노트 jQuery가 보입니다. 발굴 작업을 수행하면 모든 것이 이미 존재할 수 있습니다.

언급URL : https://stackoverflow.com/questions/2796375/designing-a-fluent-javascript-interface-to-abstract-away-the-asynchronous-nature