Kuu arhiivid: Jaanuar 2014

Vaene mees on Caching JavaScript

[TL;DR versioon: kasutame küpsiseid, et salvestada tulemused async kõned; muuta tulemused viimase async kõned kohe ja seejärel Kinnita neid pärast lehe laadimist.]

Olen töötanud SharePointi intranet saidil kliendile, et funktsioonid, muu hulgas, stiliseeritud teisese navigation kelle menüüsuvandite hallatakse kaudu regulaarselt vana kohandatud loendi.  Mõte on selles, et klient saab kontrollida "oma" saidi menüü mõjutamata või mõjutavad globaalset navigatsioonisatelliitide poolt välja pandud.

(seal on midagi uskumatult õõnestava lisamine CEWP, mis viitab HTML-fail, mis laadib mõned CSS ja JS oluliselt muuta peaaegu kõike saidi käitumine... kuid see on teisele ametikohale)

See päris lihtne kood:

Valus kohapeal siin on see, et iga kord, kui keegi lööb selle saidi leheküljed, See kasutaja veebilehitseja on jõudmas saada üksuste loendist.  Kui dev on lõpetatud ja testimine on osutunud asjad olema stabiilne ja täielik, selle kutse ei ole vajalik enam kui 99% ajast alates menüü harva muutub.  On ka imelik UI mõjutada, mis on levinud see vapper uus maailm hüper-ajaxy veebisaitide-lehe renderdamist ja alles seejärel menüü Muuda.  On närviline ja häiriv, minu arvates.  Ja närviline. Nii, vahemällu. 

Ma muutmine loogika thusly:

  • Otsige küpsise brauseri, mis sisaldab menüüd kui viimati lugesin
    • Kui leiti, Muuda kohe.  Ärge oodake lõpuni laadimise lehele.  (Sa pead veenduge, et teie HTML strateegiliselt paigutatud siin, kuid see ei ole raske teha).
  • Oodake, kuni lehe lõpuni peale ja tee async helistada korralikuks menüü üksuste loendi, kasutades ülejäänud või lists.asmx või mis iganes
  • Võrdle, mida sain vastu küpsis
    • Kui see sobib, Stopp
    • Muidu, kasutades jQuery, dünaamiliselt asustada hunnik kui <Li>'s in a <UL>
  • Kasutage kogu vormingu CSS
  • Kasum!

Mõned teist lähevad öelda, "kuule! ei mingit tõelist vahemällu siin toimub kuna sa loed menüü niikuinii iga kord.”  Ja sul on õigus-ma olen andes server murda tahes.  Kuid kuna kõne on asünkroonne ja juhtub pärast esialgse ettepaneku lehe HTML lasti täielikult muudab, "tundub" kiiremini reageerima kasutaja.  Menüü muudab päris palju kui lehe viiki.  Kui menüü muutus, Kasutaja läbib närviline uuesti teha menüü, kuid ainult üks kord.

Seal on mõned viisid, et muuta see vahemälu tõhusamaks ning aidata server samal ajal:

  • Pane vähemalt kehtiva "küpsiste vahemälu" reeglit 24 tunni või mõni muu ajakava. Kui ei ole aegunud küpsis, Kasutage seda küpsist menüüd pildistamise ja kunagi tabanud server.

Noh... see on kõik, mis kohe pähe tulevad :). 

Kui kellelgi on kõik targad ideed siin oleks tore teada nende.

Ja lõpuks – seda tehnikat kasutada muid asju.  Selle kliendi leheküljel on mitmeid asju andmepõhiseid erinevatel lehekülgedel, Paljud neist muutuvad suhteliselt harva (näiteks kord nädalas või kord kuus).  Kui sihite teatud valdkondades funktsioone, annad paindlikumaks UI tõmmates sisu kohalikku küpsis salvestada ja muuta kohe.  Ta tunneb kiiremini kasutajale, isegi kui sa oled kokkuhoid, server kõik tsüklit.  Te Saate salvestada serveri tsüklit otsustades mõned tingimused ja vallandab tunnistab kehtetuks kohalik küpsiste vahemälu.  Ongi kõik olukorrast ja esteetilist asjad ja tõesti kõige toredam :). 

</lõpp>

undefinedTelli minu blogi.

Järgi mind vidistama kell http://www.twitter.com/pagalvin

Kuidas: Konfigureerida üksuse testi ja Test laovarude QUnit.js ja Blanket.js büroo 365 SharePoint App

Intro

Uurinud üksus katsetamine ja testi katvus JavaScript nagu ma tööd uue SharePoint app for Office SharePoint online 365 sviit.  Ilmne teadusuuringute teed sundis mind Qunit.js ja pärast seda, et Blanket.js.

QUnit Tahaksin luua unit teste ja rühmitage need moodulid.  Moodul on lihtsalt lihtne viis korraldada vastavad katsetused. (Ma ei tea, ma olen seda kasutada eesmärgipäraselt, Aga see ei tööta minu jaoks siiani väike kogum on seni määratletud).

Blanket.js sulandub Qunit ja see näitab mulle tegelik read JavaScript, mis olid – ja mis veelgi olulisem – tegelikult ei hukati käigus katsetuste korraldamine.  See on "hõlmatus"-read, mida reguleeritakse katse samas ei.

Seadistamine hea katse juhtudel ja tulemeid katvus, saame vähendada riski, et meie kood on peidetud vead.  Headel aegadel.

Qunit

Eeldades, et olete oma Visual Studio projekti seadistamine, alustada allalaadimisega JavaScript pakett: http://qunitjs.com.  JavaScript ja vastava CSS lisamiseks lahendusse.  Mine näeb välja selline:

image

Joonis 1

Nagu näete, Olin kasutades 1.13.0 hetkel ma kirjutasin seda blogi postitus. Ära unusta alla laadida ja lisada CSS faili.

Et teelt, Järgmine samm on luua mingi test rakmete ja Qunit bitti.  Testin kimp funktsioone skripti fail nimega "QuizUtil.js" nii et ma loodud HTML lehe nimega "QuizUtil_test.html" nagu näidatud:

image Joonis 2

Siin on kood:

<!DOCTYPE HTML>
<HTML xmlns= "http://www.w3.org/ 1999/xhtml">
<juht>
    <pealkiri>QuizUtil test Qunit</pealkiri>
    <link rel= "stiil" href="../CSS/qunit-1.13.0.CSS" />
    <skripti tüüp= tekst/javascript"" src="QuizUtil.js" andmete kaitse></skripti>
    <script tüüp ="teksti/javascript" src ="qunit-1.13.0.js"></skripti>
    <script tüüp ="teksti/javascript" src ="blanket.min.js"></skripti>

    <skripti>
        moodul("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", funktsioon () {
            var goodValue = "1;#Paul Galvin";

            võrdse(getIDFromLookupField(goodValue) + 1, 2), "ID. [" + goodValue + "] + 1 peaks olema 2";
            võrdse(getIDFromLookupField(pole määratletud), pole määratletud, "Määratlemata sisendargumendi peaks tagasi määratlemata tulemus.");
            võrdse(getIDFromLookupField(""), pole määratletud, "Tühi sisendargumendi peaks tagasi undefined väärtus.");
            võrdse(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), pole määratletud,"Tuleks alati naasta tulemus Kabriolett täisarv");
            võrdse(getIDFromLookupField("2;#mõne teise isiku"), "2", "Kontrollimine [2;#mõne teise isiku].");
            võrdse(getIDFromLookupField("9834524;#pika väärtuse"), "9834524", "Suure väärtuse test.");
            notEqual(getIDFromLookupField("5;#keegi", 6), 6, "Katsetamine on notEqual (5 ei võrdu 6 see proov: [5;#keegi]");

        });

        moodul("htmlEscape");
        test("QuizUtil htmlEscape()", funktsioon () {
            võrdse(htmlEscape("<"), "&lt;", "Põgenevad vähem kui operaator ('<')");
            võrdse(htmlEscape("<div klassi =  "someclass">Mingi tekst</DIV>"), "&lt;div klassi =&quot;someclass&quot;&gt;Mingi tekst&lt;/DIV&gt;", "Keerukam test string.");
        });

        moodul("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", funktsioon () {
            võrdse(getDateAsCaml(Uus Kuupäev("12/31/2013")), "2013-12-31T:00:00:00", "Testimise kõva kodeeritud kuupäev: [12/31/2013]");
            võrdse(getDateAsCaml(Uus Kuupäev("01/05/2014")), "2014-01-05T:00:00:00", "Testimise kõva kodeeritud kuupäev: [01/05/2014]");
            võrdse(getDateAsCaml(Uus Kuupäev("01/31/2014")), "2014-01-31T:00:00:00", "Testimise kõva kodeeritud kuupäev: [01/31/2014]");
            võrdse(getTodayAsCaml(), getDateAsCaml(Uus Kuupäev()), "getTodayAsCaml() peab võrduma getDateAsCaml(uus kuupäev())");
            võrdse(getDateAsCaml("mõttetu väärtus"), pole määratletud, "Püüa saada jama väärtus kuupäev.");
            võrdse(getDateAsCaml(pole määratletud), pole määratletud, "Üritavad kuupäev ning [pole määratletud] kuupäev.");
        });

        moodul("getParameterByName");
        test("QuizUtil getParameterByName (päringu stringi)", funktsioon () {
            võrdse(getParameterByName(pole määratletud), pole määratletud, "Üritavad määratlemata parameeter peaks tagasi määratlemata.");
            võrdse(getParameterByName("pole olemas"), pole määratletud, "Proovige saada parameetri väärtus, kui teame, et parameeter ei ole olemas.");

        });

        moodul("Küpsised");
        test("QuizUtil erinevaid küpsise funktsioone.", funktsioon () {
            võrdse(setCookie("katse", "1", -1), getCookieValue("katse"), "Get seadsin küpsise peaks toimima.");
            võrdse(setCookie("anycookie", "1", -1), True, "Milles kehtiv cooking peaks tagasi"true".");
            võrdse(setCookie("hull küpsise nimi !@#$%"%\^&*(()?/><.,", "1", -1), True, "Milles halb küpsise nimi peaks tagasi 'vale'.");
            võrdse(setCookie(pole määratletud, "1", -1), pole määratletud, "Läbides määratlemata küpsise nimi.");
            võrdse(getCookieValue("pole olemas"), "", "Cookie olemas test.");
        });

    </skripti>
</juht>
<keha>
    <DIV ID= "qunit"></DIV>
    <DIV ID= "qunit-armatuur"></DIV>

</keha>
</HTML>

On mitmeid asju toimub siin:

  1. Viitamine minu kood (QuizUtil.js)
  2. Viitamine Qunity.js
  3. Määratleda mõned moodulid (getIDFromLookup, Küpsised, jt)
  4. Pannes on <DIV> kelle ID on "qunit".

Seejärel, Ma lihtsalt tõmba seda lehekülge ja sa saad midagi sellist:

image

Joonis 3

Kui sa vaatad üle ülaosa, Sul on mõned võimalused, millest kaks on huvitav:

  • Peida läbinud testid: Üsna ilmne.  Aitab silma just näha probleemsed valdkonnad ja mitte palju peegeldushäirete.
  • Moodul: (rippmenüü): See filtreerib alla just need katsesarju soovitud testid.

Nagu katsed, ise – mõned kommentaarid:

  • Loomulikult tuleb kirjutada koodi nii, et see on testitavad esimese koha.  Kasutades tööriista aitavad rakendada distsipliini. Näiteks, Mul oli funktsioon nimega "getTodayAsCaml()”.  See ei ole väga testitavad, kuna see pole sisendargumendi ja võrdsuse testimiseks, Meil oleks vaja pidevalt uuendada testimisreeglistiku peegeldab praegust kuupäeva.  Ma refactored lisades andmed sisendparameeter siis kulgeb praegune kuupäev Millal ma tahan tänast kuupäeva CAML-vormingus.
  • Qunit raamistiku dokumendid oma katseid ja tundub päris tugev.  Seda saate teha lihtsaid asju nagu võrdõiguslikkuse katsetamine ja ka toetust ajax stiilis kõnede ("päris" või pilkasid kasutades oma lemmik mocker).
  • Läbimas protsessi ka sunnib sind mõelda läbi serv juhtudel – mis juhtub "määratlemata" või null läks funktsioon.  See muudab surnud lihtne testida neid stsenaariume läbi.  Hea kraam.

Laovarude Blanket.js

Blanket.js täiendab Qunit jälgida tegelikud rida koodi, mis töötab oma katsete käigus täita.  See integreerib paremale Qunit nii et kuigi see on täiesti eraldi app, ta mängib kenasti-see tõesti näeb välja nagu oleks üks õmblusteta app.

See on blanket.js tegevuses:

image Joonis 4

image

Joonis 5

(Tegelikult on klõpsa ülaosas ruut "Luba ulatus" [vt joonis 3] võimaldab seda.)

Esiletõstetud ridade arv 5 ei ole täidetud ükski minu testide, nii et mul on vaja töötada välja testi, mis põhjustavad neil täita täies ulatuses soovi.

Saad blanket.js tööd tehes järgmist:

  1. Alla laadida http://blanketjs.org/.
  2. Mille soovite projektile lisada
  3. Uuenda rakmed testleht (QuizUtil_test.html minu puhul) järgmiselt.:
    1. Viide selle koodiga
    2. Kaunista oma <skripti> selline viide:
    <skripti tüüp= tekst/javascript"" src="QuizUtil.js" andmete kaitse></skripti>

Blanket.js kirkad "andmete alumiiniumlehte" atribuut ja ei oma magic.  Õnged sisse Qunit, uuendab UI lisada "Luba ulatus" valik ja voila!

Kokkuvõte (TL; DR)

Qunit abil saate kirjutada oma katse juhtudel.

  • Lae see
  • Mille soovite projektile lisada
  • Kirjutage rakmed testleht
  • Loo oma katsed
    • Refaktoorime mõned oma koodi testitavad
    • Loominguline!  Crazy mõelda, võimatu stsenaariume ja testida neid Igatahes.

Kasutage blanket.js tagamiseks

  • Qunit töötamise
  • Lae blanket.js ja lisada see oma projekti
  • Test rakmed lehele lisada:
    • Lisada blanket.js
    • Lisa "andmete alumiiniumlehte" omistada oma <skripti> Tag
  • Kestab Qunit katsete.

Kunagi tegin kõik see enne ja oli mõned algeline asjad töötavad üksikud tundi. 

Head katsetamist!

</lõpp>

undefinedTelli minu blogi.

Järgi mind vidistama kell http://www.twitter.com/pagalvin