ماہانہ آرکائیو: جنوری 2014

جاوا سکرپٹ میں غریب آدمی کا کیشنگ

[TL;ڈاکٹر ورژن: اسینک کالز کے نتائج ذخیرہ کرنے کے لیے کوکیز کا استعمال; گزشتہ اسینک کالز کے نتائج فوری طور پر بدلہ اور پھر صفحہ-لوڈ کرنے کے بعد ان کا جواز دیں ۔]

میں SharePoint انٹرانیٹ کی ویب سائٹ پر ایک کلائنٹ کے لئے جو خصوصیات کام کر رہے ہوں, دوسری چیزوں کے درمیان, جس کا کے مینو اختیارات باقاعدہ پرانے مخصوص فہرست کے ذریعے کامیاب ہیں ایک سٹیلاید ثانوی نیویگیشن ۔  خیال ہے کہ گاہک کو متاثر کر رہا ہے یا اس کی طرف سے نکال کر باہر رکھا عالمی گشت سے متاثر ہونے کے بغیر "ان" کی سائٹ کا مینیو کنٹرول کرنے کے لئے ہو جاتا ہے.

(کوئی ایک سیوپ ہے جو بوجھ کچھ CSS اور جس بنیادی.. سائٹ کے رویے کے بارے میں تقریبا سب کچھ بدل کے لئے لیکن کسی اور پوسٹ کے لئے ہے کہ ایک HTML مسل کی طرف اشارہ شامل کرنے کے بارے میں ناقابل یقین حد تک تخریب کارانہ ہے)

اس خوبصورت سادہ کے لیے کوڈ:

  • لوڈنگ کی تکمیل اور مینیو اشیا باقی lists.asmx یا جو کچھ کا استعمال کرتے ہوئے کی ایک فہرست سے اپ لوڈ کرنے کے لیے کال کریں ایک اسینک بنانے کے لیے صفحہ کا انتظار کریں
  • استعمال کرتا ہے jQuery, پرزور طور پر ایک گروپ اگر بسانا <لی>والدین کے اندر کی <ST> (عیسائی پاندار کے مضمون اس ٹیکننقی کا ایک سادہ وضاحت کے لئے یہاں دیکھیں)
  • تمام وضع کاری کرنا سی ایس ایس کا استعمال
  • منافع!

ہر بار جب کسی ویب سائٹ کے صفحات میں سے ایک ٹوٹکے زخم داغ کے یہاں یہ ہے, اس صارف کے ویب براؤزر اشیا کی فہرست سے حاصل کرنے کے لئے حصول ہے ۔  ایک بار مکمل اور امتحانی دیو ہے مستحکم اور مکمل ہونے کی باتیں ثابت کر دیا ہے, اس کال غیر ضروری ہے سے زیادہ 99% وقت کے بعد مینیو شاذ و نادر ہی تبدیل کرتا ہے ۔  یہ بھی ایک عجیب UI اثر جو اس بہادر نئی دنیا میں ہائپر اجاای ویب سائٹس کی عام سی بات ہے ہے – صفحہ رانڈرس اور تبھی مینو بدلہ نہیں ۔  یہ جاٹٹری اور میرے خیال میں دسٹریکٹانگ ہے ۔  اور جاٹٹری. تو, کیسہ کاری ۔ 

میں نے منطق طرح ترمیم:

  • میں آخری یہ پڑھا کہ مینو پر مشتمل ہے براوزر میں کوکی کے لئے تلاش کریں
    • اگر پایا, یہ فوری طور پر بدلہ ۔  صفحہ کے لئے لوڈنگ کو ختم کرنے کے لئے انتظار نہیں کرنا ہے ۔  (آپ اثبات کریں کہ آپ HTML سامری یہاں رکھا جاتا ہے کی ضرورت ہے, لیکن یہ کام کرنے کے لئے مشکل نہیں ہے).
  • لوڈنگ کی تکمیل اور مینیو اشیا باقی lists.asmx یا جو کچھ کا استعمال کرتے ہوئے کی ایک فہرست سے اپ لوڈ کرنے کے لیے کال کریں ایک اسینک بنانے کے لیے صفحہ کا انتظار کریں
  • کیا خلاف کوکی کو ملا کا موازنہ کریں
    • اگر یہ مشابہ کرتا ہے, روک
    • ورنہ, استعمال کرتا ہے jQuery, پرزور طور پر ایک گروپ اگر بسانا <لی>کے میں ایک <ST>
  • تمام وضع کاری کرنا سی ایس ایس کا استعمال
  • منافع!

آپ میں سے کچھ کا کہنا ہے کہ کے لئے جا رہے ہیں, "ارے! چونکہ آپ کو مینیو ویسے بھی پڑھ رہے ہوں کوئی حقیقی کاچانگ یہاں پر چل رہا ہے ہر ایک بار."  اور آپ ٹھیک کہہ رہے ہو، میں کسی بھی قسم کا توڑ پیش کار نہیں دے رہا ہوں ۔  لیکن کال اسینک ہے اور صفحہ ابتدائی کے بعد ہوتا ہے کیونکہ HTML پایلتد مکمل طور پر راندرس, یہ "صارف کو زیادہ ذمہ دار محسوس کرتا ہے" ۔  مینو خوبصورت رانڈرس جتنا صفحہ بناتا ہے ۔  اگر تبدیلی مینیو, صارف ایک جاٹاری دوبارہ متوجہ مینیو کے لیے نشانہ بنا ہوا ہے, لیکن صرف اس ایک بار.

اس کیسہ کاری زیادہ مؤثر بنانے اور پیش کار کو ایک ہی وقت میں مدد کرنے کے کچھ طریقے ہیں:

  • قاعدہ "کوکی کیسہ" کم از کم کے لئے جائز ہے کہ میں ڈال دیا 24 گھنٹے اور بعض دیگر احاطۂ. ہے جب تک کے طور پر کوئی کوکی نہیں ختم, کوکی کیلئے مینیو سنیپشاٹ استعمال کرتے ہیں اور کبھی پیش کار مارا.

کہ سب کچھ ذہن میں ابھی آتے ہے اچھی طرح... :). 

اگر کسی شخص نے کسی ہوشیار خیالات یہاں ہے میں ان جان محبت.

اور آخر میں – اس ٹیکنالوجی کے لیے دیگر سامان استعمال کیا جا سکتا ہے ۔  یہ کلائنٹ کے صفحہ کوائف پر مبنی چیزوں کی ایک بڑی تعداد مختلف صفحات پر ہے ۔, ان میں سے بہت سے نسبتاً شاذ و نادر ہی تبدیل کرنا (ہفتے میں ایک بار یا مہینے میں ایک بار کی طرح).  اگر آپ کی فعالیت کے مخصوص علاقوں کو نشانہ بنانے, آپ ایک زیادہ ذمہ دار UI مواد مقامی کوکی ذخیرہ سے نکالنے اور فوری طور پر سرانجام دے سکتے ہیں ۔  یہاں تک کہ اگر آپ کو کوئی ادوار پیش کار محفوظ نہیں کر رہے ہیں یہ تیزی سے صارف کو محسوس کرتا ہے ۔  آپ کر سکتے ہیں کچھ حالات اور حملہ پر اس کوکی کی مقامی کیسہ کو توڑنے کے لیے فیصلہ کرتے ہوئے ادوار سے پیش کار محفوظ کریں ۔  یہ سب ساوشنال ہے اور ارٹزی کی چیزیں اور واقعی سب سے زیادہ مذاق :). 

</آخر>

undefinedاپنے بلاگ کو سبسکرائب کریں.

ٹویٹر پر مجھ پر عمل کریں http://www.twitter.com/pagalvin

کس طرح کرنے کے لئے: ایک دفتر کے لئے QUnit.js اور Blanket.js یونٹ کے ساتھ ٹیسٹ اور ٹیسٹ کوریج کی تشکیل 365 شیئرپوائنٹ اپلی کیشن

انٹرو

میں یونٹ ٹیسٹنگ کی تلاش کیا گیا ہے اور میں ایک نیا SharePoint اپلی کیشن پر دفتر میں SharePoint آن لائن کے لئے اپنے کام کے مطابق کوریج کے لیے جاوا سکرپٹ ٹیسٹ 365 سوٹ ہے.  واضح تحقیق راہوں کے نتیجے میں مجھے Qunit.js اور اس کے بعد دائیں, کے لئے Blanket.js.

قوناٹ یونٹ ٹیسٹ اپ سیٹ کریں اور انھیں ماڈیول میں گروپ ہوں ۔  ایک ماڈیول سے متعلق ٹیسٹ کو منظم کرنے کے لیے صرف ایک آسان طریقہ ہے ۔. (مجھے یقین ہے کہ میں اس کا مقصد کے طور پر استعمال کر رہا ہوں نہیں ہوں, لیکن یہ میرے لئے اب تک چھوٹے سے سیٹ کے ٹیسٹ میں ابھی تک جن کی وضاحت کے ساتھ کام کر رہا ہے).

Blanket.js قوناٹ کے ساتھ ضم کرنا شروع کردیا اور اس نے مجھے جاوا سکرپٹ کی اصل لائنوں تھے – اور زیادہ اہم بات یہ ہے – دراصل خون کے ٹیسٹ چلانے کے دوران ہلاک کردیا گیا نہیں دکھائے گا ۔  یہ 'کوریج' ہے، جو نافذ سلسلے کی طرف سے ٹیسٹ کا احاطہ ہیں جبکہ دوسروں نہیں ہیں.

اچھا ٹیسٹ کیس اپ سیٹ اور منظر کاری کے کوریج کے درمیان, ہم ہمارے کوڈ نقائص پوشیدہ ہے کہ خطرے کو کم کر سکتے ہیں ۔  اچھا ٹائمز.

قوناٹ

آپ اپنے Visual Studio ہے تو یہ اینٹی منصوبے سیٹ اپ, جاوا سکرپٹ پیکیج سے ڈاؤن لوڈ کرنے کی طرف سے شروع http://qunitjs.com.  جاوا اسکرپٹ اور متعلقہ CSS آپ حل کرنے کے لئے شامل کریں.  اس طرح میرا لگتا ہے:

image

اعداد و شمار 1

آپ دیکھ سکتے ہیں کے طور پر, تھا نہیں استعمال کرتے ہیں 1.13.0 اس وقت میں اس بلاگ پوسٹ نے لکھا. ڈاؤن لوڈ، اتارنا اور سی ایس ایس فائل کا اضافہ کرنا نہ بھولیں.

کہ جس طرح سے, اگلا قدم ٹیسٹ رخت کی کسی قسم کی تخلیق اور اس کی قوناٹ بٹ کے حوالہ کرنا ہے ۔  میں افعال کا ایک گروپ میں "جیسے دکھایا گیا QuizUtil_test.html" کہا جاتا ہے ایک HTML صفحہ پیدا کیا "QuizUtil.js" کہا جاتا ہے ایک سکرپٹ فائل میں جانچ کر رہا ہوں:

image اعداد و شمار 2

کوڈ یہاں ہے ۔:

<!دوکٹیپی ایچ ٹی ایم ایل>
<ایچ ٹی ایم ایل xmlns"http =://www.w3.org/1999/xhtml">
<سر>
    <عنوان>قویزوٹال ٹیسٹ قوناٹ کے ساتھ</عنوان>
    <لنک ر"قرطاس طرز =" href کی=".. /CSS/qunit-1.13.0.css" />
    <سکرپٹ قسممتن/جاوا سکرپٹ"=" ایسآرسی="QuizUtil.js" کوائف-سرورق></سکرپٹ>
    <سکرپٹ کی قسم ="متن/جاوا سکرپٹ" ایسآرسی ="قوناٹ-1.13.0.js"></سکرپٹ>
    <سکرپٹ کی قسم ="متن/جاوا سکرپٹ" ایسآرسی ="blanket.min.js"></سکرپٹ>

    <سکرپٹ>
        ماڈیول("گیٹادفروملوکوپ");
        ٹیسٹ("قیزوٹال گیٹادفروملوکوپفیلڈ", تقریب () {
            تھا گودوالی = "1;#پال Galvin";

            برابر(گیٹادفروملوکوپفیلڈ(گودوالی) + 1, 2), "کی شناخت [" + گودوالی + "] + 1 2 ہونا چاہیے";
            برابر(گیٹادفروملوکوپفیلڈ(غیر وضاحتی), غیر وضاحتی, "بے وضاحت ان پٹ دلیل غیر وضاحتی نتیجہ واپس کردینا چاہیے ۔");
            برابر(گیٹادفروملوکوپفیلڈ(""), غیر وضاحتی, "خالی ان پٹ دلیل ایک غیر وضاحتی قدر کو واپس کرنا چاہئے ۔");
            برابر(گیٹادفروملوکوپفیلڈ("gobbledigood3-تق;دکون ادا;سکفجع sdjfbvubvqrubqer0873407t534piutheqw;vn"), غیر وضاحتی,"ہمیشہ ایک نتیجہ متحول سیار سالم کو واپس کردینا چاہیے");
            برابر(گیٹادفروملوکوپفیلڈ("2;#کچھ دوسرے شخص"), "2", "پڑتال کر رہا ہے [2;#کچھ دوسرے شخص].");
            برابر(گیٹادفروملوکوپفیلڈ("9834524;#طویل قدر"), "9834524", "بڑی قدر ٹیسٹ ہے ۔");
            نوٹیقال(گیٹادفروملوکوپفیلڈ("5;#کسی کو بھی", 6), 6, "ایک نوٹیقال کی جانچ (5 مساوی نہیں 6 اس کے لیے نمونہ: [5;#کسی کو بھی]");

        });

        ماڈیول("ہٹملیسکاپی");
        ٹیسٹ("قیزوٹال ہٹملیسکاپی()", تقریب () {
            برابر(ہٹملیسکاپی("<"), "&لیفٹیننٹ;", "ایک کم آپریٹر سے فرار ('<')");
            برابر(ہٹملیسکاپی("<دو کلاس =  "someclass">کچھ متن</div>"), "&لیفٹیننٹ;دو کلاس =&quot;سومیکلاسس&quot;&GT;کچھ متن&لیفٹیننٹ;/div&GT;", "زیادہ پیچیدہ ٹیسٹ سلک ہے ۔");
        });

        ماڈیول("گیٹڈیٹیزکامل");
        ٹیسٹ("قیزوٹال گیٹڈیٹیزکامل()", تقریب () {
            برابر(گیٹڈیٹیزکامل(نئے تاریخ("12/31/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]");
            برابر(گیٹودایاسکیمل(), گیٹڈیٹیزکامل(نئے تاریخ()), "گیٹودیاسکیمل() گیٹڈیٹیزکامل کے برابر کرنا چاہیے(نئی تاریخ())");
            برابر(گیٹڈیٹیزکامل("بکواس کی قدر"), غیر وضاحتی, "بکواس قدر کی تاریخ حاصل کرنے کے لئے کوشش کرتے ہیں ۔");
            برابر(گیٹڈیٹیزکامل(غیر وضاحتی), غیر وضاحتی, "کی تاریخ حاصل کرنے کی کوشش کریں [غیر وضاحتی] تاریخ ہے ۔");
        });

        ماڈیول("گیٹپآرامیٹربینمی");
        ٹیسٹ("قیزوٹال گیٹپآرامیٹربینمی (سے طلب سلک)", تقریب () {
            برابر(گیٹپآرامیٹربینمی(غیر وضاحتی), غیر وضاحتی, "حاصل کرنے کی کوشش کریں غیر وضاحتی پیرامیٹر چاہیے واپس بے وضاحت ہے ۔");
            برابر(گیٹپآرامیٹربینمی("موجود نہیں"), غیر وضاحتی, "جب ہم جانتے ہیں کہ پیرامیٹر موجود نہیں پیرا میٹر قدر حاصل کرنے کے لئے کوشش کرتے ہیں ۔");

        });

        ماڈیول("کوکیز");
        ٹیسٹ("قیزوٹال مختلف کوکی افعال ہیں ۔", تقریب () {
            برابر(سیٹکووکی("ٹیسٹ", "1", -1), گیٹکوکیوالی("ٹیسٹ"), "حاصل میں سیٹ کوکی کام کرنا چاہئے ۔");
            برابر(سیٹکووکی("انیکووکی", "1", -1), سچ, "ایک جائز کھانا پکانے کی سیٹنگ 'سچ' واپس کردینا چاہیے ۔");
            برابر(سیٹکووکی("پاگل کوکی نام !@#$%"%\^&*(()?/><.,", "1", -1), سچ, "ایک برا کوکی نام سیٹ 'غلط' واپس کردینا چاہیے ۔");
            برابر(سیٹکووکی(غیر وضاحتی, "1", -1), غیر وضاحتی, "کوکی کے نام کے طور پر غیر وضاحتی گزرنے والے ہیں ۔");
            برابر(گیٹکوکیوالی("موجود نہیں"), "", "کوکی ٹیسٹ موجود نہیں ۔");
        });

    </سکرپٹ>
</سر>
<جسم>
    <div ID"قوناٹ ="></div>
    <div ID"قوناٹ-حقیقت ="></div>

</جسم>
</ایچ ٹی ایم ایل>

یہاں کئی چیزیں ہیں ۔:

  1. حوالہ میری کوڈ (QuizUtil.js)
  2. حوالہ Qunity.js
  3. کچھ ماڈیول کی تعریف (گیٹادفروملوکوپ, کوکیز, اور دوسروں کو)
  4. رکھ رہا ہے ایک <div> جس کا ID "قوناٹ" ہے.

پھر, میں صرف اس صفحے کے اوپر ھیںچو اور آپ کو کچھ اس طرح:

image

اعداد و شمار 3

اگر آپ کو سب سے اوپر کے پار دیکھو, آپ کے پاس کچھ اختیارات ہیں, دو دلچسپ ہیں:

  • منظور ٹیسٹ چھپائیں: بہت واضح ہے ۔  آپ کی آنکھ صرف دیکھیں مسئلہ کے علاقوں اور بے ترتیبی کی ایک نہیں بہت مدد کر سکتے ہیں.
  • ماڈیول: (ڈراپ کریں): یہ امتحان آپ چاہتے ہیں صرف ان گروپوں تک خون کے ٹیسٹ فلٹر کریں گے.

خون کے ٹیسٹ لئے خود – چند تبصرے:

  • یہ آپ کو پہلی جگہ میں ٹیستبلی ہے کہ آپ کوڈ لکھنے کے لئے کی ضرورت ہے کہ بغیر کہہ جاتا ہے ۔  آلے کا استعمال کرتے ہوئے اس نظم و ضبط نافذ کرنے میں مدد کر سکتے ہیں. مثال کے طور پر, میں ایک فعل "گیٹودیاسکیمل کہا جاتا تھا ۔()".  یہ کوئی ان پٹ دلیل لیتا ہے کیونکہ یہ بہت ٹیستبلی نہیں ہے اور اس کے لئے مساوات کی جانچ کے لیے, ہم مسلسل حالیہ تاریخ کی عکاسی کے لئے ٹیسٹ کوڈ کو اپ ڈیٹ کرنے کی ضرورت ہو گی ۔  میں اس کی طرف سے ڈیٹا ہے ان پٹ پیرا میٹر اضافہ کر رہا ہے پھر آج کی تاریخ کامل شکل میں جب چاہوں کی حالیہ تاریخ گزر ریفیکٹور.
  • اس کے اپنے ٹیسٹ قوناٹ فریم ورک دستاویزات اور کافی مضبوط لگتا ہے ۔  اس ٹیسٹنگ کے لئے مساوات کی طرح آسان سے کام کرسکتے ہیں اور بھی ایجیکس طرز کالوں کے لئے معاونت موجود ہے ۔ (دونوں "اصلی" یا ٹھٹھوں اپنے پسندیدہ نقال استعمال کرتے ہوئے ۔).
  • اس عمل کے ذریعے جا رہا بھی آپ ایج مقدمات – کیا "بے وضاحت کے ساتھ" ہوتا ہے کے ذریعے پر غور کرنے پر مجبور یا صفر ایک تقریب میں گزر رہا ہے ۔  اسے یہ ان صورت حالوں کے باہر کی جانچ کے لیے مر سادہ بناتا ہے ۔  اچھی چیزیں.

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. سجانے آپ <سکرپٹ> اس طرح حوالہ:
    <سکرپٹ قسممتن/جاوا سکرپٹ"=" ایسآرسی="QuizUtil.js" کوائف-سرورق></سکرپٹ>

Blanket.js چنتا ہے "کوائف-کور" کے وصف اور اس جادو کرتا ہے ۔  یہ قوناٹ میں کُنڈے, "اہل کوریج" کے اختیار کے اضافے کے لیے UI اپ ڈیٹس اور voila!

کاروائی کا خلاصہ (TL; ڈاکٹر)

اپنے ٹیسٹ واقعات لکھنے کے لیے قوناٹ استعمال کریں.

  • یہ ڈاؤن لوڈ، اتارنا
  • اس کے لیے اپنے منصوبے کا ا ضافہ کریں
  • جانچ صفحہ رخت لکھتے ہیں ۔
  • اپنے ٹیسٹ بنائیں
    • ٹیستبلی جا اپنے ضابطہ کی کچھ ریفیکٹاور
    • تخلیقی رہو!  پاگل کا خیال, ناممکن صورت حالوں اور انہیں بہرصورت جانچ.

کوریج کو یقینی بنانے کے لیے blanket.js استعمال کریں

  • اثبات کریں کہ قوناٹ کام کر رہا ہے
  • Blanket.js ڈاؤن لوڈ، اتارنا اور اسے اپنے اس منصوبے کے لیے ا ضافہ کریں
  • یہ اپنا ٹیسٹ رخت صفحہ کا ا ضافہ کریں:
    • Blanket.js کا ایک حوالہ کا ا ضافہ کریں
    • ایک "کوائف-کور" کے وصف کو شامل کریں آپ <سکرپٹ> ٹیگ
  • آپ قوناٹ ٹیسٹ چلانے کے.

میں کبھی کسی بھی اس سے پہلے کی کیا اور کچھ ابتدائی چیزیں گھنٹے کی ایک مٹھی بھر میں کام کر رہے تھے ۔ 

خوش ٹیسٹنگ!

</آخر>

undefinedاپنے بلاگ کو سبسکرائب کریں.

ٹویٹر پر مجھ پر عمل کریں http://www.twitter.com/pagalvin