mėnesio Archyvai: Sausio 2014

Vargšas spartinimo JavaScript

[TL;DR versija: naudoja slapukus saugoti async skambinti rezultatai; padaryti pastaruosius async skambinti rezultatai iš karto ir tada patvirtinti jas po puslapio apkrova.]

Aš dirbu SharePoint svetainę klientas kad funkcijos, be kita ko, stilizuoti antrinės navigacijos kurių meniu parinktys yra valdomi per reguliariai senas pasirinktinį sąrašą.  Idėja, kad klientas gauna valdyti "savo" svetainės meniu be paveikti ar paveiks jo irtis pasaulinės navigacijos.

(kažkas neįtikėtinai ardomąją apie naują CEWP, kuris atkreipia dėmesį į HTML failą, krovinys šiek tiek CSS ir JS iš esmės pakeisti beveik viską apie svetainės veikimą... bet tai kitai įstaigai)

Šis gana paprastas kodas:

Gerklės vietoje čia yra tai, kad kiekvieną kartą, kai kas nors pataiko vieną iš svetainės puslapių, to vartotojo naršyklėje siekiančiam gauti elementus iš sąrašo.  Dev baigtas ir testavimas įrodė, ko reikia stabilios ir užpildydamas, uo nebūtina daugiau nei 99% laiko nuo meniu retai keičiasi.  Ji taip pat turi keistą UI įtakos, kuri yra paplitusi šioje brave new world hiper ajaxy interneto svetainėse-puslapio teikia ir tik tada meniu padaryti.  Tai nervingumas ir blaško dėmesį, mano nuomone.  Ir nervingumas. Taigi, Kaupimas talpykloje. 

Modifikavau logika thusly:

  • Ieškoti slapuką į naršyklę, kuri yra meniu kaip paskutinį kartą skaityti
    • Jei nustatyta,, padaryti jį iš karto.  Negalima laukti puslapio įkėlimą.  (Jums reikia įsitikinkite, kad jūsų HTML yra strategiškai išdėstyti čia, Tačiau tai nėra sunku padaryti).
  • Palaukite, kol puslapio įkėlimą ir padaryti su async skambinti įkelti meniu elementus sąraše naudojant poilsio ar lists.asmx ar kas
  • Palyginti ką aš prieš slapukas
    • Jei jis atitinka, sustoti, sustok
    • Kitaip, naudojant jQuery, dinamiškai užpildyti krūva, jei <Li>'s – yra <UL>
  • Naudoti CSS padaryti visas formatavimas
  • Pelno!

Kai jūs ketinate pasakyti, "Ei! nėra jokių realių buferinės vyksta čia nuo jūs skaitote meniu bet kuriuo atveju kiekvieną kartą.”  Ir tu teisus-aš nepateikiu serverio jokios pertraukos.  Bet ir nes skambutis yra async ir atsitinka po pradinio puslapio HTML krovinio visiškai sudarytų sąlygas, tai "mano" jautriau reaguoti į vartotojo.  Meniu tampa gana daug, kaip puslapio atkreipia.  Jei meniu būna, kad pakeitimas, vartotojas yra veikiamas nervingumas iš naujo parengti meniu, bet tik tą vieną kartą.

Yra keletas būdų, kaip padaryti šį spartinimo veiksmingesnę ir padėti atlikti serverio vienu metu:

  • Įdėti, kad "slapukų talpyklą" galioja ne trumpiau kaip taisyklė 24 valandų arba kai kurie kiti terminai. Tol, kol nėra pasibaigęs slapuko, Naudokite slapuką 's meniu fotografiją ir niekada hit serveris.

Well... that's viską, kas ateina į galvą šiuo metu :). 

Jei kas nors turi kokių nors protingas idėjų čia aš norėčiau žinoti jų.

Ir galiausiai – šis metodas gali būti naudojamas kitų dalykų.  Šis klientas puslapyje yra daug dalykų, duomenų valdomas įvairiuose puslapiuose, Daugelis iš jų keičiasi gana retai (pavyzdžiui, kartą per savaitę arba kartą per mėnesį).  Jei taikote pagal konkrečias sritis funkcijos, galite pateikti ir kvalifikacijų UI traukimas turinį iš vietos slapukas parduotuvė ir padaryti iš karto.  Jis mano greičiau vartotojui, net jei ne serverio bet ciklų.  Jūs gali įrašyti serverio ciklų sprendžiant kai kurių sąlygų ir skatina panaikinti šios vietos slapukų talpyklą.  Tai visos situacijos ir artsy stuff ir tikrai labiausiai įdomus :). 

</pabaigos>

undefinedPrenumeruoti savo dienoraštį.

Sekite mane Twitter ne http://www.twitter.com/pagalvin

kaip: Konfigūruoti vienetas testas ir bandymų apimtį su QUnit.js ir Blanket.js biuras 365 SharePoint App

Intro

Aš tyrinėti tyrimų padalinys ir bandymo aprėpties JavaScript, kaip aš dirbu naują SharePoint App SharePoint internete biure 365 Suite.  Akivaizdus tyrimų keliai atvedė mane į QUnit.js ir iš karto po, į Blanket.js.

QUnit leiskite nustatyti vienetas testai ir sugrupuoti juos į modulius.  Modulis yra tik paprastas būdas organizuoti susijusius tyrimus. (Aš nesu įsitikinęs aš naudoju jį taip, kaip numatyta, bet ji dirba man kol kas su maža bandymų aš iki šiol viršun).

Blanket.js sujungia su Qunit ir jis parodys man tikrasis eilutės JavaScript buvo- ir dar svarbiau – buvo ne faktiškai atliktus metu veikia bandymus.  Tai yra "aprėptis"-eilutės, kurias vykdyti taikomos bandymo kitos yra ne.

Kuriant geras bandymų atvejus ir peržiūros aprėpties, Mes galime sumažinti riziką, kad mūsų kodas yra paslėptų defektų.  Gerus laikus.

QUnit

Darant prielaidą, kad turite jūsų Visual Studio projekto nustatyti, Pradek JavaScript paketą iš http://qunitjs.com.  Įtraukti JavaScript ir atitinkamas CSS į savo sprendimą.  Mano atrodo tai:

image

Paveikslas 1

Kaip matote, Aš naudoju 1.13.0 tuo metu aš rašiau šį pranešimą dienoraščio. Nereikia pamiršti, kad atsisiųsti ir įtraukti CSS failą.

Kad iš kelio, Kitas žingsnis yra sukurti tam tikros rūšies bandymo pakinktų ir nuoroda į Qunit bitų.  Aš esu bandymai su krūva funkcijų į scenarijaus failą pavadinimu "QuizUtil.js", aš sukurtas vadinamas "QuizUtil_test.html" kaip parodyta HTML puslapį:

image Paveikslas 2

Čia yra kodas:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<galvos>
    <antraštinė dalis>QuizUtil bandymas su Qunit</antraštinė dalis>
    <nuoroda rel= "stilių" href="../CSS/QUnit-1.13.0.CSS" />
    <scenarijų tipo= text/javascript"" src="QuizUtil.js" duomenų-cover></scenarijų>
    <scenarijų tipo ="text/javascript" src ="qunit-1.13.0.js"></scenarijų>
    <scenarijų tipo ="text/javascript" src ="blanket.min.js"></scenarijų>

    <scenarijų>
        modulis("getIDFromLookup");
        bandymas("QuizUtil getIDFromLookupField", funkcija () {
            var goodValue = "1;#Paul Galvin";

            vienodo(getIDFromLookupField(goodValue) + 1, 2), "ID [" + goodValue + "] + 1 2";
            vienodo(getIDFromLookupField(neįvardintas), neįvardintas, "Nenurodytas įvesties argumentas grąžinkite neapibrėžtas rezultatas.");
            vienodo(getIDFromLookupField(""), neįvardintas, "Tuščias įvesties argumentas turėtų grįžti yra neapibrėžta reikšmė.");
            vienodo(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), neįvardintas,"Visada grąžinkite rezultatas Kabrioletas iki sveikojo");
            vienodo(getIDFromLookupField("2;#kito asmens"), "2", "Patikrinimo [2;#kito asmens].");
            vienodo(getIDFromLookupField("9834524;#Ilgojo sveikojo skaičiaus reikšmė"), "9834524", "Didelės vertės išbandymą.");
            notEqual(getIDFromLookupField("5;#kas nors", 6), 6, "Bandymai su notEqual (5 Nelygu 6 Šis mėginys: [5;#kas nors]");

        });

        modulis("htmlEscape");
        bandymas("QuizUtil htmlEscape()", funkcija () {
            vienodo(htmlEscape("<"), "&lt;", "Pabėgusi mažiau nei operatorius ('<')");
            vienodo(htmlEscape("<div class =  "someclass">Tekstą</DIV>"), "&lt;div class =&quot;SomeClass&quot;&gt;Tekstą&lt;/DIV&gt;", "Daugiau sudėtingų bandymų seka.");
        });

        modulis("getDateAsCaml");
        bandymas("QuizUtil getDateAsCaml()", funkcija () {
            vienodo(getDateAsCaml(naujas Data("12/31/2013")), "2013-12-31T:00:00:00", "Bandymų sunkiai koduojamų data: [12/31/2013]");
            vienodo(getDateAsCaml(naujas Data("01/05/2014")), "2014-01-05T:00:00:00", "Bandymų sunkiai koduojamų data: [01/05/2014]");
            vienodo(getDateAsCaml(naujas Data("01/31/2014")), "2014-01-31T:00:00:00", "Bandymų sunkiai koduojamų data: [01/31/2014]");
            vienodo(getTodayAsCaml(), getDateAsCaml(naujas Data()), "getTodayAsCaml() turėtų prilygti getDateAsCaml(naujos datos())");
            vienodo(getDateAsCaml("nesąmonė vertė"), neįvardintas, "Bandyti gauti dienos reikšmę nesąmonė.");
            vienodo(getDateAsCaml(neįvardintas), neįvardintas, "Pabandykite gauti dienos, [neįvardintas] data.");
        });

        modulis("getParameterByName");
        bandymas("QuizUtil getParameterByName (iš užklausos eilute)", funkcija () {
            vienodo(getParameterByName(neįvardintas), neįvardintas, "Pabandykite gauti nenurodytas parametras grąžinkite neapibrėžta.");
            vienodo(getParameterByName("nėra"), neįvardintas, "Stenkitės gauti parametro reikšmę, kai mes žinome, kad parametras nėra.");

        });

        modulis("Slapukai");
        bandymas("QuizUtil įvairias slapukų funkcijas.", funkcija () {
            vienodo(setCookie("bandymas", "1", -1), getCookieValue("bandymas"), "Get nustatyti slapuką turėtų dirbti.");
            vienodo(setCookie("anycookie", "1", -1), tiesa, "Nustatymas galioja maisto ruošimo grąžinkite"tiesa".");
            vienodo(setCookie("crazy slapukas pavadinimas !@#$%"%\^&*(()?/><.,", "1", -1), tiesa, "Nustatyti blogas slapukas pavadinimas turėtų grįžti 'false'.");
            vienodo(setCookie(neįvardintas, "1", -1), neįvardintas, "Passing nenurodyta kaip slapukas pavadinimas.");
            vienodo(getCookieValue("nėra"), "", "Slapukas neegzistuoja bandymų.");
        });

    </scenarijų>
</galvos>
<įstaiga>
    <DIV ID= "qunit"></DIV>
    <DIV ID= "qunit-rungtynių"></DIV>

</įstaiga>
</HTML>

Yra keletas dalykų, vyksta čia:

  1. Nuorodos mano kodas (QuizUtil.js)
  2. Nuoroda Qunity.js
  3. Nustatyti kai kurie moduliai (getIDFromLookup, Slapukai, ir kt.)
  4. Pateikimo, <DIV> kurio ID yra "qunit".

Tada, Aš tiesiog patraukite šiame puslapyje ir gausite kažką panašaus į tai:

image

Paveikslas 3

Jei jums atrodo per viršų, turite kelias parinktis, du iš jų yra įdomus:

  • Slėpti leista testai: Gana akivaizdus.  Gali padėti jūsų akis tik pamatyti probleminės sritys ir ne daug netvarkos.
  • Modulis: (išskleidžiamajame): Tai bus filtruoti bandymus iki tik tuos grupinius bandymus norite.

Kaip patys – keletą pastabų testai:

  • Savaime suprantama, kad jums reikia parašyti kodą taip, kad tai galintis būti testatorius į pirmąją vietą.  Įrankio naudojimas gali padėti įgyvendinti ši disciplina. Pavyzdžiui, Turėjau funkcija vadinama "getTodayAsCaml()”.  Tai nėra labai galintis būti testatorius, nes reikia ne įvesties argumentas ir išbandyti lygybės, mums reikia nuolat atnaujinti bandymas kodas atspindėti esamą datą.  Aš przebudowana jį pridedant duomenų įvesties parametras tada perduoti kai noriu dienos CAML formato dabartinę datą.
  • Pagal Qunit dokumentus savo bandymus ir atrodo gana tvirtas.  Tai galite padaryti tokie paprasti dalykai kaip bandymų lygybės ir palaiko ajax stiliaus skambučių ("real" arba tyčiojosi naudojant jūsų mėgstamiausių mocker).
  • Vyksta procesas taip pat verčia galvoti per krašto atvejai – kas atsitinka su "nenurodyta" arba null perduodama į funkcij±.  Todėl miręs paprasta patikrinti šiuos scenarijus.  Neblogai.

Padengimo su Blanket.js

Blanket.js papildo Qunit stebėjimo tikrasis eilučių kodo, kurios vykdomos per veikia savo bandymus.  Jis apima teisę į Qunit nors tai visiškai atskiras app, ji groja gražiai – ji tikrai atrodo kaip tai vienas besiūlių app.

Tai blanket.js veiksmų:

image Paveikslas 4

image

Paveikslas 5

(Iš tikrųjų turite paspausti ant "aprėptis" žymimąjį laukelį įgalinti viršuje [pav 3] norint sudaryti tam sąlygas.)

Pabrėžė eilučių skaičius 5 nebuvo įvykdyta kuri nors iš mano bandymai, Todėl reikia parengti testas, kuris sukelia jiems vykdyti, jeigu aš noriu visišką.

Gauti blanket.js dirba atlikdami šiuos veiksmus:

  1. Jį atsisiųsti iš http://blanketjs.org/.
  2. Įtraukti jį į savo projektą
  3. Atnaujinti savo bandymo pakinktų puslapį (QuizUtil_test.html mano atveju) taip:
    1. Nuoroda kodas
    2. Papuošti jūsų <scenarijų> nuoroda, kaip tai:
    <scenarijų tipo= text/javascript"" src="QuizUtil.js" duomenų-cover></scenarijų>

Blanket.js susitvarko atributą "duomenų-cover" ir neturi savo magija.  Jis kabliukai į Qunit, atnaujina UI pridėti parinktį "Įjungti aprėptis" ir voila!

Santrauka (TL; DR)

Naudoti Qunit parašyti savo bandymų atvejus.

  • Jį atsisiųsti
  • Įtraukti jį į savo projektą
  • Rašyti bandymo pakinktų puslapį
  • Sukurti savo bandymus
    • Refactor kai kurių jūsų kodas turi būti galintis būti testatorius
    • Būkite išradingi!  Manau, kad crazy, neįmanoma scenarijus ir išbandyti juos bet kokiu atveju.

Naudoti blanket.js su pažangiąja

  • Įsitikinkite, kad Qunit dirba
  • Parsisiųsti blanket.js ir įtraukti jį į savo projektą
  • Įtraukti jį į savo bandymo pakinktų puslapį:
    • Įtraukite nuorodą į blanket.js
    • Pridėti atributo "duomenų-padengti" į savo <scenarijų> žymė
  • Paleisti savo Qunit bandymai.

Aš niekada iš tikrųjų bet koks apie tai anksčiau ir turėjo kaiką primityvus dirba keletas valandų. 

Happy bandymai!

</pabaigos>

undefinedPrenumeruoti savo dienoraštį.

Sekite mane Twitter ne http://www.twitter.com/pagalvin