RxJS (Reactive Extensions JavaScript) pielietojuma piemērs

Sveicināti,

Pavisam nesen biju iemūžinājis saiti uz prezentāciju par Rx(Reactive Extensions).

Rx projekts nāk no Microsoft izpētes komandas. Projekta pamatā ir doma, ka visas darbības var uzvērt kā datubāzi(man patīk vairāk datu avots). Piemēram, datora pele ir nekas cits, kā datu avots. Katru mirkli tās raida informāciju par sava stāvokļa izmaiņām. Datorā ar ierīces draivera palīdzību šie te dati nepārtraukti tiek apstrādāti, un pārraidīti tālāk. Šo te principu var pārnest uz programmēšanas platformu.

Piemēram, datu iegūšana no interneta vietnes(datu avots). Vaicājumi pēc datiem ir asinhrons process. Var paiet ilgs laiks no pieprasījuma nosūtīšanas līdz brīdim kad tiek saņemta atbildes. Nav svarīgi vai tā ir pelīte vai komunikācijas protokols vai vel kas, svarīgi būtu iegūt savā rīcībā vienotu veidu, kādā programmēt signāla pārraidi, saņemšanu, filtrāciju un apstrādi. Šiem te mērķiem arī kalpo .NET videi rakstīta Rx bibliotēka, un arī tas JavaScript versija.

Uz piemēra pacentīšos parādīt idejas spēku!

Nospraudīsim darba uzdevumu:

• Nepieciešams parakstīties uz ASP.NET AJAX asinhronu datu nosūtīšanu uz serveri.

Realizācija

Izstrādātāji, kas ir pazīstami ar ASP.NET noteikti pazīst ScriptManager kontroli. Kontrolei ir visai noteikt mērķis, nodrošinās AJAX funkcionalitāti gan servera gan klienta pusē.

<asp:ScriptManager ID="scriptManager" runat="server" />

Ar šīs kontroles starpniecību pavērās iespēja piekļūt pie AJAX JavaScript API dažādām manipulācijām ar datiem. Manā gadījumā, iespēju noteikt brīdi, kad tiek nosūtīts asinhronais pieprasījums, un tiek saņemta atbildes. Zemāk kods, ar kura palīdzību var parakstīties uz nosūtīšanas notikumu.

var i = Sys.WebForms.PageRequestManager.getInstance();
i.add_beginRequest(function() {});

Līdzīgā veida var parakstīties vel uz vairākiem citiem notikumiem.

Kā jau rakstīju, būtu lieliski, ja notikumu apstrāde būtu vienādota, nav svarīgi vai apstrādāšu pelītes kustību, vai pieprasu datus, vai veicu vel kādu citu darbību.

Tātad pirmajā soli pievienojam RxJS bibliotēku savā kodā.

<script type="text/javascript" src="<%=ResolveUrl("~/Content/rx.js") %>"></script>

No šī brīža vara sākt rakstīt kodu, tā saucamo signālu avotu.

var RequestObservable = {
    Create: function() {
        return Rx.Observable.Create(function(obs) {
            with (Sys.WebForms.PageRequestManager.getInstance()) {
                add_beginRequest(function() {
                    obs.OnNext(false);
                });

                add_endRequest(function() {
                    obs.OnNext(true);
                });
            }

            return {}

        });
    }
};

Izveidoju objektu RequestObservable ar vienīgo metodi Create, kas atgriezīs man tā saucamo Push stila kolekciju. Tas tiek panākts ar Rx.Observable.Create izsaukuma rezultāta atgriešanu. Rx.Observable.Create metodei, kā arguments tiek padota funkcija. Tas ķermenī notiek parakstīšanās uz ASP.NET AJAX notikumiem add_beginRequest un add_endRequest. Tanī brīdī, kad šie notikumi izpildīsies, tiks raidīts signāls ar atšķirīgiem argumentiem. Manā gadījumā tie ir true/false.

Pēc signāla avota izveides, veidojam signāla apstrādes funkcionalitāti.

$(document).ready(
    function() {
        var request = RequestObservable.Create();

        var open = request.Throttle(250).Where(function(e) { return e === false; });
        var close = request.Where(function(e) { return e === true; });

        open.Subscribe(function() {
            // Kods
        });

        close.Subscribe(function() {
            // Kods
        });
    }
);

Izmantoju jQuery lai parakstītos uz lapas ielasīšanu(metodes ready izsaukšana). Pēc lapas ielasīšanas veidojam signāla avotu.

var request = RequestObservable.Create();

Nākamajā solī nodefinēju divus filtrus, kuri veiks signāla šķirošanu.

• open filtrs atlasīs pieprasīja nosūtīšanu, nolasot tikai signālu, kuri ir pēdējie 250 milisekunžu laikā(metode Throttle).
• Otrs, close filtrs atlasīs atbildēs saņemšanas signālus.

var open = request.Throttle(250).Where(function(e) { return e === false; });
var close = request.Where(function(e) { return e === true; });

Pēdējais solis, atliek tikai parakstīties uz notikumiem.

open.Subscribe(function() {
    // Kods
});

close.Subscribe(function() {
    // Kods
});

Šinī rakstā centos parādīt maksimāli pietuvinātu dzīvei piemēru. Tas ir tikai viens scenārijs no daudziem.

Cerams, ka noderēs!

Gaidīšu jūsu komentārus, labprāt atbildēšu uz visiem jautājumiem!

---

Posted Apr 24 2010, 12:30 PM by andrejs.mamontovs