Andrejs Mamontovs : JavaScript

RxJS (Reactive Extensions JavaScript) pielietojuma piemērs

andrejs.mamontovs — Sat, 24 Apr 2010 13:30:20 GMT

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!

JavaScript Intellisense uzlabojums Visual Studio 2010

andrejs.mamontovs — Tue, 13 Apr 2010 18:59:20 GMT

Sveicināti,

Visual Studio 2010 kļūst vel draudzīgāka pret Web izstrādātājiem. Ir uzlabots JavaScript Intellisense, kas tagad spēj analizēt JavaScript kodu.

Zemāk redzams neliels vizuāls piemērs:

Kā redzams, koda analīze darbojās, izlecošā sarakstā parādās manis definētā metode – “Do” un lauks “Text”. Pagaidām, ar visiem maniem testiem Visual Studio lieliski tiek galā. Tagad es varu rakstīt kodu daudz precīzāk un ātrāk.

Cerams ka noderēs!

Reactive Extensions prezentācija

andrejs.mamontovs — Wed, 31 Mar 2010 21:47:29 GMT

Sveicināti,

Šoreiz iemūžināšu saiti uz Reactive Extensions precentāciju(http://live.visitmix.com/MIX10/Sessions/FTL01), kuru pasniedz Erik Meijer. Šī konkrētā versija tika pasniegta MIX 2010 ietvaros. Es personīgi šo te prezentāciju apmeklēju Microsoft Global Summit 2010 laikā. Raksturošu to tikai ar vienu vārdu – neaizmirstami. Pateikšu vairāk - Ēriks ir viens no tiem cilvēkiem, kas patiešām ir uzticīgs savai profesijai, un spēj aizraut visus klātesošos ar tām idejām, pie kurām darbojās viņa komanda.

Cerams noderēs!

jQuery aktuālās versijas izmantošana

andrejs.mamontovs — Tue, 30 Mar 2010 19:53:23 GMT

Sveicināti,

Šoreiz vēlos iemūžināt vienu noderīgu Html koda fragmentu, lai izstrādes laikā vienmēr tiktu lietota uz šo te brīdi aktuālā jQuery versija.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Protams tas neatbrīvo no nepieciešamības produkcijas versijā tomēr pārslēgties uz lokālo faila versiju.

Cerams noderēs!

Microsoft IE 8 XDomainRequest

andrejs.mamontovs — Wed, 08 Apr 2009 19:17:07 GMT

Sveicināti,

Turpinot iesākto tēmu par Microsoft IE 8 jaunumiem no programmētāja stata punkta. Šoreiz, par iespēju veikt asinhronos vaicājumus uz citu domēnu no JavaScript. Līdz nesenam laikam, modernajos pārlūkos pastāvēja ierobežojums, veidot vaicājumus tikai sava domēna ietvaros. Drīzumā šis ierobežojums tiks likvidēts. Bet par visu pēc kārtas.

IE 8 pārlūkā no JavaScript ir pieejams jauns objekts XDomainRequest. Objekts nodrošina šo te komunikāciju starp domēniem. Apskatīsim, kā tas darbojās uz piemēra

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">

        function getData() {

            var xdr = new XDomainRequest();
            xdr.open("get", "http://www.getdate.com/getdate.aspx");

            xdr.onload = function() {
                document.getElementById('content').innerHTML = 
                    toStaticHTML(xdr.responseText);
            }

            xdr.send();
        }

    </script>

</head>
<body>
    <button onclick="getData();">
        Get date</button>
    <div id="content"></div>
</body>
</html>

Uzrakstīju nelieku HTML kodu, pēc noklusējuma uz ekrāna parādās poga ar tekstu “Get date”. Nospiežot pogu, tiek izsaukta metode “getData”. Tie izveidots objekts XDomainRequest. Ar “open” metodes palīdzību, tiek izveidots savienojums ar citu domēna serveri. Parakstāmies uz notikumu “onload”, saņemtās atbildes saturu ievietojam elementā DIV ar nosaukumu “content”. Šinī vietā jāpiemin jauna IE 8 metode “toStaticHTML”, ar tās palīdzību kods tiek pasargāts no iespējamās JavaScript injekcijas(Injection). Vienkārši sakot, no satura tiek izmesti visi skripti un skriptu izsaukumi. Manu kodu noslēdz metodes “send” izsaukums. Tātad pieprasījums ir nosūtīts. No klienta puses tas arī vienkāršā gadījumā arī viss.

Servera pusē, servera atbildei ir jāpievieno iesākums (Header) (Response.AddHeader("Access-Control-Allow-Origin", "*"). Tādā veidā tiek pateikt, ka tiek atbalstīts starp domēnu izsaukums. Zvaigznītes vietā var norādīt arī konkrētu domēnu.

Pielikumā pievienoju Visual Studio projektu, lai to notestētu uz sava datora.

XDomainRequestDemo

P.S. Pirms palaist piemēru modificējies Windows host failu, lai domēns www.getdate.com tiktu piesaistīts localhost.

Cerams noderēs!

IE 8 tiešsaistes / nesaistes noteikšana izmantojot JavaScript

andrejs.mamontovs — Thu, 02 Apr 2009 20:27:39 GMT

Sveicināti,

Esam sagaidījuši jauno Microsoft Internet Explorer versiju. Jaunajai versijai ir daudz interesantu iespēju, bet par tam citreiz. Šoreiz par iespēju noteikt, kādā režīmā (Online/Offline) darbojās IE no JavaScript. Lai maksimāli ātri nodemonstrēt šo iespēju, uzrakstīju nelielu piemēru.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Online/Offline test</title>

<script type="text/javascript">


window.onload = function() {

    window.document.body.ononline = function() {
        alert('Online'); 
    }

    window.document.body.onoffline = function() {
        alert('Offline'); 
    }
}

alert("IsOnline:" + window.navigator.onLine)


</script>

</head>

<body></body>
</html>

Ideja ir sekojoša, BODY elementam parādījās divi jauni notikumi ononline un onoffline. Parakstoties uz kādu no tiek, jūsu rakstītais kods nepalaidīs garām brīdi, kad notiek pazīmes Work Offline(File –> Work Offline) izmaiņa. Tā pat, jūsu kodā pastāv iespēja noskaidros, vai pārlūks darbojās tiešsaistes režīmā izmantojot window.navigator.onLine pazīmi. Šis konstrukcijas manā skatījumā var būt noderīgas tīmekļu vietnēs, kuras izmanto AJAX iespējas. Tādā veidā brīdinot lietotāju, netiks veikti pieprasījumi uz serveri.

Cerams noderēs!

JavaScriptSerializer (System.Web.Extensions.dll)

andrejs.mamontovs — Sat, 03 Jan 2009 21:47:32 GMT

Labvakar,

Jaunais gads ir sagaidīts, laiks sākt strādāt ņemot piemēru no Stahanoviešiem:) Iespējams tādā veidā arī glābsim mūsu valsti!

Šoreiz par vienu interesantu klasi (JavaScriptSerializer), to var atrāst System.Web.Extensions.dll kompilācijā. Klases galvenais uzdevums, objektu, kas izveidots Microsoft.NET vidē aprakstīt JavaScript saprotamā formā (Json). Pārveidošana notiek abos virzienos. Šī te klase tiek pielietota ASP.NET AJAX un topošā Microsoft ASP.NET MVC.

Apskatīsim piemēru.

Uzrakstīsim vienkāršu klasi.

    /// <summary>
    /// The black box
    /// </summary>
    public class BlackBox
    {
        /// <summary>
        /// Initializes a new instance of the <see cref="BlackBox"/> class.
        /// </summary>
        public BlackBox()
        {
            Description = "Class description";
            this.List = new[] {"Apple", "Orange"};
        }

        /// <summary>
        /// Gets or sets the description.
        /// </summary>
        /// <value>The description.</value>
        public string Description
        {
            get; set;
        }

        /// <summary>
        /// Gets or sets the list.
        /// </summary>
        /// <value>The list.</value>
        public string[] List
        {
            get; set;
        }
    }

Izveidosim objektu

var blackBox = new BlackBox();

Šo te objektu ir nepieciešamība nosūtīt uz klientu, gan arī saņemt no klienta. Šim te nolūkam izveidosim paplašinošas metodes tipam objekts(object) un kopai(string)

using System.Web.Script.Serialization;

public static class Helpers
{
    public static string ObjectToJson(this object obj)
    {
        var o = new JavaScriptSerializer();
        return o.Serialize(obj);
    }

    public static T JsonToObject<T>(this string str)
    {
        var o = new JavaScriptSerializer();
        return o.Deserialize<T>(str);
    }
}

Tagad esam gatavi manipulēt ar datiem.

Datu raidīšanu uz klientu var veikt šādi.

var blackBox = new BlackBox();
var s = blackBox.ObjectToJson();
Response.ContentType = "application/json";
Response.Write(s);

Uz klientu objekts nonāk lūk šādā te formā, tie kas labi pazīstami ar JavaScript noteikti atpazīst pierakta formu. Starp citu JavaScriptā viss ir Hashtable;)

{"Description":"Class description","List":["Apple","Orange"]}

Savukārt saņemto datu apstrāde no klienta var veikt šādi.

var jsonString = "{\"Description\":\"Class description from client\",\"List\":[\"Lemon\"]}";
var o = jsonString.JsonToObject<BlackBox>();

Tātad visai elementāri atrisinām komunikāciju starp JavaScript un ASP.NET.

Cerams noderēs!

Izstrādātāja ikdiena (JavaScript String.trim)

andrejs.mamontovs — Sat, 22 Nov 2008 17:03:05 GMT

Labvakar,

Nevaru samierināties, ka daudziem manas profesijas pārstāvjiem piemīt spēja sarežģīt lietas. Reāls piemērs no dzīves, kods atrast

atkļūdojot svešu kodu.

<script type="text/javascript">

function Trim(s) 
{
    while ((s.substring(0, 1) == ' ') || (s.substring(0, 1) == '\n') || (s.substring(0, 1) == '\r')) 
    {
        s = s.substring(1, s.length);
    }

    while ((s.substring(s.length - 1, s.length) == ' ') || (s.substring(s.length - 1, s.length) == '\n') || (s.substring(s.length - 1, s.length) == '\r')) 
    {
        s = s.substring(0, s.length - 1);
    }
    return s;
}

</script>

Uzmetot aci, pirmā doma, jāiet pakaļ aliņam!. Parādījās reāla sausuma sajūta mutē. Interesanti, cik uz šo koda rakstīšanu cilvēkam patērēts laika? Cik vel viņš to atkļūdoja? Lai paliek vēsturē!

Sākam ar koda analīzi! Kāds ir koda galvenais uzdevums? Simbolu kopā, no kopas sākuma un beigām izgriezt visus tukšuma simbolus (atstarpe, kursora pārnesumus uz jaunu rindu). Viss darbojās. Pirmais likums, ja strādā – neaiztiec. Bet likumi ir rakstīti lai tos pārkāptu.

Lai šo te darbību uzrakstītu optimālā palīgā nāk regulārās izteiksmes. Tās speciāli ir domātas šādai un līdzīgām operācijām ar simbolu kopām (string)

Mazliet pārrakstot , funkcija izskatās jau šādi.

<script type="text/javascript">

function Trim(s) {
    return s.replace(/^\s+|\s+$/g, '');
}

</script>

Nu jau ir patīkami skatīties

Apliek tikai mazliet padomāt, lai šādu te kodu cilvēki nekopētu no vietas uz vietu (Copy/Paste) iztaisīt to kā tipa String sastāvdaļu.

<script type="text/javascript">

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }

</script>

Tagad varam rakstīt daudz smukākas konstrukcijas. Piemēram:

alert("  hello ".trim().length);

Ja savā darbā lieto ASP.NET AJAX, vai arī jQuery tad rakstīt fukciju nav vajadzības:

Gadījumā ar ASP.NET galvenais nosacījums ir lai .aspx failos tiktu definēts ScriptManager

<form id="ApplicationForm" runat="server">

<asp:ScriptManager runat="server" />

</form>

Un kodā rakstot atkal

alert("  hello ".trim().length);

visam būtu jādarbojas.

Gadījumā ar jQuery kods izskatās mazliet savādāk

alert($.trim("  hello ").length);

Abas implementācijas ir ļoti līdzīgas, lai apskatīs kāds tad kods ir, uzrakstam šadas te rindiņas:

alert("  hello ".trim);

alert($.trim);

No savas puses atliek tikai piebilsts, pirms ko rakstīt, apskaties internetā, pastāv 99% varbūtība, ka kas līdzīgs ir rakstīts. Atliek tikai pielāgot savām vajadzībām!

Cerams noderēs!