در قسمت اول این مقاله درباره کافی اسکریپت، قابلیت های اولیه آن را مشاهده کردید. اما بیایید صادق باشیم، بیشتر اوقات ما از کتابخانه jQuery برای کمک به نوشتن جاوا اسکریپت خود استفاده می کنیم و چیزی که در قسمت اول به شما نشان دادم فقط جاوا اسکریپت وانیلی بود.

در این قسمت ما به CoffeeScript، LocalStorage و jQuery ملحق می شویم تا یک مدیر تماس ساده ایجاد کنیم که در آن می توانیم شماره، نام یک نفر را ذخیره کنیم و همچنین بررسی کنیم که آیا آن شخص دوست است یا خیر، و با کمک LocalStorage این مدیر مخاطب، مخاطبین شما را ذخیره می کند. خود را تازه کنید page.

شما می توانید نسخه ی نمایشی آنچه را که ما ایجاد خواهیم کرد را در این مشاهده کنید دمویی که من ساختم

HTML

همانطور که در دمو دیدید، HTML ما فرم و یک

خالی ساده خواهد بود که بعداً با نام ها و اعداد پر می کنیم:

<form action="#" method="POST">
 <label for="name">Name:</label>
 <input type="text" name="name" id="name" required autofocus />
 <label for="number">Number</label> 
 <input tpe="tel" name="number" id="number" required />
 <label for="friend">Is he a friend?</label> 
 <input type="checkbox" name="friend" id="friend">
 <input type="submit" id="submit" value="Add" />
 </form>
 <ul id="numbers"></ul>

حتی اگر این فرم متد و عملی دارد، بعداً عمل پیش‌فرض را با جاوا اسکریپت مسدود می‌کنیم تا بارگذاری مجدد آن متوقف شود. page و پرش هنگام ارسال. درعوض، فقط فهرست نامرتب اعداد را با آنچه در ورودی های فرم است پر می کنیم.

CoffeeScript

اکنون به بهترین بخش این مقاله می پردازیم: صحبت در مورد CoffeeScript و jQuery با هم، دو ابزاری که برای ساده تر و سازنده تر کردن توسعه جاوا اسکریپت ساخته شده اند.

بیایید به این فکر کنیم که می خواهیم این برنامه قبل از کدنویسی در نقاط گلوله چه کاری انجام دهد:

• کلاس را اضافه کنید بررسی شد اگر چک باکس علامت خورده باشد و در غیر این صورت آن را حذف کنید.
• رویداد کلیک را بررسی کنید روی دکمه ارسال؛
• مقادیر عدد و نام را بدست آورید.
• این مقادیر را قرار دهید روی ما page;
• همه نام ها و اعداد را به LocalStorage اضافه کنید.
• هر چیزی را که در فرم تایپ کرده ایم حذف کنید.
• جلوگیری از ارسال فرم؛
• هر داده ای که در LocalStorage نگهداری می شود را بخوانید و نمایش دهید.

اکنون همه اینها را مستقیماً انجام داده ایم، می توانیم از بالا شروع کنیم. برای اضافه کردن بررسی شد کلاس باید یک کلیک را بررسی کنیم و سپس کلاس را تغییر دهیم روی در هر کلاس، ما قبلاً روش ساخت توابع در CoffeeScript را در قسمت 1 دیده ایم، بنابراین:

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

مورد بعدی که باید انجام دهیم این است که یک کلیک را بررسی کنیم روی دکمه ارسال را فشار دهید و برخی از متغیرها را که در ادامه مسیر به آنها نیاز خواهیم داشت ذخیره کنید:

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

در این مرحله ما تابع خود و متغیرهایی را که بعداً نیاز داریم تعریف کرده‌ایم، متغیر ul لیست نامرتب را نگه می‌دارد که شامل همه نام‌ها و اعداد است و دو مورد بعدی هر چیزی را که تایپ می‌کنیم ذخیره می‌کند. روی ورودی ها

این قسمتی است که در آن تمام مقادیری که داریم را می گیریم و برای هر عددی که داریم یک آیتم لیست را آماده می کنیم. به یاد داشته باشید که اگر مخاطب یک دوست است، می خواهیم سبک چیزها را کمی متفاوت تر کنیم، بنابراین کلاس چک باکس را بررسی می کنیم و طبقات مختلف را به موارد لیست خود اضافه می کنیم. برای آن ما از یک ساده استفاده خواهیم کرد اگر بیانیه همانطور که در قسمت 1 توضیح داده شد:

if $('#friend').hasClass 'checked'
 $(ul).prepend '<li class="friend"><span>Name: ' + name + '<br/> Number: ' + number + '</span></li>' 
else
 $(ul).prepend '<li><span>Name: ' + name + ' <br/>Number: ' + number + '</span></li>'

پایه برنامه ما آماده است، اما اگر دوباره آن را بارگیری کنید page خواهید دید که همه شماره ها از بین رفته اند، بنابراین باید محتویات شماره ها را به LocalStorage اضافه کنیم و آن را مخاطبین صدا می کنیم:

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

کاری که ما انجام می دهیم این است که ابتدا چیزی را که می خواهیم ذخیره کنیم نام گذاری می کنیم و بعد از کاما مقدار ذخیره شده را اعلام می کنیم. در این صورت ما محتویات لیست نامرتب را ذخیره می کنیم.

با انجام این خط، ما تمام اعداد و نام‌ها را در LocalStorage داریم، بنابراین اجازه دهید با تنظیم مجدد فرم و سپس بازگشت، آخرین لمس‌ها را به تابع اضافه کنیم. نادرست برای اطمینان از page بارگذاری مجدد نمی شود:

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

این تابع اکنون کامل است و تنها کاری که اکنون باید انجام دهیم این است که بررسی کنیم آیا چیزی در LocalStorage با نام مخاطب و اگر این کار را انجام دهیم، فقط باید آن را قرار دهیم روی را page:

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

تمام کاری که ما انجام می دهیم بررسی و سپس قرار دادن محتویات آن آیتم است روی را page. با آخرین لمس مدیر تماس کوچک ما تمام شد و کد کامل CoffeeScript استفاده شده این بود:

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

$('#submit').click ->
ul = $('#numbers')
 number = $('#number').val()
 name = $('#name').val()
 if $('#friend').hasClass 'checked'
 $(ul).prepend '<li class="friend"><span>Name: ' + name + '<br/> Number: ' + number + '</span></li>' 
 else
 $(ul).prepend '<li><span>Name: ' + name + ' <br/>Number: ' + number + '</span></li>' 
 localStorage.setItem 'contacts', $(ul).html() 
 $("form")(0).reset();
 return false

if 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('<li class="friend"><span>Name: ' + name + '<br/> Number: ' + number + '</span></li>');
 } else {
 $(ul).prepend('<li><span>Name: ' + name + ' <br/>Number: ' + number + '</span></li>');
 }
 localStorage.setItem('contacts', $(ul).html());
 $("form")(0).reset();
 return false;
});

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

هر دو را با هم مقایسه کنید، می بینیم که CoffeeScript دارای 587 کلمه و 14 خط است در حالی که جاوا اسکریپت دارای 662 کلمه و 21 خط است، و اگر خوانایی را مقایسه کنیم، می بینیم که CoffeeScript به طور قابل ملاحظه ای خواناتر از معادل جاوا اسکریپت است. اگر در این نوع برنامه های ساده، CoffeeScript می تواند 7 خط کد را برای شما ذخیره کند، تصور کنید که در یک برنامه کامل چقدر صرفه جویی می کند!

نتیجه

امیدوارم این مقاله ایده بهتری از CoffeeScript و اینکه چگونه می تواند کدنویسی جاوا اسکریپت روزانه شما را بهبود بخشد، به شما داده باشد. کد نوشته شده در این مقاله به این معنا نیست که پاک‌ترین یا ساده‌ترین جاوا اسکریپت باشد، بلکه برای نشان دادن با استفاده از CoffeeScript طراحی شده است. امیدوارم اکنون بتوانید ببینید که چقدر با jQuery قدرتمند است و به استفاده از این زبان کوچک عالی در برنامه نویسی روزانه خود فکر می کنید زیرا قطعاً ساعت ها در تایپ کردن شما صرفه جویی می کند.

آیا از CoffeeScript استفاده می کنید؟ به نظر شما روزانه چقدر مفید است؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر قهوه از طریق Shutterstock.