Aylık Arşivler: Ocak 2014

Zavallı adam, JavaScript önbelleğe alma'nın

[TL;DR sürüm: zaman uyumsuz arama sonuçlarını depolamak için tanımlama; Geçmiş zaman uyumsuz arama sonuçlarını hemen işlemek ve sonra onları sayfa yükleme sonra doğrulayın.]

SharePoint intranet sitesindeki bir müşteri için bu özellikleri çalıştım, diğer şeyler arasında, stilize bir ikincil gezinti menüsü seçeneklerini düzenli eski özel liste yönetilir.  Fikir istemci etkileyen veya onun tarafından koymak Genel gezinti tarafından etkilenen varlık olmadan "kendi" sitenin menü kontrol etmek alır.

(Bu temelde bir sitenin davranış hakkında hemen hemen her şeyi değiştirmek için bazı CSS ve JS yükler ama bu başka bir yazı için bir HTML dosyasına işaret eden bir CEWP ekleme konusunda son derece yıkıcı bir şey)

Bu basit kodu:

Sore spot burada olduğunu ne zaman kimse bir sitenin sayfaları hits, kullanıcının web tarayıcısı listeden öğeleri almak için dışarı ulaşıyor.  Tam ve test dev bir kez şeyler olduğu için stabil ve tam kanıtlamıştır, Buna gerek yok daha fazla 99% zamandan beri menü nadiren değişir.  Ayrıca bu cesur yeni dünya hiper-ajaxy web sitelerinin ortak bir garip UI etkiler vardır – sayfa oluşturur ve ancak o zaman menü hale geliyor.  Gergin ve rahatsız edici benim görüşüme göre.  Ve gergin. Yani, önbelleğe alma. 

Thusly mantığı modifiye:

  • Ben son okurken, menüyü içeren tarayıcı çerezde arayın
    • Eğer bulundu, Bunu hemen işleme.  Sayfa yükleme bitirmesini beklemek gerekmez.  (HTML burada stratejik olarak yerleştirilmiş emin olmanız gerekir, Ama bu kadar da zor değil).
  • Sayfanın yüklenmesini bitirmek ve bir zaman uyumsuz yük kadar dinlenme ya da lists.asmx kullanarak listeden menü öğeleri için arama yapmak bekleyin
  • Çerez karşı elimizdeki karşılaştırın
    • Eşleşiyorsa, DURDUR
    • Aksi takdirde, jQuery kullanarak, Eğer bir grup dinamik olarak doldurmak <Li>' ın içinde bir <ul>
  • Tüm biçimlendirme için CSS kullanma
  • Kar!

Bazılarınız söyleyeceksin, "hey! menü yine de okuduğunuz bu yana çok önbellekleme burada olmayacak her zaman.”  Ve haklısın-break herhangi bir sunucu vermiyorum.  Ama çağrı zaman uyumsuz ve sonra sayfayı ilk olur çünkü HTML yükü tam olarak işler, "kullanıcıya daha duyarlı hissediyorum".  Menü çok sayfa çizer olarak işler.  Eğer menü değiştirmek için, kullanıcı bir gergin yeniden çizmek menü için tabi tutulur, Ama sadece bir kere.

Bu önbelleğe alma daha verimli hale getirmek ve aynı zamanda sunucu yardım için bazı yolları vardır.:

  • "Tanımlama bilgisi önbelleği" için en az geçerli bir kural koymak 24 Saat veya diğer bir süre. Süresi dolan kurabiye yok sürece, Çerezin menü anlık kullanın ve asla sunucu hit.

Şu an aklıma gelen tek şey... :). 

Kimse burada akıllı bir fikrin varsa onları bilmek isterdim..

Ve son olarak – bu yöntem-ebilmek var olmak kullanılmış için diğer şeyler.  Bu istemcinin sayfa verilere şeylerin bir dizi çeşitli sayfalarda vardır., pek çoğu nispeten nadiren değiştirme (haftada bir veya ayda bir gibi).  İşlevselliği belirli alanları hedefliyorsanız, daha duyarlı bir kullanıcı Arabirimi yerel tanımlama bilgisi deposundan içerik çekme ve hemen işleme verebilir.  Sunucu herhangi bir devir kurtarmıyorsun bile daha hızlı kullanıcıya hissediyor.  Sen Can sunucu döngüsü bu yerel tanımlama bilgisi önbelleği geçersiz kılmak için bazı koşullar ve tetikleyiciler karar vererek kaydedin.  Tüm durumsal ve iddialı şeyler ve gerçekten en eğlenceli :). 

</sonunda>

undefinedBenim blog abone.

Heyecan beni izleyin http://www.twitter.com/pagalvin

Nasıl Yapılır: Birim testi ve Test kapsamındaki QUnit.js ve Blanket.js ile bir Office için Yapılandır 365 SharePoint uygulaması

Intro

Birim test keşfetmek olmuştur ve online Office SharePoint için yeni bir SharePoint uygulaması üzerinde çalışmak için JavaScript test kapsamı 365 Suite.  Bana açık araştırma yolları açtı Qunit.js ve sonra da sağ, Hedef Blanket.js.

QUnit birim testleri ayarlamak ve grup onları modüller edeyim.  Bir modül ilgili testleri düzenlemek için basit bir yol olduğunu. (Bunu gerektiği gibi kullanarak emin değilim, Ama benim için şu ana kadar tanımladığınız testleri küçük kümesiyle defa çalışıyor).

Blanket.js Qunit ile entegre ve o-ecek göstermek beni-e doğru-ve daha da önemlisi – aslında test çalışması sırasında yürütülen değil gerçek satır JavaScript.  Bu "kapsam"-diğerleri olmayan çalıştırılır satırı testi ile kaplıdır..

Kadar iyi test çalışmalarını ayarlama ve kapsam görüntüleme arasında, Biz bizim kod hataları gizlenmiş riskini azaltabilir.  İyi zamanlar.

Qunit

Projeyi Visual Studio var varsayarak kurmak, JavaScript paketi indirerek başlangıç http://qunitjs.com.  JavaScript ve karşılık gelen CSS çözümünüze eklemelisiniz.  Benim şuna benzer:

image

Şekil 1

Gördüğünüz gibi, I was istimal 1.13.0 o zaman bu blog yazısı yazdı.. Download ve CSS dosyası eklemek unutmayın.

Bu yoldan çekilin, bir çeşit test bandı oluşturun ve Qunit bit için sonraki adımdır.  "QuizUtil.js" denilen "gösterildiği gibi QuizUtil_test.html" adı verilen bir HTML sayfası oluşturan bir komut dosyası işlevleri bir sürü test ediyorum:

image Şekil 2

İşte kod:

<!DOCTYPE HTML>
<HTML xmlns"http =://www.w3.org/ 1999/xhtml">
<kafa>
    <Başlık>QuizUtil testi ile Qunit</Başlık>
    <bağlantı rel"stil sayfası =" href="../CSS/qunit-1.13.0.css" />
    <komut dosyası türü= text/javascript"" src="QuizUtil.js" veri-kapak></komut dosyası>
    <komut dosyası türü ="text/javascript" src ="qunit-1.13.0.js"></komut dosyası>
    <komut dosyası türü ="text/javascript" src ="blanket.min.js"></komut dosyası>

    <komut dosyası>
        modülü("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", işlevi () {
            var goodValue = "1;#Paul Galvin";

            eşit(getIDFromLookupField(goodValue) + 1, 2), "Kimliği [" + goodValue + "] + 1 2-meli var olmak";
            eşit(getIDFromLookupField(Tanımsız), Tanımsız, "Tanımsız giriş bağımsız değişkeni tanımsız sonuç döndürmelidir.");
            eşit(getIDFromLookupField(""), Tanımsız, "Boş giriş bağımsız değişkeni tanımsız bir değeri döndürür.");
            eşit(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), Tanımsız,"Her zaman sonuç üstü açık bir tamsayıya dönmesi gerekir");
            eşit(getIDFromLookupField("2;#bir başka kişi"), "2", "Kontrol [2;#bir başka kişi].");
            eşit(getIDFromLookupField("9834524;#uzun değeri"), "9834524", "Büyük bir değer test.");
            notEqual(getIDFromLookupField("5;#kimse", 6), 6, "Bir notEqual test (5 eşit değildir 6 Bu örnek için: [5;#kimse]");

        });

        modülü("htmlEscape");
        test("QuizUtil htmlEscape()", işlevi () {
            eşit(htmlEscape("<"), "&lt;", "Kaçan bir küçüktür işleci ('<')");
            eşit(htmlEscape("<div class =  "someclass">Bazı metin</div>"), "&lt;div class =&quot;SomeClass&quot;&gt;Bazı metin&lt;/div&gt;", "Daha karmaşık sınama dizesi.");
        });

        modülü("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", işlevi () {
            eşit(getDateAsCaml(Yeni Tarihi("12/31/2013")), "2013-12-31T:00:00:00", "Sabit kodlanmış Tarih testi: [12/31/2013]");
            eşit(getDateAsCaml(Yeni Tarihi("01/05/2014")), "2014-01-05T:00:00:00", "Sabit kodlanmış Tarih testi: [01/05/2014]");
            eşit(getDateAsCaml(Yeni Tarihi("01/31/2014")), "2014-01-31T:00:00:00", "Sabit kodlanmış Tarih testi: [01/31/2014]");
            eşit(getTodayAsCaml(), getDateAsCaml(Yeni Tarihi()), "getTodayAsCaml() getDateAsCaml eşit olmalıdır(Yeni Tarih())");
            eşit(getDateAsCaml("saçmalık değeri"), Tanımsız, "Tarihi bir saçmalık değerinin elde etmeye çalışmak.");
            eşit(getDateAsCaml(Tanımsız), Tanımsız, "Tarihi elde etmeye çalışmak [Tanımsız] Tarih.");
        });

        modülü("getParameterByName");
        test("QuizUtil getParameterByName (sorgu dizesi)", işlevi () {
            eşit(getParameterByName(Tanımsız), Tanımsız, "Elde etmeye çalışmak tanımsız parametresi tanımsız dönmek.");
            eşit(getParameterByName("mevcut değil"), Tanımsız, "Biz parametre yok biliyorum parametre değeri elde etmeye çalışmak.");

        });

        modülü("Tanımlama bilgileri");
        test("QuizUtil çeşitli tanımlama işlevleri.", işlevi () {
            eşit(setCookie("testi", "1", -1), getCookieValue("testi"), "Get set kurabiye çalışması gerekir.");
            eşit(setCookie("anycookie", "1", -1), TRUE, "Geçerli bir pişirme ayarı 'true' döndürür.");
            eşit(setCookie("çılgın tanımlama bilgisi adı !@#$%"%\^&*(()?/><.,", "1", -1), TRUE, "Kötü tanımlama bilgisi adı ayarlama 'false' a dönmelidir.");
            eşit(setCookie(Tanımsız, "1", -1), Tanımsız, "Geçen tanımlama bilgisi adı olarak tanımlanmamış.");
            eşit(getCookieValue("mevcut değil"), "", "Tanımlama bilgisi testi yok.");
        });

    </komut dosyası>
</kafa>
<vücut>
    <div kimliği"qunit ="></div>
    <div kimliği"qunit-fikstür ="></div>

</vücut>
</HTML>

Orada birçok şey oluyor burada:

  1. Kodumu başvurma (QuizUtil.js)
  2. Başvuru Qunity.js
  3. Bazı modüller tanımlama (getIDFromLookup, Tanımlama bilgileri, ve diğerleri)
  4. Yerleştirerek bir <div> ID "qunit" mı.

O zaman, Bu sayfa yukarı çekin ve böyle bir şey almak:

image

Şekil 3

Üstünde bakarsanız, birkaç seçenek var, ikisi de ilginç:

  • Testler geçti gizle: Çok açık.  Sadece sorun alanları ve yığılmayı değil bir sürü görmek göz yardımcı olabilir.
  • Modülü: (damla aşağı): Bu testler sadece bu gruplara testlerin istediğiniz aşağı süzer.

Testler kendilerini – birkaç yorum gelince:

  • Bu öyle ki ilk etapta test edilebilir kodunuzu yazmanız gerektiğini söylemeye gerek yok.  Aracı kullanarak bu disiplin uygulamak yardımcı olabilir. Örneğin, "GetTodayAsCaml adında bir işlevi vardı.()”.  Hiçbir giriş bağımsız değişkeni alır bu yana bu çok test edilebilir değildir ve eşitlik için sınamak için, sürekli geçerli tarihin yansıtması için test kodu güncelleştirmeniz gerekir.  Ben bir veri giriş parametresi ekleyerek daha sonra geçerli tarihten bugüne CAML biçimde istediğim zaman geçirmeden refactored.
  • Kendi test Qunit framework belgeleri ve oldukça sağlam görünüyor.  Eşitlik için sınama gibi basit şeyler yapabilirsiniz ve ayrıca ajax tarzı telefon desteği vardır ("gerçek" veya alay senin favori mocker kullanma).
  • Sürecinden de kenar durumlarda – ne "Tanımsız" ile olur düşünmek için zorlar veya null bir işlev geçirilir.  Bu senaryolar dışarı test ölü basit kolaylaştırır.  İyi malzeme.

Blanket.js ile kapsama

Blanket.js, testlerinizi ders sırasında yürütmek gerçek kod satırlarının takip ederek Qunit tamamlar.  O bütünleşmek sağ Qunit bile olsa tamamen ayrı bir app 's, o güzel oyun-bir kesintisiz app var gibi görünüyor.

Bu blanket.js eylem olduğunu:

image Şekil 4

image

Şekil 5

(Aslında üst "kapsamı etkinleştir" onay kutusunu tıklamanız gerekiyor [bkz: şekil 3] Bunu etkinleştirmek için.)

Şekilde vurgulanan satırlar 5 herhangi benim testleri tarafından yürütülen değil, Yani tam kapsama istiyorsanız idam etmelerine neden test hazırlamak gerekir..

Aşağıdaki adımları uygulayarak çalışma blanket.js olsun:

  1. Download http://blanketjs.org/.
  2. Projenize eklemek
  3. Test koşum sayfanızı güncelleştirin (Benim durumumda QuizUtil_test.html) aşağıdaki gibi:
    1. Başvuru kodu
    2. Süslemeleri, <komut dosyası> Bu şekilde başvuru:
    <komut dosyası türü= text/javascript"" src="QuizUtil.js" veri-kapak></komut dosyası>

Blanket.js kadar "gizli veri" özniteliğini seçer ve sihrini yok.  Qunit kanca, UI "kapsamı etkinleştir" seçeneği eklemek için güncelleştirir ve voila!

Özet (TL; DR)

Qunit test çalışmalarınızı yazmak için kullanın..

  • Download o
  • Projenize eklemek
  • Bir test koşum sayfa yazmak
  • Testlerinizi oluşturmak
    • Refactor kodunuzu test edilebilir olması için bir kısmını
    • Yaratıcı olun!  Çatlak gibi düşünüyorum, imkansız senaryoları ve zaten test.

Blanket.js kapsama sağlamak için kullanın.

  • Qunit çalıştığından emin olun
  • Blanket.js indirmek ve projenize eklemek
  • Test koşum sayfanıza ekleme:
    • Blanket.js bir başvuru ekleyin
    • Bir "gizli veri" özniteliğini ekleyin, <komut dosyası> etiket
  • Qunit testler.

Asla bunları daha önce yaptım ve bir avuç saat çalışan bazı temel şeyler vardı. 

Mutlu test!

</sonunda>

undefinedBenim blog abone.

Heyecan beni izleyin http://www.twitter.com/pagalvin