Monataj Arkivoj: Januaro 2014

#Malri?a Viro?? Caching en JavaScript

[TL;D-ra versio: Uzaj kuketoj enteni la rezultojn de async vokoj; Fari la rezultojn de pasinta async vokoj tuj kaj tiam konfirmas ilin post #pa?o-#?ar?o.]

I??E estita laboranta sur SharePoint intrareta ejo por kliento ke #?efa?o, Inter aliaj aferoj, stylized duaranga navigado kies menuaj elektoj estas administrita tra regula malnova #la?menda listo.  La ideo estas ke la kliento akiras kontroli ??Heredanto?? Ejo?? Menuo sen influanta #a? estanta influita de la tutmonda navigado elmetis de ?I.

(Estas io nekredeble renversemulo pri aldonanta CEWP kiu indikas al HTMLa dosiero kiu #?ar?i #kelka CSS kaj JS fundamente #?an?i #preska? #?io pri ejo?? Konduto?? Sed tio?? Por alia #po?to)

La kodo por #?i tiu #sufi?e simpla:

La dolora punkto #?i tie estas ke #?iu tempo iu ajn frapas unu el la ejo?? #Pa?o, KE uzanto?? #Aranea?o retumilo estas elatinganta akiri erojn de la listo.  Unufoje dev estas kompleta kaj elprovado pruvis aferojn esti stabila kaj kompleta, #?I tiu voko estas nenecesa pli ol 99% De la tempo ekde la menuo malofte #?an?o.  ?i #anka? havas strangan UIan efikon kiu estas ofta en #?i tiu #kura?a nova mondo de hyper-ajaxy retejoj ?? La #pa?o faras kaj nur tiam faras la menuon faras.  ?i?? Maltrankvila kaj distranta en mia vido.  Kaj maltrankvila. Tiel, Caching. 

Mi modifis la logikon thusly:

  • #Ser?i kuketon en la retumilo kiu enhavas la menuon kiel mi #da?ri legita ?in
    • Se trovita, Fari ?in tuj.  Don?? Atendo por la #pa?o fini #?ar?ado.  (Vi devas fari certe vian HTML estas strategie lokita #?i tie, Sed ?i?? Ne malfacile fari).
  • Atendo por la #pa?o fini #?ar?ado kaj fari async voko #?ar?i supre menuajn erojn de listo uzanta RIPOZON #a? listoj.asmx #a? kio ajn
  • Kompari kion mi akiris #kontra? la kuketo
    • Se ?i egalas, HALTIGO
    • Alie, Uzanta jQuery, Dynamically #lo?i aron se <Li>?? En <Ul>
  • Uza CSS fari #?iu la aspektigado
  • Profito!

Kelkaj de vi estas iranta diri, ??Ey! Tie?? Neniu vera caching #da?rigi #?i tie ekde vi??E leganta la menuon #?iuokaze #?Iu ununura tempo.”  Kaj vi??E rajto ?? I?? Ne donanta la servilo ajna speco de #rompi?o.  Sed #?ar la voko estas async kaj okazas post la #pa?o?? Komenca HTML payload plene faras, ?i ??Angiloj?? Pli da respondema al la uzanto.  La menuo faras #sufi?e tre kiel la #pa?o tiroj.  Se la menuo okazas al la #?an?o, La uzanto estas submetita al maltrankvila re-tiro de la menuo, Sed nur ke unu fojo.

Estas kelkaj vojoj fari #?i tiu caching pli efika kaj helpo ekstere la servilo samtempe:

  • Metita en regulo ke la ??Ookie konservejo?? Estas valida por minimumo de 24 Horoj #a? kelkaj alia timeframe. Kiel longe kiel estas ne #eksvalidi?i kuketon, Uzi la kuketon?? Menua momentfoto kaj neniam frapita la servilon.

Puto ?? Tio?? #?Iu kiu venas atenti #?uste nun :). 

Se iu ajn havas ajnajn lertajn ideojn #?i tie I?? Amo scii ilin.

Kaj fine ?? #?I tiu tekniko povas esti uzita por alia #a?o.  #?I tiu kliento?? #Pa?o havas nombron de datumo-veturita aferojn sur diversaj #pa?o, Multaj de ili #?an?i relative malofte (#?Ati unufoje semajnon #a? unufoje monato).  Se vi celas specifajn areojn de funkcio, Vi povas doni pli respondema UI de tiranta enhavon de la loka kuketa vendejo kaj faranta tuj.  ?i sentas pli rapidan al la uzanto #e? se vi??E ne savanta la servilon ajnaj cikloj.  Vi Ujo Savi la servilajn ciklojn de decidanta sur kelkaj #kondi?o kaj ellasiloj nuligi #?i tiu lokan kuketan konservejon.  Tio?? #?Iuj situational kaj artsy #a?o kaj vere la plej amuza :). 

</Fino>

undefinedAboni al mia blogo.

Sekvi min sur Pepi ĉe http://www.twitter.com/pagalvin

Kiel al: Formi Unuan Teston kaj Testan Priraportadon kun QUnit.js kaj Kovro.Js Por Oficejo 365 SharePoint App

Intro

Mi estis esploranta unuan elprovadon kaj testan priraportadon por JavaScript kiel mi laboras sur nova SharePoint app por SharePoint enreta en la Oficejo 365 Aro.  La evidentaj esploraj vojoj gvidis min al Qunit.Js Kaj ĝusta post kiam tio, Al Kovro.Js.

QUnit lasis min instalita unuajn testojn kaj grupigi ilin en kapsuloj.  Kapsulo estas nur simpla vojo organizi rilatita testojn. (Mi ne estas certe mi estas uzanta ĝin kiel celita, Sed ĝi estas laboranta por mi tiel ege kun la malgranda aro de testoj mi tiel ege difinis).

Kovro.Js integrigas kun Qunit kaj ĝi montros min la realaj linioj de JavaScript kiu estis – kaj pli grave – ne estis efektive efektivigita en la kurso kuri la testojn.  Tio ĉi estas “priraportadaj” – linioj kiu efektivigis estas kovrita de la testo dum aliaj ne estas.

Inter instalanta bonajn testajn kazojn kaj vidanta priraportadon, Ni povas redukti la riskon ke nia kodo kaŝis mankojn.  Bonaj tempoj.

Qunit

Supozanta vin havas vian Vidan Studian projekton instalita, Komenco de elŝutanta la JavaScript pako de http://qunitjs.com.  Aldoni la JavaScript kaj responda CSS al via solvo.  Mia similas tion ĉi:

image

Cifero 1

Kiel vi povas vidi, Mi estis uzanta 1.13.0 Ĉe la tempo mi skribis ĉi tiun blogan poŝton. Ne forgesas elŝuti kaj aldoni la CSSan dosieron.

KE ekstere de la vojo, Sekvanta paŝo estas krei iun specon de testo jungas kaj referenci la Qunit pecoj.  Mi estas elprovanta aron de funkcioj en skriba dosiero vokis “QuizUtil.Js” do mi kreis HTMLan paĝon vokis “QuizUtil_testo.Html” kiel montrita:

image Cifero 2

Ĉi tie-a la kodo:

<!DOCTYPE Html>
<Html Xmlns="Http://Www.w3.org/1999/xhtml">
<Kapo>
    <Titolo>QuizUtil testo kun Qunit</Titolo>
    <Ligo Rel="Stylesheet" Href="../CSS/qunit-1.13.0.Css" />
    <Skribo Tipo="Teksto/javascript" Src="QuizUtil.Js" Datumo-kovrilo></Skribo>
    <Skriba tipo="Teksto/javascript" Src="Qunit-1.13.0.Js"></Skribo>
    <Skriba tipo="Teksto/javascript" Src="Kovro.Min.Js"></Skribo>

    <Skribo>
        Kapsulo("GetIDFromLookup");
        Testo("QuizUtil getIDFromLookupField", Funkcio () {
            Var GoodValue = "1;#Paul Galvin";

            Egala(GetIDFromLookupField(GoodValue) + 1, 2), "IDENTIGAĴO de [" + GoodValue + "] + 1 Devus esti 2";
            Egala(GetIDFromLookupField(Undefined), Undefined, "Undefined eniga argumento devus reveni undefined rezulto.");
            Egala(GetIDFromLookupField(""), Undefined, "Senhoma eniga argumento devus reveni  undefined valoro.");
            Egala(GetIDFromLookupField("Gobbledigood3-thq;Dkvn ada;Skfja sdjfbvubvqrubqer0873407t534piutheqw;Vn"), Undefined,"Ĉiam devus reveni rezultan kabrioleton al Integralo");
            Egala(GetIDFromLookupField("2;#Kelkaj alia persono"), "2", "Kontrolanta [2;#Kelkaj alia persono].");
            Egala(GetIDFromLookupField("9834524;#Longa valoro"), "9834524", "Granda valora testo.");
            NotEqual(GetIDFromLookupField("5;#Iu ajn", 6), 6, "Elprovanta  notEqual (5 Ne estas egala al 6 Por ĉi tiu ekzemplo: [5;#Iu ajn]");

        });

        Kapsulo("HtmlEscape");
        Testo("QuizUtil htmlEscape()", Funkcio () {
            Egala(HtmlEscape("<"), "&Lt;", "Evitanta  malpli ol operacianto ('<')");
            Egala(HtmlEscape("<Div klaso="someclass">Iu teksto</Div>"), "&Lt;Div klaso=&Quot;Someclass&Quot;&Gt;Iu teksto&Lt;/Div&Gt;", "Pli kompleksa testa ŝnuro.");
        });

        Kapsulo("GetDateAsCaml");
        Testo("QuizUtil getDateAsCaml()", Funkcio () {
            Egala(GetDateAsCaml(Nova Dato("12/31/2013")), "2013-12-31T:00:00:00", "Elprovanta malfacile kodita daton: [12/31/2013]");
            Egala(GetDateAsCaml(Nova Dato("01/05/2014")), "2014-01-05T:00:00:00", "Elprovanta malfacile kodita daton: [01/05/2014]");
            Egala(GetDateAsCaml(Nova Dato("01/31/2014")), "2014-01-31T:00:00:00", "Elprovanta malfacile kodita daton: [01/31/2014]");
            Egala(GetTodayAsCaml(), GetDateAsCaml(Nova Dato()), "GetTodayAsCaml() Devus egalan getDateAsCaml(Nova Dato())");
            Egala(GetDateAsCaml("Absurda valoro"), Undefined, "Provi akiri la daton de absurda valoro.");
            Egala(GetDateAsCaml(Undefined), Undefined, "Provi akiri la daton de la [Undefined] Dato.");
        });

        Kapsulo("GetParameterByName");
        Testo("QuizUtil getParameterByName (De la demanda ŝnuro)", Funkcio () {
            Egala(GetParameterByName(Undefined), Undefined, "Provi akiri undefined parametro devus reveni undefined.");
            Egala(GetParameterByName("Ne ekzistas"), Undefined, "Provi akiri parametran valoron kiam ni scias la parametron ne ekzistas.");

        });

        Kapsulo("Kuketoj");
        Testo("QuizUtil diversaj kuketaj funkcioj.", Funkcio () {
            Egala(SetCookie("Testo", "1", -1), GetCookieValue("Testo"), "Akiri kuketon mi fiksas devus labori.");
            Egala(SetCookie("Anycookie", "1", -1), Vera, "Fiksanta validan kuiradon devus reveni 'veran'.");
            Egala(SetCookie("Freneza kuketa nomo !@#$%"%\^&*(()?/><.,", "1", -1), Vera, "Fiksanta malbonan kuketan nomon devus reveni 'falsan'.");
            Egala(SetCookie(Undefined, "1", -1), Undefined, "Pasanta undefined kiel la kuketa nomo.");
            Egala(GetCookieValue("Ne ekzistas"), "", "Kuketo ne ekzistas teston.");
        });

    </Skribo>
</Kapo>
<Korpo>
    <Div Identigaĵo="Qunit"></Div>
    <Div Identigaĵo="Qunit-fiksaĵo"></Div>

</Korpo>
</Html>

Estas pluraj aferoj okazanta ĉi tie:

  1. Referencanta mian kodon (QuizUtil.Js)
  2. Referencanta Qunity.Js
  3. Difinanta kelkajn kapsulojn (GetIDFromLookup, Kuketoj, Kaj aliaj)
  4. Lokanta <Div> Kies IDENTIGAĴO estas “qunit”.

Tiam, Mi nur tiras supre ĉi tiu paĝo kaj vi akiras ion tiel:

image

Cifero 3

Se vi rigardas trans la supro, Vi havas kelkajn elektojn, Du el kiu estas interesanta:

  • Kaŝi pasita testojn: Sufiĉe evidenta.  Povas helpi vian okulon nur vidi la problemajn areojn kaj ne multa malordo.
  • Kapsulo: (Fali malsupren): Tio ĉi filtros la testojn malsupren al nur tiuj grupoj de testoj vi deziras.

Koncerne la testoj si mem – kelkaj rimarkoj:

  • Ĝi iras sen diranta ke vi devas skribi vian kodon tia ke ĝi estas testable en la unua loko.  Uzanta la ilon povas helpi observigi tiun disciplinon. Ekzemple, Mi havis funkcion vokis “getTodayAsCaml()”.  Tio ĉi ne estas tre testable pro tio ke ĝi prenas neniun enigan argumenton kaj elprovi ĝin por egaleco, Ni devus konstante ĝisdatigi la testan kodon reflekti la nunan daton.  Mi refactored ĝi de aldonanta datuman enigan parametron tiam pasanta la nunan daton kiam mi deziras hodiaŭan daton en CAMLa formato.
  • La Qunit kadro dokumentas ĝiajn proprajn testojn kaj ĝi ŝajnas sufiĉe fortika.  Ĝi povas fari simplajn aferojn kiel elprovanta por egaleco kaj ankaŭ havas subtenon por ajax stilaj vokoj (Ambaŭ “vera” aŭ mokis uzanta vian preferatan pli imita).
  • Iranta tra la procezo ankaŭ devigas vin pensi tra randaj kazoj – kio okazas kun “undefined” aŭ null estas pasita en funkcio.  Ĝi faras ĝin senvive simpla elprovi ĉi tiujn scenarojn ekstere.  Bona aĵo.

Priraportado kun Kovro.Js

Kovro.Js kompletigas Qunit de spuranta la realajn liniojn de kodo kiu efektivigas dum la kurso kuri viajn testojn.  Ĝi integrigas ĝuste en Qunit do eĉ kvankam ĝi estas tuta aparta app, Ĝi ludas agrable – ĝin vere similas ĝin estas unu seamless app.

Tio ĉi estas kovro.Js en ago:

image Cifero 4

image

Cifero 5

(Vi efektive devas klaki sur la “Ebligi priraportadon” checkbox ĉe la supro [Vidi Ciferon 3] Ebligi tion ĉi.)

La reliefigita liniojn en Cifero 5 Ne estis efektivigita de iu ajn de miaj testoj, Do mi devas elpensi teston kiu faras kaŭzi ilin efektivigi se mi deziras plenan priraportadon.

Akiri kovron.Js laboranta de sekvanta ĉi tiujn paŝojn:

  1. Elŝuti ĝin de http://blanketjs.org/.
  2. Aldoni ĝin al via projekto
  3. Ĝisdatigi vian teston jungas paĝon (QuizUtil_testo.Html en mia kazo) Kiel sekvas:
    1. Referenci la kodon
    2. Ornami via <Skribo> Referenci tiel:
    <Skribo Tipo="Teksto/javascript" Src="QuizUtil.Js" Datumo-kovrilo></Skribo>

Kovro.Js kaptas la “datumon-kovrila” eco kaj faras ĝian magion.  Ĝi hokas en Qunit, Ĝisdatigas la UI aldoni la “Ebligi priraportadan” elekton kaj voila!

Resuma (TL; D-ro)

Uzi Qunit skribi viajn testajn kazojn.

  • Elŝuti ĝin
  • Aldoni ĝin al via projekto
  • Skribi teston jungas paĝon
  • Krei viajn testojn
    • Refactor kelkaj de via kodo esti testable
    • Esti kreiva!  Pensi de freneza, Neeblaj scenaroj kaj elprovi ilin ĉiuokaze.

Uza kovro.Js certigi priraportadon

  • Fari certan Qunit estas laboranta
  • Deŝuta kovro.Js kaj aldoni ĝin al via projekto
  • Aldoni ĝin al via testo jungas paĝon:
    • Aldoni referencon al kovro.Js
    • Aldoni “datumon-kovrila” eco al via <Skribo> Etikedo
  • Kuri via Qunit testoj.

Mi neniam faris iun ajn de tio ĉi antaŭ ol kaj havis iun rudimentan aĵon laboranta en iometo de horoj. 

Feliĉa elprovado!

</Fino>

undefinedAboni al mia blogo.

Sekvi min sur Pepi ĉe http://www.twitter.com/pagalvin