Hli Archives: Lub ib hlis ntuj 2014

Tus txiv neej tsis tus Caching hauv JavaScript

1 Teb

[TL;DR version: siv cov ncuav qab zib kom cia ntsuam async hu; kav soj ntsuam lawm hais lus async tam sim ntawd thiab ces validate lawv tom qab nplooj load.]

Kuv twb tau ua rau ntawm qhov chaw intranet SharePoint rau ib tug neeg ntawd nta, cov lwm yam, ib stylized lwm yam navigation uas los ntawm kev xaiv zaub mov muaj tswj ntawm ib txwm qub kev cai sau.  Tsab cai idea yog tias tus neeg twg thiaj tau tus tswj "lawv" rau cov zaub mov uas tsis rau los muab cuam tshuam los ntawm lub ntiaj teb no navigation muab tso los ntawm nws.

(muaj dab tsi subversive incredibly txog ntxiv ib CEWP uas cov ntsiab lus rau ib tug HTML uas loads ib co CSS thiab JS fundamentally tshwm sim yuav luag txhua yam hais txog tus kawm li cwjpwm... tiam sis yog rau lwm tus ncej)

Qhov chaws kom yooj yim yuav zoo nkauj no:

  • Tos li cov nplooj ntawv kom tag rau nraum chaw thau khoom thiab muab ib tug async hu mus thauj tuaj tshuab raj ua ib yam khoom ntawm ib daim ntawv teev tas los yog lists.asmx los yog los xijpeem
  • Siv jQuery, dynamically populate ib Rev yog <lis>tus hauv ib tug niam txiv <ul> (saib cov Christian Pinder tsab xov xwm no rau lub vaj no tecnnique simplistic)
  • Kev siv CSS yuav ua txhua yam rau formatting
  • Nyiaj!

Tej teev hauv no mob ntawd yog txhua zaus thaum leej twg hits yog ib cov chaw nplooj, tus neeg ntawd lub web browser yog caw kom tau yam khoom los ntawm daim ntawv.  Thaum dev no tiav thiab kuaj tau proven yam yuav ruaj thiab teb, no hu no hu ruaj dua 99% lub sij hawm thaum cov zaub mov tsis tshua hloov.  Nws kuj muaj ib tug weird UI muaj uas muaj nyob rau qhov brave new world ntawm cus-ajaxy web sites – cov phab renders thiab xwb ces yog cov ntawv qhia zaub mov kav.  Nws yog jittery thiab distracting rau kuv saib.  Thiab jittery. Li ntawd, caching. 

Kuv raug kho qhov logic thusly:

  • Nrhiav ib cov kua nplaum uas nyob rau hauv qhov browser uas muaj daim ntawv qhia zaub mov li kuv kawg nyeem nws
    • Yog nrhiav tau, kav nws tam sim ntawd.  Tsis txhob tos txog rau sab mus tag rau nraum chaw thau khoom.  (Koj yuav tau xyuas kom tseeb tias koj cov HTML leeg muab tso ntawm no, tab sis nws yuav tsis ua zog).
  • Tos li cov nplooj ntawv kom tag rau nraum chaw thau khoom thiab muab ib tug async hu mus thauj tuaj tshuab raj ua ib yam khoom ntawm ib daim ntawv teev tas los yog lists.asmx los yog los xijpeem
  • Piv li kuv tau tiv cov kua nplaum uas
    • Yog hais tias nws qhov khoom, TSO TSEG
    • Txwv tsis pub, siv jQuery, dynamically populate ib Rev yog <lis>cov nyob hauv lub <ul>
  • Kev siv CSS yuav ua txhua yam rau formatting
  • Nyiaj!

Qee yam uas koj yuav hais, "hav! yog tsis muaj real caching mus rau hauv no vim muaj koj nyob nraum nyeem cov ntawv qhia zaub mov rau nkawv noj txhua txhua zaug uas koj nkaus xwb.”  Thiab koj nyob nraum txoj kev-kuv tsis muab rau tus neeg rau zaub mov ntais txhua yam.  Tab sis vim hu yog async thiab tshwm sim tom qab uas pib ntawm nplooj ntawv HTML payload siab renders, nws "yim" noog kom tus neeg siv.  Daim ntawv qhia zaub mov renders zoo nkauj ntau li cov nplooj draws.  Yog hais tias cov zaub mov zoo li yuav hloov, cov neeg siv yog nyuam ib jittery rov kos ntawm cov ntawv qhia zaub mov, tab sis lub caij ntawd xwb.

Yog cov kev ua no caching zoo tshaj thiab pab kom paub cov neeg rau zaub mov txhij:

  • Muab tso rau hauv ib txoj cai tias tus tus "kua nplaum uas cache" yog muaj tsawg kawg yog 24 teev los yog ib txhia timeframe. Tsuav yog tsis DRA cov kua nplaum uas, siv cov kua nplaum uas tshuab raj snapshot thiab tsis txhob ntaus cov neeg rau zaub mov.

Qhov tshij... uas txhua yam uas tuaj siab tamsim no :). 

Yog leej twg muaj tus muaj cov tswv yim ntse nov kuv yuav hlub kom paub tias lawv.

Thiab ntsig – cov txheej txheem no yuav raug siv rau lwm yam khoom.  No neeg sab muaj ntau yam ntaub ntawv-uas tau tsav ntawv teev rau phab ntau, muaj coob leej kuj tsis tshua hloov (zoo li ib zaug ib lub lim tiam los sis ib hlis ib zaug).  Yog tias koj phiaj txog tej chaw functionality, koj muab tau ib daim UI feem ntau yog rub cov ntsiab lus los ntawm cov kua nplaum uas nyob tom khw thiab rendering tam sim ntawd.  Nws yim sai rau cov neeg siv txawm hais tias koj nyob nraum tsis txuag cov neeg rau zaub mov twg Pest.  Koj tau txuag cov neeg rau zaub mov mus los ntawm kev txiav txim siab rau tej mob uas muaj tej yam rau invalidate no qhov chaw cov kua nplaum uas cache.  Li no tag situational thiab artsy khoom thiab tiag tiag mas kev lom zem :). 

</kawg>

undefinedSubscribe rau kuv blog.

Raws li kuv nyob Twitter tom http://www.twitter.com/pagalvin

Yuav ua li cas: Configure tsev kuaj thiab tshuaj ntsuam cov kev pab uas muaj QUnit.js thiab Blanket.js rau ib qho chaw ua hauj lwm 365 SharePoint App

sau ntawv cia

Intro

Twb tau kawm chav tsev kuaj thiab ntsuam xyuas cov kev pab tsis rau JavaScript nrog kuv ua hauj lwm hauv SharePoint app rau SharePoint hauv internet nyob rau hauv qhov chaw ua hauj lwm 365 Suite.  Cov cuab kev tshawb fawb paths coj kuv mus Qunit.js thiab txoj cai tom qab uas, mus Blanket.js.

QUnit cia kuv teeb tsev kuaj thiab koom rau hauv modules.  Ib tug module nws cia li yooj yim rau Teacher lwm yam kev kuaj. (Kuv tsis paub hais tias kuv yuav siv nws los siv yuav tsum, tab sis nws puas ua haujlwm rau kuv nyob deb thiaj nrog lub me me teeb ntawm kev ntsuam xyuas uas kuv tau deb deb li no txhais).

Blanket.js integrates nrog Qunit thiab nws yuav qhia kuv qhov tseeb kab ntawm JavaScript tau – thiab ntau ceeb tshaj – twb tsis tau tseg thaum khiav cov kev ntsuam xyuas.  Qhov no yog "los" – cov kab mob tseg yog them los ntawm txoj kev kuaj no thaum lwm tus uas tsis.

Teem mus kuaj mob zoo thiab saib cov kev pab them nqi, peb yuav txo tau qhov uas yuav ua kom cov code peb tau muab zais tsis xws luag.  Zoo sij hawm.

Qunit

Piv txwv tias yog koj muaj koj Studio uas koj siv qhov muag saib ib qhov teeb, pib los daus JavaScript pob ntawm http://qunitjs.com.  Ntxiv cov JavaScript thiab coj CSS koj cov tshuaj.  Mine looks li no:

image

Daim duab 1

Raws li koj tau pom, Kuv twb siv 1.13.0 thaum lub sij hawm uas kuv sau tau no blog tswg. Tsis txhob hnov qab ntxiv rau CSS daim download tau thiab kev pab.

Uas tawm hauv txoj kev, cov kauj ruam tom ntej yog los tsim tej yam xeem sam xauv nees thiab reference lub Qunit khoom.  Kuv yuav kuaj ib Rev muaj zog hauv ib tsab ntawv thov hu ua "QuizUtil.js" es kuv tsim ib nplooj hu ua "QuizUtil_test.html" thaum pom tias cov HTML:

image Daim duab 2

Ntawm no yog cov chaws:

<!DOCTYPE html>
<html xmlns= "http://xyoo 1999/xhtml www.w3.org/">
<lub taub hau>
    <npe>QuizUtil xeem nrog Qunit</npe>
    <txuas rel= "stylesheet" href="../CSS/qunit-1.13.0.CSS" />
    <tsab ntawv hom= "ntawv nyeem/javascript" src="QuizUtil.js" cov ntaub ntawv npog></tsab ntawv>
    <Script yam ="ntawv nyeem/javascript" src ="qunit-1.13.0.js"></tsab ntawv>
    <Script yam ="ntawv nyeem/javascript" src ="blanket.min.js"></tsab ntawv>

    <tsab ntawv>
        Module("getIDFromLookup");
        ntsuam xyuas("QuizUtil getIDFromLookupField", muaj nuj nqi () {
            Var goodValue = "1;#Paul Galvin";

            sib npaug(getIDFromLookupField(goodValue) + 1, 2), "Tus ID rau [" + goodValue + "] + 1 yuav tsum muaj rau 2";
            sib npaug(getIDFromLookupField(undefined), undefined, "Undefined input cav yuav rov raug undefined.");
            sib npaug(getIDFromLookupField(""), undefined, "Khoob input cav yuav tsum tau xa ib tus nqi uas undefined.");
            sib npaug(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;vn"), undefined,"Yuav tsum nco ntsoov rov ib lub convertible no rau ib Integer");
            sib npaug(getIDFromLookupField("2;#ib txhia neeg"), "2", "Xyuas [2;#ib txhia neeg].");
            sib npaug(getIDFromLookupField("9834524;#tus nqi uas ntev"), "9834524", "Coob tus nqi kuaj.");
            notEqual(getIDFromLookupField("5;#leej twg los", 6), 6, "Kuaj ib notEqual (5 yog tsis sib npaug 6 rau cov qauv no: [5;#leej twg los]");

        });

        Module("htmlEscape");
        ntsuam xyuas("QuizUtil htmlEscape()", muaj nuj nqi () {
            sib npaug(htmlEscape("<"), "&LT;", "Escaping ib tug tsawg dua li tus neeg teb xov tooj ('<')");
            sib npaug(htmlEscape("<div hoob = yog muaj "someclass">Tej ntawv nyeem</div>"), "&LT;chav kawm ntawv div =&quot;someclass&quot;&gt;Tej ntawv nyeem&LT;/div&gt;", "Ntau xeem txoj hlua.");
        });

        Module("getDateAsCaml");
        ntsuam xyuas("QuizUtil getDateAsCaml()", muaj nuj nqi () {
            sib npaug(getDateAsCaml(tshiab Hnub tim("12/31/2013")), "2013-12-31T:00:00:00", "Kuaj coded ib hnub: [12/31/2013]");
            sib npaug(getDateAsCaml(tshiab Hnub tim("01/05/2014")), "2014-01-05T:00:00:00", "Kuaj coded ib hnub: [01/05/2014]");
            sib npaug(getDateAsCaml(tshiab Hnub tim("01/31/2014")), "2014-01-31T:00:00:00", "Kuaj coded ib hnub: [01/31/2014]");
            sib npaug(getTodayAsCaml(), getDateAsCaml(tshiab Hnub tim()), "getTodayAsCaml() yuav tsum siab sib npaug getDateAsCaml(Hnub tshiab())");
            sib npaug(getDateAsCaml("dev paus tus nqi"), undefined, "Sim tau hnub ntawm ib cov nqi dev paus.");
            sib npaug(getDateAsCaml(undefined), undefined, "Sim tau lub hnub lub [undefined] hnub.");
        });

        Module("getParameterByName");
        ntsuam xyuas("QuizUtil getParameterByName (los ntawm cov lus nug hlua)", muaj nuj nqi () {
            sib npaug(getParameterByName(undefined), undefined, "Sim nrhiav undefined parameter yuav tsum tau rov undefined.");
            sib npaug(getParameterByName(muaj "tsis nyob"), undefined, "Sim nrhiav parameter nqi thaum uas peb paub tias muaj tus parameter tsis nyob.");

        });

        Module("Ncuav qab zib");
        ntsuam xyuas("QuizUtil kua nplaum uas ntau zog.", muaj nuj nqi () {
            sib npaug(setCookie("sim", "1", -1), getCookieValue("sim"), "Tau ib cov kua nplaum uas kuv teem caij yuav tsum tau ua.");
            sib npaug(setCookie("anycookie", "1", -1), tseeb, "Qhov chaw kawm ib tug siv tau noj yuav tsum tau xa 'nws muaj tseeb'.");
            sib npaug(setCookie("npab kua nplaum uas lub npe !@#$%"%\^&*(()?/><.,", "1", -1), tseeb, "Qhov chaw kawm ib lub npe phem cov kua nplaum uas yuav tsum tau rov 'cuav'.");
            sib npaug(setCookie(undefined, "1", -1), undefined, "Raws li cov kua nplaum uas npe undefined.");
            sib npaug(getCookieValue(muaj "tsis nyob"), "", Muaj "kua nplaum uas tsis nyob ntawd.");
        });

    </tsab ntawv>
</lub taub hau>
<lub cev>
    <div tus ID= "qunit"></div>
    <div tus ID= "qunit-fixture"></div>

</lub cev>
</html>

Muaj ntau ntau yam zoj zis no:

  1. Referencing kuv code (QuizUtil.js)
  2. Referencing Qunity.js
  3. Defining tej modules (getIDFromLookup, Ncuav qab zib, thiab lwm tus)
  4. Muab ib <div> nws daim ID yog "qunit".

Ces, Kuv cia li rub tau cov nplooj ntawv no thiab koj mus muab tau tej yam zoo li no:

image

Daim duab 3

Yog qhov koj saib hla saum, koj tau xaiv ob peb, yog ob tug uas nthuav:

  • Hide dhau kev ntsuam xyuas: Cuab kev zoo nkauj.  Yuav pab tau koj qhov muag pom xwb lub teeb meem chaw thiab tsis muaj coob plaus.
  • Module: (hlauv): Qhov no yuav lim tau cov kev ntsuam xyuas pawg xwb cov kev ntsuam xyuas uas koj xav mus ua.

Ntawm kev tshuaj ntsuam lawv tus kheej – ob peb lus:

  • Nws yuav mus tsis tau hais tias koj tau sau koj cov cai xws tias nws yog testable ua tus xub place.  Siv cov cuab tam yuav pab tswj qhov kev qhuab qhia. Piv txwv, Kuv muaj ib tug ua haujlwm hu ua "getTodayAsCaml()”.  Qhov no tsis testable heev vim nws yuav siv sij hawm tsis sib cav uas input thiab kuaj kev koob pheej ntawm lawv, peb yuav tau lossi kho qhov chaws kuaj kom muaj kev cuam tshuam rau hnub tam sim no.  Kuv refactored ntawd los ntawm kev muab ib cov ntaub ntawv input parameter ces dua sau hnub thaum kuv xav hnub no CAML hom.
  • Qhov lub moj khaum Qunit ntaub ntawv rau qhov kev ntsuam xyuas nws tus kheej thiab no mas, robust zoo nkauj.  Nws yuav ua tau tej yam yooj yim xws li kuaj kev koob pheej ntawm lawv thiab tseem muaj nyiaj yug rau ajax style hu (ob leeg "tiag tiag" los mocked siv koj txoj kev mocker).
  • Yuav ua raws cov txheej txheem kuj forces koj xav mus txog ntug no – yuav ua cas nrog "undefined" lossis null dhau mus ua ib tug muaj nuj nqi.  Nws ua nws tuag yooj yim mus kuaj cov scenarios tawm.  Khoom zoo.

Cov kev pab uas muaj Blanket.js

Blanket.js complements Qunit los nrhiav lub txoos kab kev cai txim tuag thaum khiav koj kev ntsuam xyuas.  Nws integrates txoj cai rau hauv Qunit no, txawm ho yog ib tus tseem cais app, nws nicely plays – nws yeej zoo li nws yog ib tug seamless app.

Qhov no nws yog blanket.js rau hauv ntawv:

image Daim duab 4

image

Daim duab 5

(Koj yeej tau mus nias rau ntawm "Pab kom cov kev pab" checkbox rau saum [pom daim duab 3] kom niam no.)

Tus kab highlighted nyob hauv daim duab 5 tau tsis tau tseg los ntawm ib yam ntawm kuv qhov kev ntsuam xyuas, li ntawd, kuv yuav npaj ib txoj kev kuaj uas ua rau lawv rau txim tuag yog kuv xav tau kev pab tas nrho.

Tau ua hauj lwm los yog ua raws li cov kauj ruam nram blanket.js:

  1. Download tau nws tawm http://blanketjs.org/.
  2. Ntxiv rau koj qhov project
  3. Hloov koj nplooj ntawv kuaj sam xauv nees (QuizUtil_test.html hauv kuv tsev neeg) raws li nram no:
    1. Siv tus cai
    2. Kho koj <tsab ntawv> siv nyiam qhov no: 
    <tsab ntawv hom= "ntawv nyeem/javascript" src="QuizUtil.js" cov ntaub ntawv npog></tsab ntawv>

Blanket.js picks los ntawm "cov ntaub ntawv npog" attribute thiab puas tau nws cov khawv koob.  Nws mus ua Qunit hooks, siab tus UI ntxiv qhov "Pab kom cov kev pab" option thiab voila!

Txoj kev (TL; DR)

Siv Qunit los mus sau koj cov raug kuaj.

  • Download tau nws
  • Ntxiv rau koj qhov project
  • Sau tau ib nplooj ntawv kuaj sam xauv nees
  • Ua kom muaj qhov kev ntsuam xyuas koj
    • Ib txhia ntawm koj cov cai ua testable refactor
    • Yuav muaj tswv yim!  Xav txog crazy, scenarios yeej ua thiab kuaj lawv lawm.

Siv cov blanket.js kom muaj kev pab them nqi

  • Xyuas kom tseeb tias Qunit ua hauj lwm
  • Download tau blanket.js thiab ntxiv mus rau koj qhov project
  • Ntxiv rau mus kuaj sam xauv nees phab:
    • Ntxiv ib siv mus blanket.js
    • Ntxiv "cov ntaub ntawv npog" attribute rau koj <tsab ntawv> lossis
  • Khiav koj cov kev kuaj Qunit.

Kuv yeej tsis ua yam no ua ntej thiab muaj ib co rudimentary khoom ua hauj lwm ib handful teev. 

Kev soj ntsuam zoo siab!

</kawg>

undefinedSubscribe rau kuv blog.

Raws li kuv nyob Twitter tom http://www.twitter.com/pagalvin