Havi Archívum: Január 2014

Szegény ember meg gyorsítótár-JavaScript

[TL;DR változat: aszinkron hívások eredményének tárolására cookie-k segítségével; Render korábbi aszinkron hívás eredményét azonnal, és akkor ellenőrzi őket után az oldal teher.]

Már dolgozik a SharePoint intranetes hely egy ügyfél amit jellegét meghatározza, egyebek, stilizált másodlagos navigációs, amelynek menüpontok kezelt keresztül rendszeres régi egyéni listát.  Az ötlet az, hogy az ügyfél kap, hogy "saját" webhely menü nem érintő, vagy befolyásolják a globális navigációs tesz ki.

(van valami hihetetlenül felforgató, egy CEWP, amit váltó-hoz egy HTML-fájlt, amely betölti néhány CSS és JS, hogy alapjaiban változtatja meg egy webhely viselkedése... szinte mindent, de ez egy másik post hozzáadásával kapcsolatban)

A kód részére ez szép egyszerű:

  • Várni a lap betöltése befejezni, és csinál egy hív-hoz teher megjelöl menüpontok segítségével a többi vagy lists.asmx, vagy bármi listájából aszinkron
  • Segítségével jQuery, dinamikusan feltöltése egy csomó, ha <Li>belül a szülő meg <UL> (Lásd Christian Pinder itt ez tecnnique egyszerű magyarázata)
  • Tenni, a formázás CSS segítségével
  • Profit!

A herpesz spot itt az, hogy minden alkalommal, amikor valaki eléri az egyik a telek oldalak, hogy a felhasználó webböngésző elérése, kap elemek a listában.  Egyszer befejeződött a dev és vizsgálat bizonyította a dolgokat, hogy stabil, és teljes, ezt a felhívást a felesleges több mint 99% az idő, mivel az étlap csak ritkán változik.  Ez is birtokol egy furcsa UI hatással, ami gyakran a szép új világban hyper ajaxy webhelyek – az oldal, és csak akkor nem jeleníti meg a menüben.  Az ideges és zavaró az én véleményem.  És ideges. Így, cache-t. 

Módosítottam a logika imigyen:

  • Keres egy süti a böngésző, hogy utoljára olvasni, ez a menü tartalmazza
    • Ha talált, hogy azonnal tegyék.  Ne várjon az oldal betöltésekor.  (Sírnod kell győződj meg a HTML stratégiailag elhelyezett itt, de ez nem nehéz megtenni).
  • Várni a lap betöltése befejezni, és csinál egy hív-hoz teher megjelöl menüpontok segítségével a többi vagy lists.asmx, vagy bármi listájából aszinkron
  • Hasonlítsa össze, mit kapott, szemben a cookie-k
    • Ha ez megegyezik, állj
    • Egyébként, segítségével jQuery, dinamikusan feltöltése egy csomó, ha <Li>meg az a <UL>
  • Tenni, a formázás CSS segítségével
  • Profit!

Néhányan azt fogják mondani, "Hé! van nem igazi cache folyik itt óta olvasod a menü egyébként minden egyes alkalommal.”  És igazad van,-nem adom, a szerver bármilyen típusú szünet.  De azért, mert a hívás aszinkron és történik után az oldal kezdeti HTML tartalom teljesen viszonoz, "érzés" jobban reagál, hogy a felhasználó.  A menü szép teszi, mint az oldal felhívja.  Ha a menüben az történik, hogy a változás, a felhasználó van kitéve egy ideges újra felhívni a menü, de csak ekkor, egy alkalommal.

Vannak néhány ways-hoz ez gyorsítótárazás hatékonyabbá tenni és segíteni a kiszolgáló egy időben:

  • Betesz egy szabály, hogy a "cookie-cache" érvényes minimum 24 órán vagy néhány más időkeret. Mindaddig, amíg van nem lejárt süti, használja a cookie-k menü pillanatképet, és soha nem hit a szerver.

Hát... ennyi jutott eszembe most :). 

Ha akárki birtokol akármi okos ötleteket itt szeretném tudni, hogy őket.

És végül – ezt a technikát lehet használni más dolgok.  Ez az ügyfél oldal számos adat-vezérelt dolog a különböző oldalak, Sokan közülük viszonylag ritkán változó (mint hetente vagy havonta egyszer).  Ha adott területen a funkcionalitás cél, egy rugalmasabb felhasználói Felületet ad húzza a tartalmat a helyi cookie boltból, visszaadás azonnal.  Érzés gyorsabb, hogy a felhasználó még akkor is, ha nem menti a kiszolgálón bármely ciklusok.  Ön lehet mentse a server ciklusok azzal a bizonyos feltételek és kiváltó, hogy érvényteleníti a helyi cookie-cache.  Ez minden szituációs és artsy cucc, és tényleg a legnagyobb élmény :). 

</vége>

undefinedSubscribe to my blog.

Kövesse nekem Twitter http://www.twitter.com/pagalvin

kézikönyv: QUnit.js és Blanket.js egység vizsgálat és teszt lefedettség beállítása egy iroda 365 SharePoint App

Intro

Már vizsgálja egység tesztelése, és a teszt lefedettség a JavaScript, mint én dolgozik-ra egy új SharePoint app SharePoint online, az irodában 365 Suite.  A nyilvánvaló kutatási út vezetett engem Qunit.js és azután, hogy jobb, a Blanket.js.

QUnit hadd beállítása unit tesztek, és csoportosítsa őket modulok.  A modul csak egy egyszerű út-hoz szervez kapcsolódó vizsgálatok. (Nem vagyok benne biztos, én használ ez a tervezettnek, de ez működik nekem eddig eddig van meghatározott kis csoportja).

Blanket.js integrálja, a Qunit, és megmutatja nekem a tényleges sornyi JavaScript-és ami még fontosabb – voltak nem ténylegesen végrehajtott vizsgálatok futtatása során.  Ez az "fedezet"-vonalak, hogy végre tartoznak a vizsgálat míg mások nem.

Jó teszt esetek felállítása és lefedettsége közötti, Mi csökkentheti annak kockázatát, hogy a kód birtokol rejtett hibák.  Jó idő.

Qunit

Feltételezve, hogy a Visual Studio projekt beállítása, Töltse le a JavaScript csomag http://qunitjs.com.  A JavaScript és a CSS megfelelő hozzáadása a megoldáshoz.  Az enyém úgy néz ki mint ez:

image

Ábra 1

Mint te tud lát, Voltam használ 1.13.0 abban az időben ezt a blogbejegyzést írtam. Ne felejtsd el letölteni, és a CSS-fájl hozzáadása.

Hogy az útból, következő lépés, hogy hozzon létre valamilyen teszt felszerszámoz és hivatkozás a Qunit bit.  Én vizsgálat egy csomó funkciók egy kézírás reszelő nevezett "QuizUtil.js", ezért hoztam létre egy HTML-lapot, az úgynevezett "QuizUtil_test.html", mint mutatott-ban:

image Ábra 2

Itt van a kód:

<!DOCTYPE HTML>
<HTML xmlns"http =://www.w3.org/ 1999/xhtml">
<fej>
    <cím>QuizUtil vizsgálat Qunit</cím>
    <Link rel= "stylesheet" href="../CSS/qunit-1.13.0.css" />
    <parancsfájl típus= text/javascript"" src="QuizUtil.js" adatok-fedél></parancsfájl>
    <a parancsfájl típus ="text/javascript" src ="qunit-1.13.0.js"></parancsfájl>
    <a parancsfájl típus ="text/javascript" src ="blanket.min.js"></parancsfájl>

    <parancsfájl>
        modul("getIDFromLookup");
        teszt("QuizUtil getIDFromLookupField", függvény () {
            var goodValue = "1;#Paul Galvin";

            egyenlő(getIDFromLookupField(goodValue) + 1, 2), "Azonosítója [" + goodValue + "] + 1 kell 2";
            egyenlő(getIDFromLookupField(nem definiált), nem definiált, "Definiálatlan bemeneti argumentum vissza undefined eredménye.");
            egyenlő(getIDFromLookupField(""), nem definiált, "Üres bemeneti argumentum kell nem definiált értéket adnak vissza.");
            egyenlő(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), nem definiált,"Kell mindig vissza egy eredmény kabrió egy egész");
            egyenlő(getIDFromLookupField("2;#más személy"), "2", "Ellenőrzése [2;#más személy].");
            egyenlő(getIDFromLookupField("9834524;#hosszú érték"), "9834524", "Nagy érték teszt.");
            notEqual(getIDFromLookupField("5;#bárki, aki", 6), 6, "-A notEqual vizsgálat (5 nincs egyenlő 6 Ez a minta: [5;#bárki, aki]");

        });

        modul("htmlEscape");
        teszt("QuizUtil htmlEscape()", függvény () {
            egyenlő(htmlEscape("<"), "&lt;", "Menekülés a kevesebb, mint üzemeltető ('<')");
            egyenlő(htmlEscape("<div class =  "someclass">Néhány szöveg</Div>"), "&lt;div class =&quot;someclass&quot;&gt;Néhány szöveg&lt;/Div&gt;", "Bonyolultabb teszt karakterláncot.");
        });

        modul("getDateAsCaml");
        teszt("QuizUtil getDateAsCaml()", függvény () {
            egyenlő(getDateAsCaml(új Dátum("12/31/2013")), "2013-12-31T:00:00:00", "Vizsgálati fixen kódolt dátuma: [12/31/2013]");
            egyenlő(getDateAsCaml(új Dátum("01/05/2014")), "2014-01-05T:00:00:00", "Vizsgálati fixen kódolt dátuma: [01/05/2014]");
            egyenlő(getDateAsCaml(új Dátum("01/31/2014")), "2014-01-31T:00:00:00", "Vizsgálati fixen kódolt dátuma: [01/31/2014]");
            egyenlő(getTodayAsCaml(), getDateAsCaml(új Dátum()), "getTodayAsCaml() kell egyenlő getDateAsCaml(új dátum())");
            egyenlő(getDateAsCaml("képtelenség-érték"), nem definiált, "Próbálj nonszensz érték dátuma.");
            egyenlő(getDateAsCaml(nem definiált), nem definiált, "Próbálj meg időpontjában a [nem definiált] dátum.");
        });

        modul("getParameterByName");
        teszt("QuizUtil getParameterByName (a lekérdezési karakterláncban)", függvény () {
            egyenlő(getParameterByName(nem definiált), nem definiált, "Próbálj meg nem definiált paramétert kell vissza undefined.");
            egyenlő(getParameterByName("nem létezik"), nem definiált, "Megpróbál-hoz kap a paraméter értékét, ha tudjuk, hogy a paraméter nem létezik.");

        });

        modul("Cookie-k");
        teszt("QuizUtil különböző cookie-funkciók.", függvény () {
            egyenlő(setCookie("teszt", "1", -1), getCookieValue("teszt"), "Kap egy cookie-t be kell dolgozni.");
            egyenlő(setCookie("anycookie", "1", -1), igaz, "Beállítás érvényes főzés vissza"igaz".");
            egyenlő(setCookie("őrült cookie-név !@#$%"%\^&*(()?/><.,", "1", -1), igaz, "Egy rossz cookie-név beállítást vissza kell"false".");
            egyenlő(setCookie(nem definiált, "1", -1), nem definiált, "Tompított meghatározatlan, mint a cookie-név.");
            egyenlő(getCookieValue("nem létezik"), "", "Cookie nem létezik vizsgálati.");
        });

    </parancsfájl>
</fej>
<szerv>
    <Div azonosító= "qunit"></Div>
    <Div azonosító= "qunit-kellék"></Div>

</szerv>
</HTML>

Van néhány dolog történik itt:

  1. Hivatkozva az én-m kód (QuizUtil.js)
  2. Hivatkozó Qunity.js
  3. Némely elemek meghatározása (getIDFromLookup, A cookie-k, és mások)
  4. Elhelyezése a <Div> akinek azonosítás "qunit".

Majd, Csak húzza, fel ezt az oldalt és Ön kap valamit, mint ez:

image

Ábra 3

Ha megnézed, a tetején, van néhány lehetőség, melyek közül kettő is érdekes:

  • Hide teszt: Elég nyilvánvaló.  Segíthet a szem csak látni a problémás területek, és nem sok rendetlenséget teremt.
  • Modul: (legördülő): Ez kiszűri a vizsgálatok csak azok a csoportok, teszttípusokat le.

Mivel a vizsgálatokat maguk – néhány megjegyzést:

  • Magától értetődik, hogy meg kell írni a kódot, hogy tesztelhető az első helyen.  Az eszközzel segíteni érvényesíteni a fegyelem. Például, Volt egy úgynevezett "getTodayAsCaml funkció()”.  Ez nem nagyon tesztelhető, mivel nincs bemeneti argumentum tart és kipróbálni, hogy az egyenlőség, azt kell, hogy folyamatosan frissíti a teszt-kódot, hogy az tükrözze az aktuális dátumot.  Én refactored, összeadás egy adat bemeneti paramétert, majd az aktuális dátumot, ha akarom, hogy mai CAML formátumban elhaladtak.
  • Qunit keretében dokumentumokat a saját vizsgálatok, és úgy tűnik, elég erős.  Tehetünk, egyszerű dolgok, mint a tesztelés az egyenlőséget, és is birtokol támogat részére ajax style hívások (mind a "valódi", vagy a csúfolt segítségével a kedvenc mocker).
  • Megy keresztül a folyamat is arra kényszerít, hogy gondolja végig, hogy edge esetek-mi történik a "meghatározatlan", vagy null átment egy függvény.  Ez teszi halott egyszerű teszt forgatókönyvekben ki.  Jó dolog.

Blanket.js lefedettség

Blanket.js kiegészíti Qunit nyomon követése a tényleges sornyi kódot, ami fut a vizsgálat során.  Azt integrálja jobb Qunit még akkor is ha-a ' egy egész külön app, játszik szépen-ez igazán néz ki, mint egy varrás nélküli alkalmazás.

Ez a blanket.js akcióban:

image Ábra 4

image

Ábra 5

(Valójában van, hogy kattintson a "Engedélyezi a lefedettség" jelölőnégyzetre, a tetején [ábra 3] hogy ezt a lehetőséget.)

A kijelölt vonalak ábrán 5 nem hajtottak akármi-ból az én-m teszt, így kell, hogy dolgozzon ki egy teszt, hogy okoz számukra, hogy végre, ha azt akarom, hogy teljes lefedettség.

Blanket.js dolgozik, az alábbi lépéseket kap:

  1. Letölt ez-ból http://blanketjs.org/.
  2. Hozzáadása a projekthez
  3. Frissítse tesztoldalát hám (Az én esetemben QuizUtil_test.html) az alábbiak szerint:
    1. Hivatkozás a kód
    2. Díszíteni a <parancsfájl> referencia, mint ez:
    <parancsfájl típus= text/javascript"" src="QuizUtil.js" adatok-fedél></parancsfájl>

Blanket.js felveszi a "adatok-cover" attribútum, és nem a mágikus.  Ez akaszt-ba Qunit, frissíti a felhasználói felület, hogy "A lefedettség engedélyezése" lehetőséget, és voál!

Összefoglaló (TL; DR)

Használ Qunit-hoz ír a teszt esetek.

  • Letölt ez
  • Hozzáadása a projekthez
  • Írjon egy teszt felszerszámoz oldalon
  • Hozzon létre a vizsgálatok
    • Refactor, néhány, a kódot, hogy tesztelhető
    • Kreatív!  Gondolom, az őrült, lehetséges forgatókönyvek és a vizsgálati őket egyébként.

Lefedettség biztosítása blanket.js segítségével

  • Győződjön meg róla, Qunit dolgozó
  • Töltse le a blanket.js, és hozzáadása a projekthez
  • Add hozzá a tesztoldal hám:
    • Blanket.js hozzáadása
    • Adjunk hozzá egy "adat-cover" attribútumot a <parancsfájl> címke
  • Fuss a Qunit-teszt.

Soha nem tett akármi-ból ez előtt, és volt néhány kezdetleges dolog, egy maroknyi órát dolgozik. 

Boldog tesztelés!

</vége>

undefinedSubscribe to my blog.

Kövesse nekem Twitter http://www.twitter.com/pagalvin