Monthly Archives: Janvāris 2014

Nabaga cilvēks ir kešatmiņā, JavaScript

[TL;DR versija: izmanto sīkdatnes, lai saglabātu async sarunu rezultāti; padarīt rezultāti pēdējos async aicina nekavējoties un pēc tam apstiprināt tos pēc lapas ielādes.]

Es esmu strādājusi par SharePoint iekštīkla vietnes klientu, ka līdzekļi, cita starpā, stilizētu sekundārās navigācijas, kuru izvēlnes opcijas tiek pārvaldīti regulāru veco pielāgotu sarakstu.  Ideja ir tāda, ka klients saņem, neietekmējot vai slimas ar globālās navigācijas uzdeva to kontrolēt "viņu" portāla izvēlne.

(tur ir kaut kas ārkārtīgi graujošām par pievienojot CEWP, kas norāda uz HTML failu, kas ielādē daži CSS un JS pašos pamatos mainīt gandrīz visu par vietņu uzvedība... bet tas ir citā amatā)

Šī ir diezgan vienkāršs kods:

Iekaisis vietas šeit ir tas, ka katru reizi, kad kāds pieskaras viens no vietnes lapas, šī lietotāja web pārlūkprogrammā ir sasniedzamas, lai saņemt vienumus no saraksta.  Pēc tam, kad ir pabeigta dev un pārbaude ir pierādījusi lietas ir stabilas un pabeigt, šo aicinājumu nav vajadzīga vairāk nekā 99% laika, jo reti maina izvēlni.  Tai arī dīvaini UI ietekmē, kas ir kopīgs šo drosmīgs jaunu pasauli, hiper ajaxy tīmekļa vietnes-lappuse tiek atveidota, un tikai tad izvēlnē padarīt.  Tas ir nervozs un uzmanību, manuprāt.  Un nervozs. Tik, kešatmiņā. 

Loģika ir rediģēts thusly:

  • Meklēt cookie pārlūks, kas satur izvēlnes, kā es to izlasītu pēdējās
    • Ja konstatēts, padarīt to nekavējoties.  Negaidiet, lai lapas lejuplādēšanas pabeigšanai.  (Jums ir jāpārliecinās, ka jūsu HTML stratēģiski novietoti šeit, bet tas nav grūti izdarāms).
  • Pagaidiet, līdz lappuse ir lejuplādēšanas pabeigšanai un veikt zvanu izvēlnes elementus sarakstā, izmantojot atpūtas vai lists.asmx vai kāds ielādējiet async
  • Salīdzināt to, ko es saņēmu pret cookie
    • Ja tas atbilst, apstājieties
    • Pretējā gadījumā, izmantojot jQuery, dinamiski aizpildīt ķekars, ja <Li>ir programmā <UL>
  • Izmantot CSS darīt visu formatējumu
  • Peļņa!

Daži no jums gatavojas teikt, "Hei! nav, nav īsta caching notiek šeit, jo jūs lasāt izvēlnes, tomēr katru reizi, kad.”  Un tev taisnība-es neesmu dodot serveris nekādu pārtraukumu.  Bet jo async izsaukums un notiek pēc sākotnējās lappuses HTML komerckrava pilnībā padara, to "jūtas" vairāk reaģē uz lietotāja.  Izvēlnes padara diezgan daudz kā lapa vērš.  Ja notiek izmaiņas izvēlnes, lietotājs ir pakļauts nervozitātes atkārtoti izdarīt no izvēlnes, bet viena vienīga reize.

Ir daži veidi, kā padarīt šo kešatmiņā efektīvākas un izpalīdzēt serverī vienlaikus:

  • Ielikt "sīkfailu kešatmiņa" ir derīga vismaz kārtulā 24 stundas vai kādu citu laika periodu. Kamēr nav beidzies sīkfailu, izmantojiet izvēlni sīkfailu momentuzņēmumu un nekad hit servera.

Nu... tas ir viss, kas nāk prātā tieši tagad :). 

Ja kāds ir jebkurš gudrs idejas šeit labprāt vēlētos zināt tos.

Un visbeidzot – šo tehniku var izmantot arī citas lietas.  Šī klienta lapa ir vairākas lietas, datu vadītas dažādās lappusēs, daudzi no viņiem mainās samērā reti (piemēram, reizi nedēļā vai reizi mēnesī).  Ja jums mērķis konkrētas jomas funkcionalitāti, jūs varat dot vairāk atsaucīgāku UI, velkot saturu no vietējo Sīkfails uzglabāt un padarot nekavējoties.  Tā uzskata ātrāk lietotājs, pat tad, ja nav krājat naudu serverim jebkurā cikliem.  Jums var saglabāt serverī cikli, izlemjot par dažiem nosacījumiem un trigeriem par spēkā neesošiem šī vietējā sīkfailu kešatmiņa.  Tas ir visas situācijas un artsy stuff, un tiešām visvairāk jautru :). 

</beigās>

undefinedAbonēt manu blogu.

Sekot mani uz čivināt pie http://www.twitter.com/pagalvin

kā: Konfigurēt vienības testu un testa segumu ar QUnit.js un Blanket.js Office 365 SharePoint App

Intro

Es esmu bijis izpētīt vienības pārbaude un testa segumu JavaScript, kā es strādāju par jaunu SharePoint app tiešsaistē SharePoint, Office 365 komplekts.  Acīmredzams pētniecības ceļi aizveda mani uz Qunit.js un pēc tam pa labi, lai Blanket.js.

QUnit atļaujiet iestatīt vienības testos un tos grupēt moduļus.  Modulis ir tikai vienkāršs veids, kā organizēt saistītos testus. (Es neesmu pārliecināts, ka es lietoju to, kā paredzēts, bet tas strādā man līdz šim ar nelielu testu es līdz šim definēto kopu).

Blanket.js integrējas ar Qunit un to parādi faktiskās rindas JavaScript, kas bija- un vēl svarīgāk – netika faktiski izpildītas laikā darbojas testu.  Tas ir "segums"-līnijām, kas izpildīts attiecas pārbaudes, kamēr citi nav.

Starp labu precedentiem iestatīšanu un skatīšanu pārklājums, mēs varam samazināt risku, ka mūsu kods ir slēpta defekti.  Labos laikos.

Qunit

Pieņemot, ka jums ir Visual Studio projektu iestatīt, Sāciet ar JavaScript pakotnes lejupielāde no http://qunitjs.com.  Pievienot JavaScript un CSS atbilstošās savu risinājumu.  Raktuves izskatās:

image

Stāvs 1

Kā jūs varat redzēt, Bija, izmantojot 1.13.0 brīdī, kad es uzrakstīju šo blog post. Neaizmirstiet lejupielādēt un pievienot CSS failu.

Kas no tā, kā, Nākamais solis ir izveidot sava veida testa siksnas un references Qunit biti.  Es esmu testēšanas funkcijas ķekars skripta fails, ko sauc par "QuizUtil.js", tāpēc es radīju HTML lapas, ko sauc par "QuizUtil_test.html", kā parādīts:

image Stāvs 2

Šeit ir kods:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<galvu>
    <nosaukums>QuizUtil tests ar Qunit</nosaukums>
    <saite rel= "izvēršamā stila lapu" href="../CSS/qunit-1.13.0.CSS" />
    <skriptu tips= text/javascript"" src="QuizUtil.js" datu segums></skriptu>
    <skripta tips ="text/javascript" src ="qunit-1.13.0.js"></skriptu>
    <skripta tips ="text/javascript" src ="blanket.min.js"></skriptu>

    <skriptu>
        modulis("getIDFromLookup");
        tests("QuizUtil getIDFromLookupField", funkcija () {
            var goodValue = "% 1;#Paul Galvin";

            vienāds(getIDFromLookupField(goodValue) + 1, 2), "ID [" + goodValue + "] + 1 vajadzētu būt 2";
            vienāds(getIDFromLookupField(nedefinēta), nedefinēta, "Undefined ievades argumentu vajadzētu atgriezties nenoteikts rezultāts.");
            vienāds(getIDFromLookupField(""), nedefinēta, "Nedefinēts vērtību vajadzētu atgriezties tukšu ievades arguments.");
            vienāds(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), nedefinēta,"Vienmēr jāatgriežas kabriolets rezultātu līdz veselam skaitlim");
            vienāds(getIDFromLookupField("% 2;#kāda cita persona"), "% 2", "Pārbaudot [2;#kāda cita persona].");
            vienāds(getIDFromLookupField("9834524;#Long vērtība"), "9834524", "Lielu vērtību tests.");
            notEqual(getIDFromLookupField("5;#ikviens", 6), 6, "Testēšana notEqual (5 nav vienāds ar 6 šajā izlasē: [5;#ikviens]");

        });

        modulis("htmlEscape");
        tests("QuizUtil htmlEscape()", funkcija () {
            vienāds(htmlEscape("<"), "&lt;", "Bēg mazāk nekā operators ('<')");
            vienāds(htmlEscape("<div class =  "someclass">Nedaudz teksta</DIV>"), "&lt;div class =&quot;someclass&quot;&gt;Nedaudz teksta&lt;/DIV&gt;", "Vairāk sarežģītu testu virkne.");
        });

        modulis("getDateAsCaml");
        tests("QuizUtil getDateAsCaml()", funkcija () {
            vienāds(getDateAsCaml(jaunā Datums("12 31 2013")), "2013-12-31T:00:00:00", "Grūti kodētu datuma pārbaude: [12/31/2013]");
            vienāds(getDateAsCaml(jaunā Datums("01/05/2014")), "2014-01-05T:00:00:00", "Grūti kodētu datuma pārbaude: [01/05/2014]");
            vienāds(getDateAsCaml(jaunā Datums("01/31/2014")), "2014-01-31T:00:00:00", "Grūti kodētu datuma pārbaude: [01/31/2014]");
            vienāds(getTodayAsCaml(), getDateAsCaml(jaunā Datums()), "getTodayAsCaml() jābūt vienādai getDateAsCaml(jaunais datums())");
            vienāds(getDateAsCaml("muļķības vērtība"), nedefinēta, "Centieties iegūt muļķības vērtība datuma.");
            vienāds(getDateAsCaml(nedefinēta), nedefinēta, "Centieties iegūt dienas [nedefinēta] datumu.");
        });

        modulis("getParameterByName");
        tests("QuizUtil getParameterByName (no vaicājuma virknes)", funkcija () {
            vienāds(getParameterByName(nedefinēta), nedefinēta, "Centieties iegūt nenoteiktu parametru vajadzētu atgriezties Nedefinēts.");
            vienāds(getParameterByName("nepastāv"), nedefinēta, "Mēģināt iegūt parametra vērtība, kad mēs zinām, ka parametrs vairs nepastāv.");

        });

        modulis("Sīkfaili");
        tests("QuizUtil sīkfailu dažādas funkcijas.", funkcija () {
            vienāds(setCookie("test", "% 1", -1), getCookieValue("test"), "Get sīkfails, es noteikti būtu jāstrādā.");
            vienāds(setCookie("anycookie", "% 1", -1), patiess, "Nosakot spēkā vārīšanas vajadzētu atgriezties"taisnība".");
            vienāds(setCookie("traks cookie nosaukums !@#$%"%\^&*(()?/><.,", "% 1", -1), patiess, "Nosakot sliktu sīkfaila nosaukumu vajadzētu atgriezties 'false'.");
            vienāds(setCookie(nedefinēta, "% 1", -1), nedefinēta, "Iet nedefinētu nosaukums sīkdatne.");
            vienāds(getCookieValue("nepastāv"), "", "Sīkdatne neeksistē tests.");
        });

    </skriptu>
</galvu>
<organizācija>
    <DIV ID= "qunit"></DIV>
    <DIV ID= "qunit armatūra"></DIV>

</organizācija>
</HTML>

Ir vairākas lietas, kas te notiek:

  1. Apskatot manu kodu (QuizUtil.js)
  2. Atsauces Qunity.js
  3. Definējot dažiem moduļiem (getIDFromLookup, Sīkfaili, un citi)
  4. Ievietojot <DIV> kura ID ir "qunit".

Pēc tam, Es vienkārši velciet šo lapu uz augšu, un jums kaut kas līdzīgs šim:

image

Stāvs 3

Ja paskatās pāri augšpusei, jums ir dažas iespējas, no kuriem divi ir interesanti:

  • Paslēpt izturējis testus: Diezgan skaidrs.  Var palīdzēt jūsu acu tikai redzēt problemātiskās jomas un nav daudz traucējumu.
  • Modulis: (nolaižamais saraksts): Tas filtrēs testus uz leju, lai tikai tām grupām, testi, ko vēlaties.

Attiecībā uz testiem, sevi-daži komentāri:

  • Pats par sevi saprotams, ka jums rakstīt kodu, tāda, ka pirmām kārtām ir testable.  Izmantojot rīku var palīdzēt īstenot šo disciplīnu. Piemēram, Man bija funkciju sauc "getTodayAsCaml()”.  Tas nav ļoti testable, jo tas aizņem ievades arguments un pārbaudītu to līdztiesības, mums būtu nepieciešams pastāvīgi atjaunināt testa kodu, lai parādītu pašreizējo datumu.  Es to refactored pievienošanu datiem ievades parametrs, pēc tam iet, kad es gribu, lai šodienas datumu formātā CAML pašreizējo datumu.
  • Qunit ietvaros dokumentus saviem testiem un šķiet diezgan stabila.  To var darīt vienkāršas lietas, piemēram, pārbaudes par vienlīdzību un ir arī atbalsts stilā ajax zvanus ("īstu" vai izsmēja, izmantojot savu iecienītāko smējējs).
  • Iet cauri procesam arī liek domāt ar malu gadījumos – kas notiek ar "Nedefinēts" vai null tiek nodota funkcijai.  Tas padara miris vienkārši pārbaudīt ārā šos scenārijus.  Labs stuff.

Ar Blanket.js segumu

Blanket.js papildina Qunit, izsekojot faktisko koda rindiņas, kas darbojas jūsu pārbaudes gaitā izpildīt.  Tā integrē tiesības Qunit tik pat, ja tas ir pilnīgi atsevišķs app, tas spēlē labi – tiešām izskatās, ka tas ir viens bezšuvju app.

Tas ir blanket.js darbībā:

image Stāvs 4

image

Stāvs 5

(Jūs faktiski ir noklikšķiniet uz "Aktivizēt segums" rūtiņas augšpusē [sk. 3] lai iespējotu šo.)

Iezīmētās līnijas attēlā 5 nav izpildīts jebkurš no maniem testiem, tāpēc man ir nepieciešams izstrādāt testa, kas izraisa to izpildīt, ja es gribu pilnu pārklājumu.

Iegūt blanket.js darbu, rīkojieties šādi:

  1. Lejupielādējiet to no http://blanketjs.org/.
  2. Pievienot savam projektam
  3. Atjaunināt jūsu iejūgs testa lappuse (QuizUtil_test.html manā gadījumā) šādi:
    1. Atsauces kods
    2. Izrotāt jūsu <skriptu> atsauci, piemēram, tas:
    <skriptu tips= text/javascript"" src="QuizUtil.js" datu segums></skriptu>

Blanket.js paceļ "datu segums" atribūts un paveic savu brīnumu.  To āķi vērā Qunit, atjaunina UI pievienot "Enable segums" variants un voila!

Kopsavilkums (TL; DR)

Lietojiet Qunit, lai rakstītu pārbaudes lietas.

  • To lejupielādēt
  • Pievienot savam projektam
  • Rakstīt testa siksnas lappusi
  • Izveidojiet savu testu
    • Daži no jūsu kodam jābūt testable refactor
    • Esiet radošs!  Domāju, ka crazy, neiespējami scenārijus un testa viņiem vienalga.

Izmantojiet blanket.js lai nodrošinātu pārklājumu

  • Pārliecinieties, vai darbojas Qunit
  • Blanket.js lejupielādēt un pievienot to savam projektam
  • To pievienotu jūsu iejūgs testa lappuse:
    • Pievienot atsauci uz blanket.js
    • "Datu segums" atribūtu, lai pievienotu jūsu <skriptu> tagu
  • Darboties, Qunit pārbaudes.

Es nekad nebija jebkura šāda pirms un bija daži rudimentārs stuff darbojas nedaudzas stundas. 

Laimīgs testēšana!

</beigās>

undefinedAbonēt manu blogu.

Sekot mani uz čivināt pie http://www.twitter.com/pagalvin