المحفوظات الشهرية: كانون الثاني/يناير 2014

الرجل الفقير التخزين المؤقت في جافا سكريبت

[ليرة تركية;إصدار الدكتور: استخدام ملفات تعريف الارتباط لتخزين نتائج async المكالمات; تقديم نتائج الماضي async المكالمات فورا وثم التحقق من صحة لهم بعد تحميل الصفحة.]

لقد تم العمل على موقع SharePoint على الإنترانت لعميل تلك الميزات, أمور أخرى, ملاحة ثانوية منمنمة خيارات القائمة التي تتم إدارتها عن طريق قائمة مخصصة قديمة عادية.  والفكرة أن العميل يحصل على التحكم في القائمة موقع "بهم" دون التي تؤثر أو تتأثر الملاحة العالمية التي وضعت من قبل أنه.

(هناك شيء هدامة بشكل لا يصدق حول إضافة سوب الذي يشير إلى ملف HTML الذي يحمل بعض المغلق وشبيبة أساسا تغيير كل شيء تقريبا عن سلوك الموقع... ولكن هذا وظيفة أخرى)

التعليمات البرمجية لهذا بسيطة جداً:

قرحة موضعية هنا أن كل مرة أي شخص عدد مرات تصفح الموقع إحدى الصفحات في الموقع, مستعرض ويب المستخدم هو الوصول إلى الحصول على العناصر من القائمة.  بمجرد اكتمال ديف والتجارب أثبتت أن تكون الأمور مستقرة وإكمال, هذه الدعوة لا لزوم لها أكثر من 99% الوقت منذ القائمة، ونادراً ما يتغير.  كما أنها تؤثر على واجهة مستخدم غريب هو أمر شائع في هذا العالم الجديد الشجاع من فرط أجاكسي مواقع ويب--يجعل الصفحة وفقط ثم يجعل القائمة.  أنها متوترة وتشتيت في رأيي.  ومتقطعة. حتى, التخزين المؤقت. 

تم تعديل المنطق thusly:

  • ابحث عن ملف تعريف ارتباط في المستعرض الذي يحتوي على القائمة حسب آخر قراءته
    • إذا وجدت, جعله فورا.  لا تنتظر حتى انتهاء تحميل الصفحة.  (كنت بحاجة للتأكد من أن يتم وضع استراتيجيا HTML الخاص بك هنا, ولكن ليس من الصعب القيام به).
  • انتظر حتى الانتهاء من تحميل وجعل async الكلمة لتحميل عناصر القائمة من قائمة استخدام بقية أو lists.asmx أو أيا كان الصفحة
  • قارن ما حصلت ضد ملف تعريف الارتباط
    • إذا كان يتطابق, وقف
    • خلاف ذلك, باستخدام jQuery, ملء حفنة بشكل حيوي إذا <لي>الشعبية في <إبري>
  • استخدام CSS للقيام بكافة التنسيقات
  • الربح!

البعض منكم سوف يقول, "يا! هناك لا حقيقية من التخزين المؤقت يحدث هنا منذ كنت تقرأ القائمة على أي حال كل مرة واحدة.”  وكنت على حق--أنا لا إعطاء الخادم أي نوع من كسر.  ولكن نظراً لأن هذه الدعوة هو عدم التزامن ويحدث بعد الصفحة الأولى حمولة HTML يجعل تماما, أنه "يشعر" أكثر استجابة للمستخدم.  القائمة يجعل جميلة بقدر ما يعتمد الصفحة.  وإذا حدث القائمة للتغيير, يخضع المستخدم لإعادة رسم متقطعة من القائمة, لكن هذا مرة واحدة فقط.

وهناك بعض الطرق جعل ذاكرة التخزين المؤقت هذا أكثر فعالية ويساعد الخادم في نفس الوقت:

  • وضعت في قاعدة أن "التخزين المؤقت لملف تعريف الارتباط" صالحة لحد أدنى من 24 ساعات أو بعض الأخرى تحديد إطار زمني. ما دام هناك لا كوكي منتهية الصلاحية, استخدام القائمة لقطة في ملف تعريف الارتباط وابدأ ضرب الخادم.

حسنا.. هذا هو كل ما يأتي إلى الذهن الآن :). 

إذا كان أي شخص لديه أي أفكار ذكية هنا أنا أحب أن أعرف منهم.

وأخيراً – ويمكن استخدام هذا الأسلوب لغيرها من الأشياء.  صفحة هذا العميل يحتوي على عدد من الأمور المبنية على البيانات في صفحات مختلفة, العديد منهم تغيير نسبيا نادراً ما (مثل مرة كل أسبوع أو مرة كل شهر).  إذا كنت تستهدف مجالات محددة من الوظائف, يمكنك إعطاء واجهة مستخدم أكثر استجابة بسحب المحتوى من مخزن ملف تعريف الارتباط المحلي والتقديم مباشرة.  تشعر أنها أسرع للمستخدم حتى لو كنت لا تحفظ الخادم أي دورات.  يمكنك يمكن حفظ دورات الملقم قبل اتخاذ قرار بشأن بعض الشروط والمشغلات إبطال ذاكرة التخزين المؤقت المحلية ملف تعريف الارتباط هذا.  وهذا كل شيء الظرفية والأشياء ارتسي وحقاً أكثر متعة :). 

</نهاية>

undefinedالاشتراك في بلادي بلوق.

اتبعني على التغريد في http://www.twitter.com/pagalvin

كيفية: تكوين اختبار وحدة، واختبار التغطية مع QUnit.js و Blanket.js لمكتب 365 التطبيق SharePoint

مقدمة

لقد تم استكشاف اختبار وحدة، واختبار التغطية لجافا سكريبت كما عمل في تطبيق SharePoint جديد ل SharePoint على الإنترنت في المكتب 365 جناح.  مسارات البحوث الواضحة دفعتني إلى Qunit.js والحق بعد ذلك, إلى Blanket.js.

كنت اسمحوا لي أن إعداد اختبارات الوحدة، ومجموعة منهم في الوحدات النمطية.  وحدة نمطية مجرد وسيلة بسيطة تنظيم الاختبارات ذات الصلة. (لست متأكداً وأنا استخدامه كما يقصد بها, ولكن أنها تعمل بالنسبة لي حتى الآن مع مجموعة صغيرة من الاختبارات التي قمت بتعريف حتى الآن).

Blanket.js يتكامل مع كنت، وأنها سوف تظهر لي خطوط جافا سكريبت الفعلية التي كانت – والأهم من ذلك--لم ينفذ فعلياً أثناء تشغيل الاختبارات.  هذا "تغطية" – خطوط أعدم مشمولة بالاختبار في حين أن البعض الآخر لا.

بين إعداد حالات الاختبار الجيد وعرض التغطية, ونحن يمكن أن تقلل من خطر أن قانوننا قد مخفي العيوب.  الأوقات الجيدة.

كنت

على افتراض لديك الخاص بك Visual Studio إعداد المشروع, ابدأ بتحميل حزمة جافا سكريبت من http://qunitjs.com.  إضافة جافا سكريبت والمغلق المقابلة إلى الحل الخاص بك.  وهذا يشبه الألغام:

image

الشكل 1

كما ترون, لقد تم استخدام 1.13.0 وفي الوقت كتبت هذا بلوق وظيفة. لا تنسى للتحميل وإضافة ملف CSS.

أن الخروج من هذا الطريق, والخطوة التالية هي لإنشاء نوع من نظام الاختبار ومرجع بت كنت.  أنا اختبار مجموعة من الدالات في ملف نصي يسمى "QuizUtil.js" لذلك أنا خلقت صفحة HTML يسمى "QuizUtil_test.html" كما هو موضح:

image الشكل 2

هنا هو رمز:

<!DOCTYPE html>
<html xmlns= "http://www.w3.org/1999/xhtml">
<رئيس>
    <العنوان>اختبار كويزوتيل مع كنت</العنوان>
    <وصلة rel= "أوراق الأنماط" href="../CSS/qunit-1.13.0.css" />
    <البرنامج النصي نوع= "نص/جافا سكريبت" src="QuizUtil.js" تغطية البيانات></البرنامج النصي>
    <البرنامج النصي نوع ="النص/جافا سكريبت" src ="كنت 1.13.0.js"></البرنامج النصي>
    <البرنامج النصي نوع ="النص/جافا سكريبت" src ="blanket.min.js"></البرنامج النصي>

    <البرنامج النصي>
        الوحدة النمطية("جيتيدفروملوكوب");
        اختبار(كويزوتيل جيتيدفروملوكوبفيلد "", الدالة () {
            فأر جودفالوي = "1;#بول غالفين";

            تساوي(جيتيدفروملوكوبفيلد(جودفالوي) + 1, 2), "معرف [" + جودفالوي + "] + 1 وينبغي أن تكون 2";
            تساوي(جيتيدفروملوكوبفيلد(غير معرف), غير معرف, وسيطة الإدخال غير معرفة "يجب إرجاع نتيجة غير معروف.");
            تساوي(جيتيدفروملوكوبفيلد(""), غير معرف, "وسيطة الإدخال فارغ يجب إرجاع قيمة غير معرفة.");
            تساوي(جيتيدفروملوكوبفيلد("تي إتش كيو gobbledigood3;أدا دكفن;sdjfbvubvqrubqer0873407t534piutheqw سكفجا;vn"), غير معرف,"ينبغي دائماً العودة نتيجة قابلة لتحويل إلى عدد صحيح");
            تساوي(جيتيدفروملوكوبفيلد("2;#شخص آخر"), "2", "التحقق [2;#شخص آخر].");
            تساوي(جيتيدفروملوكوبفيلد("9834524;#قيمة طويلة"), "9834524", "اختبار قيمة كبيرة.");
            نوتيكوال(جيتيدفروملوكوبفيلد("5;#أي شخص", 6), 6, "اختبار نوتيكوال (5 لا يساوي 6 لهذه العينة: [5;#أي شخص]");

        });

        الوحدة النمطية("هتمليسكابي");
        اختبار(كويزوتيل هتمليسكابي "()", الدالة () {
            تساوي(هتمليسكابي("<"), "&الملازم;", "الهروب من أقل من المشغل ('<')");
            تساوي(هتمليسكابي("<div class =  "someclass">بعض النص</div>"), "&الملازم;div class =&quot;سوميكلاس&quot;&gt;بعض النص&الملازم;/div&gt;", "سلسلة اختبار أكثر تعقيداً.");
        });

        الوحدة النمطية("جيتداتيسكامل");
        اختبار(كويزوتيل جيتداتيسكامل "()", الدالة () {
            تساوي(جيتداتيسكامل(الجديد التاريخ("31/12/2013")), "2013-12-31T:00:00:00", "اختبار تاريخ جد المبرمج: [12/31/2013]");
            تساوي(جيتداتيسكامل(الجديد التاريخ("01/05/2014")), "2014-01-05T:00:00:00", "اختبار تاريخ جد المبرمج: [01/05/2014]");
            تساوي(جيتداتيسكامل(الجديد التاريخ("01/31/2014")), "2014-01-31T:00:00:00", "اختبار تاريخ جد المبرمج: [01/31/2014]");
            تساوي(جيتوداياسكامل(), جيتداتيسكامل(الجديد التاريخ()), "جيتوداياسكامل() وينبغي أن تساوي جيتداتيسكامل(تاريخ جديد())");
            تساوي(جيتداتيسكامل("هراء القيمة"), غير معرف, "في محاولة للحصول على تاريخ قيمة هراء.");
            تساوي(جيتداتيسكامل(غير معرف), غير معرف, "في محاولة للحصول على موعد [غير معرف] تاريخ.");
        });

        الوحدة النمطية("جيتباراميتيربينامي");
        اختبار(كويزوتيل جيتباراميتيربينامي " (من سلسلة الاستعلام)", الدالة () {
            تساوي(جيتباراميتيربينامي(غير معرف), غير معرف, "في محاولة للحصول على المعلمة غير محددة ينبغي العودة غير معرف.");
            تساوي(جيتباراميتيربينامي("غير موجود"), غير معرف, "في محاولة للحصول على قيمة المعلمة عندما نعلم المعلمة غير موجود.");

        });

        الوحدة النمطية("ملفات تعريف الارتباط");
        اختبار("كويزوتيل وظائف مختلفة في ملف تعريف الارتباط.", الدالة () {
            تساوي(setCookie("اختبار", "1", -1), جيتكوكيفالوي("اختبار"), "ينبغي العمل بالحصول على ملف تعريف ارتباط تعيين.");
            تساوي(setCookie("أنيكوكي", "1", -1), صحيح, "الإعداد الطبخ صالحة ينبغي العودة' صحيح '.");
            تساوي(setCookie("اسم ملف تعريف الارتباط مجنون !@#$%"%\^&*(()?/><.,", "1", -1), صحيح, "تحديد اسم ملف تعريف ارتباط سيئة ينبغي العودة' false '.");
            تساوي(setCookie(غير معرف, "1", -1), غير معرف, "تمرير معرف كاسم ملف تعريف الارتباط.");
            تساوي(جيتكوكيفالوي("غير موجود"), "", "لا يوجد ملف تعريف الارتباط اختبار.");
        });

    </البرنامج النصي>
</رئيس>
<الهيئة>
    <div معرف= "كنت"></div>
    <div معرف= "كنت لاعبا أساسيا"></div>

</الهيئة>
</html>

وهناك العديد من الأمور التي تحدث هنا:

  1. الرجوع إلى قانون بلدي (QuizUtil.js)
  2. الرجوع إلى Qunity.js
  3. تعريف بعض الوحدات النمطية (جيتيدفروملوكوب, ملفات تعريف الارتباط, وآخرون)
  4. وضع <div> هو له معرف "كنت".

ثم, أنا مجرد سحب هذه الصفحة، ويمكنك الحصول على شيء من هذا القبيل:

image

الشكل 3

إذا قمت بالبحث عبر الجزء العلوي, لديك عدد قليل من الخيارات, اثنان منها مثيرة للاهتمام:

  • إخفاء اجتازوا اختبارات: واضحة جداً.  يمكن أن تساعد عينيك فقط انظر مجالات المشاكل، وليس هناك الكثير من الفوضى.
  • الوحدة النمطية: (قائمة منسدلة): وهذا سوف تصفية الاختبارات وصولاً إلى مجرد تلك المجموعات من الاختبارات التي تريد.

أما بالنسبة للاختبارات أنفسهم – عدد قليل من التعليقات:

  • غنى عن القول أن كنت بحاجة لكتابة التعليمات البرمجية الخاصة بك مثل أن قابل للاختبار في المقام الأول.  باستخدام الأداة يمكن أن تساعد في إنفاذ هذا الانضباط. وعلى سبيل المثال, كان لي وظيفة تسمى "جيتوداياسكامل()”.  هذه ليست قابلة للاختبار جداً نظراً لأنه يأخذ لا وسيطة الإدخال، واختباره للمساواة, سوف نحتاج إلى استمرار تحديث التعليمات البرمجية الاختبار يعكس التاريخ الحالي.  إعادة بناء فإنه عن طريق إضافة معلمة إدخال بيانات ثم تمرير التاريخ الحالي عندما أريد تاريخ اليوم في تنسيق CAML.
  • إطار كنت الوثائق الخاصة الاختبارات ويبدو أنها قوية جداً.  فإنه يمكن القيام بأشياء بسيطة مثل اختبار للمساواة وأيضا الدعم لاستدعاءات أسلوب أجاكس (استخدام "حقيقية" أو سخر كل مستهزئ المفضلة الخاصة بك).
  • الذهاب من خلال هذه العملية أيضا قوات كنت أعتقد من خلال الحالات الحافة – ما يحدث مع "غير معرف" أو null يتم تمريرها إلى دالة.  فإنه يجعل من القتلى بسيطة لاختبار هذه السيناريوهات خارجاً.  الأشياء الجيدة.

التغطية مع Blanket.js

ويكمل Blanket.js كنت بتتبع الخطوط الفعلية من التعليمات البرمجية التي تنفذ أثناء تشغيل الاختبارات الخاصة بك.  أنه يدمج الحق في كنت حتى رغم أنها تطبيق كاملة منفصلة, أنه يلعب لطيف--أنها حقاً تبدو وكأنها واحدة من التطبيق السلس.

وهذا هو blanket.js في العمل:

image الشكل 4

image

الشكل 5

(لديك فعلا انقر فوق خانة الاختيار "تمكين التغطية" في الجزء العلوي [انظر الشكل 3] لتمكين هذا.)

الخطوط المميزة في الشكل 5 لم يتم تنفيذها قبل أي من بلدي التجارب, لذا تحتاج إلى وضع اختبار الذي تسبب لهم بإعدام إذا أريد تغطية كاملة.

الحصول على blanket.js العمل باتباع الخطوات التالية:

  1. تحميل البرنامج من http://blanketjs.org/.
  2. إضافته إلى المشروع الخاص بك
  3. تحديث الصفحة مفعل الاختبار الخاصة بك (QuizUtil_test.html في حالتي) كما يلي:
    1. الإشارة رمز
    2. تزيين الخاص بك <البرنامج النصي> إشارة من هذا القبيل:
    <البرنامج النصي نوع= "نص/جافا سكريبت" src="QuizUtil.js" تغطية البيانات></البرنامج النصي>

Blanket.js تلتقط السمة "البيانات--الغطاء"، ولا عن السحر.  هوكس في كنت, تحديث واجهة المستخدم لإضافة الخيار "تمكين التغطية" وويلا!

ملخص (ليرة تركية; الدكتور)

كنت استخدامها كتابة حالات الاختبار الخاصة بك.

  • تحميل البرنامج
  • إضافته إلى المشروع الخاص بك
  • كتابة صفحة مفعل الاختبار
  • إنشاء الاختبارات الخاصة بك
    • إعادة بناء التعليمات البرمجية بعض التعليمات البرمجية الخاصة بك تكون قابلة للاختبار
    • كن مبدعاً!  أعتقد أن من الجنون, سيناريوهات مستحيلة واختبار لهم على أي حال.

استخدم blanket.js لضمان التغطية

  • تأكد من أن كنت تعمل
  • تحميل blanket.js وإضافته إلى المشروع الخاص بك
  • إضافة إلى صفحة مفعل الاختبار الخاصة بك:
    • إضافة مرجع إلى blanket.js
    • إضافة سمة "بيانات--غطاء" إلى الخاص بك <البرنامج النصي> العلامة
  • تشغيل الاختبارات كنت الخاصة بك.

ابدأ أنا لم أي من هذا من قبل، وكان بعض الأشياء البدائية تعمل في عدد قليل من الساعات. 

اختبار سعيدة!

</نهاية>

undefinedالاشتراك في بلادي بلوق.

اتبعني على التغريد في http://www.twitter.com/pagalvin