الشفرة

طعم من القهوة (الجزء 2)

في الجزء الاول من هذه المقالة حول CoffeeScript ، رأيت قدراته الأساسية ؛ ولكن دعونا نكون صادقين ، في معظم الوقت نستخدم مكتبة jQuery لمساعدتنا في كتابة جافا سكريبت لدينا وما أظهرته لك في الجزء الأول كان مجرد جافا سكريبت الفانيلا.

في هذا الجزء سننضم إلى CoffeeScript و LocalStorage و jQuery لإنشاء مدير اتصال بسيط حيث يمكننا حفظ رقم شخص ما واسمه وكذلك التحقق مما إذا كان هذا الشخص صديقًا ، وبمساعدة LocalStorage سيحافظ مدير جهات الاتصال هذا على جهات الاتصال الخاصة بك عند تحديث صفحتك.

يمكنك رؤية العرض التوضيحي لما سننشئه في هذا التجريبي أنا بنيت.

HTML

كما رأيته في العرض التوضيحي ، سيكون HTML الخاص بنا هو النموذج وخاليًا بسيطًا

    التي سنملؤها لاحقًا بالأسماء والأرقام:

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

      القهوة

      الآن سوف ندخل في أفضل جزء من هذا المقال: نتحدث عن CoffeeScript و jQuery معًا ، وهما أداتان تم إجراؤهما لجعل تطوير جافا سكريبت الخاص بنا أبسط وأكثر إنتاجية.

      لنفكر في ما نريده أن يفعله هذا التطبيق بنقاط قبل الشفرة:

      • إضافة فئة التحقق إذا تم تحديد خانة الاختيار وإزالتها إذا لم يكن؛
      • تحقق من وجود نقرة على زر الإرسال ؛
      • الحصول على قيم العدد والاسم ؛
      • ضع هذه القيم على صفحتنا.
      • إضافة كافة الأسماء والأرقام إلى LocalStorage؛
      • حذف كل شيء كتبناه في النموذج ؛
      • منع تقديم النموذج ؛
      • قراءة وعرض أي بيانات محفوظة في LocalStorage.

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

      $('#friend').click -> $(this).toggleClass 'checked'

      الشيء التالي الذي نحتاج إليه هو التحقق من وجود نقرة على زر "إرسال" وتخزين بعض المتغيرات التي سنحتاج إليها في المستقبل: 

      $('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()

      في هذه الخطوة حددنا وظيفتنا والمتغيرات التي نحتاجها فيما بعد ، يحمل متغير ul قائمة غير مرتبة تحتوي على جميع الأسماء والأرقام وسيخزن الثانيان ما نكتبه على المدخلات.

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

      if $('#friend').hasClass 'checked'$(ul).prepend '
    • Name: ' + name + '
       Number: ' + number + '
      • 'else$(ul).prepend '
    • Name: ' + name + ' 
      Number: ' + number + '
      • '

      قاعدة تطبيقنا جاهزة ولكن إذا أعدت تحميل الصفحة سترى أن جميع الأرقام قد اختفت ، لذلك نحن بحاجة إلى إضافة محتويات الأرقام إلى LocalStorage وسنطلق عليها أسماء جهات الاتصال: 

      localStorage.setItem 'contacts', $(ul).html()

      ما نقوم به هو تسمية ما نريد حفظه أولاً ، ثم بعد الفاصلة ، نعلن القيمة المراد حفظها. في هذه الحالة ، سنحفظ محتويات القائمة غير مرتبة.

      باستخدام هذا السطر ، لدينا جميع الأرقام والأسماء في LocalStorage ، لذا دعنا نضيف اللمسات الأخيرة إلى الوظيفة عن طريق إعادة تعيين النموذج ثم إرجاع false لضمان عدم إعادة تحميل الصفحة: 

      $("form")[0].reset()return false

      اكتملت المهمة الآن وكل ما نحتاج إلى القيام به الآن هو التحقق مما إذا كان لدينا شيء ما في Localstorage مع اسم جهات الاتصال وإذا كنا بحاجة فقط إلى وضع ذلك على الصفحة: 

      if localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'

      كل ما نقوم به هو التحقق من محتويات هذا العنصر ثم وضعها في الصفحة. مع هذه اللمسة الأخيرة ، يتم تنفيذ مدير الاتصال الصغير لدينا ، وكان رمز CoffeeScript الكامل المستخدم: 

      $('#friend').click -> $(this).toggleClass 'checked'$('#submit').click ->ul = $('#numbers')number = $('#number').val()name = $('#name').val()if $('#friend').hasClass 'checked'$(ul).prepend '
    • Name: ' + name + '
       Number: ' + number + '
      • 'else$(ul).prepend '
    • Name: ' + name + ' 
      Number: ' + number + '
      • 'localStorage.setItem 'contacts', $(ul).html()$("form")[0].reset();return falseif localStorage.getItem 'contacts'$('#numbers').html localStorage.getItem 'contacts'

      وإذا قمنا بتشغيل هذا الكود من خلال المحول البرمجي ، فسينتهي بنا المطاف باستخدام جافا سكريبت التالية: 

      $('#friend').click(function() {return $(this).toggleClass('checked');});$('#submit').click(function() {var name, number, ul;ul = $('#numbers');number = $('#number').val();name = $('#name').val();if ($('#friend').hasClass('checked')) {$(ul).prepend('
    • Name: ' + name + '
       Number: ' + number + '
      • ');}  آخر {$(ul).prepend('
    • Name: ' + name + ' 
      Number: ' + number + '
      • ');}  localStorage.setItem ('contacts'، $ (ul) .html ())؛ $ ("form") [0] .reset ()؛ return false؛})؛ if (localStorage.getItem ('contacts')) {$('#numbers').html(localStorage.getItem('contacts'));}

      قارن بين كلاهما أنه يمكن أن نرى أن لـ CoffeeScript 587 كلمة و 14 سطرًا بينما يحتوي Javascript على 662 كلمة و 21 سطرًا ، وإذا قارنا قابلية القراءة ، يمكننا أن نرى أن CoffeeScript أكثر وضوحًا من مكافئ جافا سكريبت. إذا كان في هذا النوع من التطبيقات البسيطة يمكن أن يوفر لك برنامج CoffeeScript 7 أسطر من التعليمات البرمجية تخيل كم ستوفر في التطبيق الكامل!

      استنتاج

      آمل أن تكون هذه المقالة قد قدمت لك فكرة أفضل عن CoffeeScript وكيف يمكنها تحسين ترميز JavaScript اليومي. لا يُقصد من الشفرة المكتوبة في هذه المقالة أن تكون أنظف أو أسهل جافا سكريبت ، بل كان الهدف منها توضيح استخدام CoffeeScript. أتمنى الآن أن ترى مدى قوة هذا الأمر مع jQuery وأن تفكر في استخدام هذه اللغة الرائعة في الترميز اليومي الخاص بك لأنه سيوفر لك بكل تأكيد ساعات من الكتابة.

      هل تستخدم CoffeeScript؟ ما مدى استفادتك منها يومًا بعد يوم؟ اسمحوا لنا أن نعرف في التعليقات.

      صورة مميزة / صورة مصغرة ، صورة القهوة عبر Shutterstock.

      بناء تطبيق coffeescript coffeescript coffeescript وجافا سكريبت باستخدام coffeescript مع مسج