Chak mwa Achiv: Janvye 2014

Pòv la nan JavaScript

[TL;Doktè vèsyon pipiti de youn: sèvi ak lekòl pou stocker rezilta yo de async apèl; rendu rezilta yo de apèl async sot pase imedyatman Et puis valider yo apwè paj-chay.]

Mwen te gen t ap travay sou sit intranet SharePoint pou kliyan an yon fonctionnalités sa, pami lòt bagay, yon stylisé akote navigasyon ki opsyon kat sont gérés via regilye lis koutim granmoun.  Lide an se kliyan a obtient pou kontwole kat sit "yo" san ki afekte ou global navigasyon ki te mete pou l' te touche.

(se yon bagay très sibvèsif sou yo pandan l ajoute yon CEWP ki points pou yon fichier HTML sa charge kèk CSS Et JS fondamentalement ye prèske tout sou konpòtman sit yon... Men se pou yon lòt pòs)

Kòd la pou pote lestonmak li bèl sa a:

Ici Sur blese a se sa chak fwa yon moun hits yonn nan paj sit la, browser web utilisateur sa rive pou jwenn atik nan lis la.  Yon fwa ke dev nèt sou tout pwen Et pou fè tès ki éprouvée sa ki gen pou rete estab Et nèt sou tout pwen, apèl sa a pa nesesè plis pase 99% nan tan depi kat la raman chanje.  Li genyen tou yon bizarre Sur UI ki komen nan mond new brave sa a de hyper-ajaxy web pozisyon – paj la renders Et se sèlman lè sa fè kat a rendu.  Li instable Et trouble nan vi mwen.  Et instable. Se konsa, la. 

Mwen modifye lojik a thusly:

  • Chèche pou yon bonbon nan browser ki genyen kat la, menm jan mwen dènye li li
    • Si te jwenn, rendu li imedyatman.  Pa tann pou paj pou m fini chaje.  (Ou bezwen pou asire w ou HTML èstratejikman mete isit la, Men li pa di pou fèt).
  • Paj pou fini chaje ak fè yon async ki te rele pou chaje moute kat atik nan yon lis ki te itilize RÈS ou lists.asmx ou tou sa se pou tann
  • Konpare sa mwen gen kont bonbon a
    • Si l' alimè, Rete
    • San sa, w ap itilize jQuery, dynamique peple Ann, si <li>la nan yon <ul>
  • Sèvi ak CSS pou yo fè tout la mise
  • Avantaj!

Anpil nan nou ap vin di, "alo! se pa vrèman en kap pase isit la depi lè ou ap lecture kat sa a? chak fwa moun ki pa marye.”  Ou gen rezon – mwen pral pa bay sèvè a nenpòt kalite saut.  Men, paske apèl se async Et rive aprè paj la an premye HTML chaj entièrement renders, "santi l" plis aux pou moun kap itilize li an.  Kat la renders très kantite paj enspirasyon.  Si kat a rive pou chanje a, moun kap itilize li an soumis pou yon instable re-trase de kat la, Men se sèlman sa yon sèl fwa.

Genyen kèk fason pou fè sa a la pi efikas kont e ede sèvè la an menm tan:

  • Mete yo nan yon regleman sa a "bonbon cache" valab pou yon minimòm 24 Lè ou gen kèk lòt délai. Osi lontan ke pa gen okenn a bonbon, sèvi ak kat snapshot bonbon a Et la sèvè a te fwape pa janm.

Pi rekòt kafe/zaboka ki se tout sa ki vin chonje m kounye a :). 

Si yon moun gen okenn lide pran pòz isit la mwen ta renmen konnen yo.

Et, enfin-teknik sa ka sèvi pou lòt bagay.  Paj kliyan sa a gen yon bann bagay pa par done sou plizyè paj, anpil nan yo chanje relativement raman (tankou yon fwa pa semèn ou yon fwa pa mwa).  Si ou cible espesifik zòn de fonctionnalités, ou kapab bay yon plis aux UI en contenu de bonbon lokal nan magazen an ak rendu imedyatman.  Ou santi l lwa pou moun kap itilize li an menm si w ap pa enregistrement sèvè a cycles tout.  ou kapab mete sou kote cycles sèvè yo pa deside sou kèk kondisyon Et déclenche pou annuler kache bonbon lokal sa a.  La tout bagay artsy Et vrèman ki amizan :). 

</fen>

undefinedVous pou m' blog.

Swiv mwen sou Twitter nan http://www.twitter.com/pagalvin

kijan: Configure inite w la tès ak tès lwa sekirite sosyal ak QUnit.js ak Blanket.js pou yon biwo 365 SharePoint App

Intro

Mwen te gen te explorer inite w la tès ak tès garanti pou JavaScript menm jan mwen travay sou yon nouvo app SharePoint pou SharePoint ale nan biwo a 365 chanm.  Chemins evidan rechèch yo te dirije m' pou Qunit.js Et dwat aprè sa, pou Blanket.js.

QUnit kite m' mete sou pye tès inite w la ak gwoup yo nan modules.  Yon modile ki se jis yon fason byen senp pou òganize tès liés. (Mwen pa si se mwen menm ki itilize li kòm destinés, Men sa travay pou m' twò lwen ak ti ansanm lan nan tès sa yo mwen te defini byen lwen konsa).

Blanket.js entegre ak Qunit e li pwal montre m' réel lignes de JavaScript ki ont- epi pi enpòtan toujou-te pa aktyèlman exécuté devwa yo kouri tès yo.  Se sa rele "garanti" – lignes exécuté sont kouvri anba tès lan pandan lòt moun yo pa.

Ant òganize ka sonde yo bon ak affichage lwa sekirite sosyal, nou kapab redwi risk pou yo ke nou kòd ki hidden défauts.  Bon.

Qunit

En ou gen ou izyèl estidyo pwojè an mete sou pye, kòmanse téléchargement pakè JavaScript a de http://qunitjs.com.  Ajoute JavaScript e CSS korespondan pou ou kapab jwenn solisyon.  Tèren pyeje recherche kon sa:

image

Figi 1

Menm jan ou kapab wè, Mwen te itilize 1.13.0 Lè mwen te ekri sa a blog pas. Pa bliye, pou rale dosye e ajoute CSS dokiman an.

Sa soti nan wout la, pwochèn pa se pou kreye yon jan de tès lekipay Et référence ti kal pen te Qunit.  M ap sonde yon pakèt moun fonksyon nan yon fichier script ki rele "QuizUtil.js", se konsa mwen te kreye yon paj HTML ki rele "QuizUtil_test.html" jan montre:

image Figi 2

Isit la se kòd la:

<!DOCTYPE html>
<html xmlns= "http://www.w3.org/ 1999/xhtml">
<tèt>
    <tit>Tès QuizUtil ak Qunit</tit>
    <lyen rel= "stylesheet" HREF="../CSS/qunit-1.13.0.css" />
    <script tip= tèks/javascript"" src="QuizUtil.js" done pwotèj></script>
    <script tip ="tèks/javascript" src ="qunit 1.13.0.js"></script>
    <script tip ="tèks/javascript" src ="blanket.min.js"></script>

    <script>
        modile("getIDFromLookup");
        tès("QuizUtil getIDFromLookupField", fonksyon () {
            var goodValue = "1;#Paul Galvin";

            egal-ego(getIDFromLookupField(goodValue) + 1, 2), "Didantite de [" + goodValue + "] + 1 yo ta dwe 2";
            egal-ego(getIDFromLookupField(non), non, "Endefini D' diskisyon ta dwe retounen endefini rezilta yo.");
            egal-ego(getIDFromLookupField(""), non, "Vid D' diskisyon ta dwe retounen yon valè endefini.");
            egal-ego(getIDFromLookupField("gobbledigood3 thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), non,"Ta dwe toujou retounen yon rezilta convertible pou yon nonm antye");
            egal-ego(getIDFromLookupField("2;#kèk lòt moun"), "2", "Tcheke [2;#kèk lòt moun].");
            egal-ego(getIDFromLookupField("9834524;#valè tan"), "9834524", "Gwo valè tès.");
            notEqual(getIDFromLookupField("5;#Si yon moun", 6), 6, "Sonde yon notEqual (5 pa rive fè 6 pou sa a echantiyon: [5;#Si yon moun]");

        });

        modile("htmlEscape");
        tès("QuizUtil htmlEscape()", fonksyon () {
            egal-ego(htmlEscape("<"), "&lt;", "Ke yon te ranmase pi piti pase operatè ('<')");
            egal-ego(htmlEscape("<klas div =  "someclass">Kèk tèks</div>"), "&lt;klas div =&quot;someclass&quot;&gt;Kèk tèks&lt;/div&gt;", "Plis konplèks tès chaîne.");
        });

        modile("getDateAsCaml");
        tès("QuizUtil getDateAsCaml()", fonksyon () {
            egal-ego(getDateAsCaml(nouvo Dat("12/31/2013")), "2013-12-31T:00:00:00", "Sonde di code dat: [12/31/2013]");
            egal-ego(getDateAsCaml(nouvo Dat("01/05/2014")), "2014-01-05T:00:00:00", "Sonde di code dat: [01/05/2014]");
            egal-ego(getDateAsCaml(nouvo Dat("01/31/2014")), "2014-01-31T:00:00:00", "Sonde di code dat: [01/31/2014]");
            egal-ego(getTodayAsCaml(), getDateAsCaml(nouvo Dat()), "getTodayAsCaml() ta dwe rive nan menm getDateAsCaml(nouvo dat())");
            egal-ego(getDateAsCaml("vye koze valè"), non, "Eseye pou jwenn dat li yon valè vye koze.");
            egal-ego(getDateAsCaml(non), non, "Eseye jwenn dat li a [non] dat.");
        });

        modile("getParameterByName");
        tès("QuizUtil getParameterByName (de la chaîne requête)", fonksyon () {
            egal-ego(getParameterByName(non), non, "Eseye jwenn endefini paramètre ta dwe retounen nan endefini.");
            egal-ego(getParameterByName("pa egziste"), non, "Eseye pou jwenn valè paramètre lè nou konnen paramètre a pa egziste.");

        });

        modile("Lekòl");
        tès("QuizUtil plizyè kalite fonksyon bonbon.", fonksyon () {
            egal-ego(setCookie(tès"", "1", -1), getCookieValue(tès""), "Obtenir, yon bonbon mwen mete ta dwe travay yo.");
            egal-ego(setCookie("anycookie", "1", -1), vre, "Mete yon bon manje ta dwe retounen 'laverite'.");
            egal-ego(setCookie("bonbon fou non !@#$%"%\^&*(()?/><.,", "1", -1), vre, "Mete yon move bonbon non ta dwe retounen 'manti'.");
            egal-ego(setCookie(non, "1", -1), non, "Pase endefini tankou non bonbon.");
            egal-ego(getCookieValue("pa egziste"), "", "Bonbon pa egziste tès.");
        });

    </script>
</tèt>
<>
    <div didantite= "qunit"></div>
    <div didantite= qunit fixe""></div>

</>
</html>

Genyen anpil bagay ki pase isit la:

  1. Référence m' kòd (QuizUtil.js)
  2. Qui Qunity.js
  3. Defini modules kèk (getIDFromLookup, Lekòl, ak lòt)
  4. Mete yon <div> Didantite ki se "qunit".

apre, Mwen jis rale moute nan paj sa yo ak ou jwenn yon bagay tankou sa:

image

Figi 3

Si ou gade lòt sou tèt, ou gen kèk chwa, de nan ki yo enteresan:

  • Te pase tès ki kache: Assez aklè.  Ka ede je ou annik wè zòn sa yo pwoblèm Et pa yon bann de l'.
  • Modile: (gout (n)): Sa ap filtre tès yo desann nan gwoup sèlman sa yo nan tès sa yo ou vle.

Tankou tès yo-kèk sijesyon:

  • Sa se pa di sa ou bezwen pou yo ekri kòd ou comme ke li testable nan premye plas.  W ap itilize a konnen si yon moun ka ede appliquer disiplin sa. Ekzanp, Mwen te gen yon fonksyon ki rele "getTodayAsCaml()”.  Bagay sa a pa trè testable depi li pwan pa chire pit D' Et teste li pou egalite, nou ta bezwen constamment à kòd tès pou reflete dat aktyèl la.  Mwen refactored li pa pandan l ajoute yon paramètres D' done konsa pase dat aktyèl la lè m vle dat jodi a nan CAML fòma.
  • A Qunit-documents tès pwòp e li pi sanble ki trè gaya.  Li kapab fè sa tankou tès pou egalite e li gen sipò pou ajax stil apèl (les "reyèl" ou mocked yo ap itilize mocker pi renmen ou).
  • Ap pase nan pwosesis la tou fòs ou panse à bord ka-sa k rive koukouloukou ak "endefini" ou null te pase nan yon fonksyon.  Li fè l' mouri senp pou tès scénarios sa yo deyò.  Bon bagay.

Lwa sekirite sosyal ak Blanket.js

Blanket.js complète Qunit pa Suivi réel lignes de kòd ki te akonpli diran okou kouri tès ou.  Li entegre dwat nan Qunit menm se konsa menm si li se yon tout separe app, jwe bien – li vrèman sanble se yon sèl app sans.

Se sa rele blanket.js nan aksyon:

image Figi 4

image

Figi 5

(Ou aktyèlman gen Sur sou a "Pèmèt lwa sekirite sosyal" à nan tèt [wè figi 3] pou pèmèt sa.)

Les lignes en nan figi 5 pa te egzekite pa okenn nan tès sa yo m, Se konsa mwen bezwen devise yon tès ki koze yo pou yo egzekite si mwen vle plen lwa sekirite sosyal.

Gen blanket.js ki te travay pa swiv étapes sa yo:

  1. Rale dosye l http://blanketjs.org/.
  2. Ajoute pwojè ou
  3. À paj lekipay tès ou (QuizUtil_test.html nan ka mwen) comme piba:
    1. Référence kòd la
    2. Ekore ou <script> référence kon sa:
    <script tip= tèks/javascript"" src="QuizUtil.js" done pwotèj></script>

Blanket.js travayè kalite "done kouvèti" a epi ki fè sanp li.  Li crochets nan Qunit, à la UI pou ajoute a opsyon "Pèmèt lwa sekirite sosyal" Et Vwala!

Rezime (TL; DOKTÈ)

Sèvi ak Qunit pou yo ekri ou ka sonde.

  • Rale dosye l
  • Ajoute pwojè ou
  • Ekri yon paj lekipay tès
  • Kreye tès ou
    • Refactor kèk nan kòd ou en testable
    • Être kreyatif!  Panse a fou, scénarios enposib ak tès yo?.

Sèvi ak blanket.js pou asire ke lwa sekirite sosyal

  • Pou pi si Qunit ap travay
  • Rale dosye blanket.js Et ajoute pwojè ou
  • Ajoute paj lekipay tès ou:
    • Ajoute yon referans a blanket.js
    • Ajoute yon kalite "done kouvèti" pou ou <script> etikèt
  • Lage kous nou tès Qunit.

Mwen pa janm fè anyen nan sa deja Et te gen kèk bagay rudimentaire kap travay nan yon ti ponyen heures. 

Benediksyon pou sonde!

</fen>

undefinedVous pou m' blog.

Swiv mwen sou Twitter nan http://www.twitter.com/pagalvin