در این پست قصد دارم ۱۲ ترفند مفید از جاوا اسکریپت رو براتون توضیح بدم که با استفاده از اونها کدهاتون کمتر و بهینه تر میشه .
اما قبل از اینکه توضیحات رو شروع کنیم اول باید مطمئن بشید که اپلیکیشن وبی شما در اکثر مرورگرها و تلفن های همراه به خوبی نمایش داده میشه .
برای تست کردن این مورد میتونید خیلی ساده وارد سایت Endtest بشین که یک ابزار مناسب برای تست اپلیکیشن های شماست . خوب بریم که ترفندهای جالبمونو یاد بگیریم .
۱- تبدیل کردن به boolean با عمگلر !!
گاهی اوقات شما به این نیاز پیدا میکنید که چک کنید آیا مقداری برای یک متغییر وجود دارد یا خیر . یا اصلا اگر وجود دارد مقدار true برگشت داده بشه . برای انجام دادن چنین اعتبار سنجی میتونید از عملگر !! (دو علامت تعجب پشت هم ) استفاده کنید به عنوان مثال !!variable , این حالت به شما کمک میکند تا در صورت اینکه variable شما برابر با مقادیری مثل ۰, null, "", undefined یا NaN بود مقدار false رو در خروجی دریافت کنید یا اگر برابر با هیچ کدوم اینها نبود شما میتونید مقدار true رو در خروجی نمایش بدید . هیچی بهتر از یک مثال خوب برای درک این مسئله نمی تونه به شما کمک کنه به مثال زیر دقت کنید :
function Account(cash) {
this.cash = cash;
this.hasMoney = !!cash;
}
var account = new Account(100.50);
console.log(account.cash); // 100.50
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);
console.log(emptyAccount.cash); // 0
console.log(emptyAccount.hasMoney); // false
در این کد اگر مقدار account.cash بزرگتر از ۰ باشد برای شما مقدار true برگشت داده میشود .
۲- تبدیل به عدد با عملگر +
این واقعا خیلی جالبه و استفاده کردن از اون هم خیلی ساده اما فقط برای حالت های کار میکنه که رشته های شما فقط حاویه عدد باشن در غیر این صورت برای شما مقدار NaN به معنیه (Not a Number) برگشت داده میشه . به مثال زیر نوجه کنید .
function toNumber(strNumber) {
return +strNumber;
}
console.log(toNumber("1234")); // 1234
console.log(toNumber("ACB")); // NaN
این مورد برای Date ها هم کار میکنه و برای شما یک timestamp رو بر میگردونه
console.log(+new Date()) // 1461288164385
۳- شرط های کوتاه
شما قطعا کد زیر را در جاوا اسکریپت دیده اید :
if (conected) {
login();
}
در مثال بالا login تنها در صورتی اجرا میشود که connected برابر با مقدار true باشد اگر شما میخواید چنین بدنه ای را پیداه سازی کنید میتونید کار رو از این هم ساده تر انجام بدید و از عملگر && همون ( AND ) استفاده کنید تا فقط در صورتی که connected برابر true بود تابع login اجرا بشه . به کد پایین دقت کنید .
conected && login();
و گاهی اوقات شما میخواید اول چک کنید که ایا object مورد نظر شما وجود دارد و بعد در صورت وجود داشتن به بخشی از اون دسترسی پیدا کنید برای انجام این کار هم از کد زیر استفاده میکنیم .
user && user.login();
۴ - ثبت مقدار پیشفرض با عملگر ||
امروزه با استفاده از ES۶ میتونید مقدار های پیش فرض رو برای مقادیر مختلف به سادگی تعریف کنید .اما در مرورگرهای قدیمی تر که از ES۶ به خوبی پشتیبانی نمی کنن چه راهی واقعا برای برای تعریف حالت پیش فرض وجود داره . شما میتونید به سادگی با استفاده عملگر || یا همون (OR خودمون ) ، مقدار پیش فرضی رو برای متغیر تعریف کنید در صورتی که مقدار اولی false برگشت بده مقدار دوم داخل متغیر قرار میگیره . به کد زیر دقت کنید :
function User(name, age) {
this.name = name || "Oliver Queen";
this.age = age || 27;
}
var user1 = new User();
console.log(user1.name); // Oliver Queen
console.log(user1.age); // 27
var user2 = new User("Barry Allen", 25);
console.log(user2.name); // Barry Allen
console.log(user2.age); // 25
۵ - کش کردن array.length در حلقه ها
ببنید این موضوع خیلی ساده است ، اما فهمیدنش میتونه بهتون کمک کنه کدهاتون رو خیلی بهینه کنید چون مسئله خیلی مهمی به حساب میاد . اساسا همه ای افرادی که با جاوا اسکریپت کار میکنن بصورت زیر حلقه رو تعریف میکنند .
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
خوب کد بالا هیچ مشکلی نداره و و به خوبی هم کار میکنه اما اگر طول ارایه شما بزرگ باشه در هر بار تکرار حلقه ، حلقه مجبوره که طول آرایه رو از اول اندازه گیری کنه و این موضوع میتونه کمی سرعت محاسبات حلقه ها رو پایین بیاره . اما شما با کش کردن طول حلقه array.length میتونید خیلی ساده این موضوع رو رفع کنید اما چطور ؟ خوب به کد زیر دقت کنید .
var length = array.length;
for (var i = 0; i < length; i++) {
console.log(array[i]);
}
شما کد بالا رو میتونید هنوز هم ساده تر کنید :
for (var i = 0, length = array.length; i < length; i++) {
console.log(array[i]);
}
۶ - تشخص وجود properties در object
این روش خیلی به ما کمک میکنه تا به سادگی چک کنیم آیا یک propertie در یک object وجود داره یا نه . این موضوع کجا استفاده میشه ؟ جاهای که ما قصد داریم کدهای cross-browser ایجاد کنیم تا در تمام مرورگرها کدهای ما به خوبی کار کند . خوب میشه یه مثال از این حالت بزنی ؟ خوب اره نگاه کنید فرض کنید شما کدی رو دارید ایجاد میکنید که دوست دارید حتی در مرورگر Internet Explorer ۶ هم اجرا بشه برای مثال میخواید از کد document.querySelector() استفاده کنید اما مطمئن نیستید که این مورد در مرورگر Internet Explorer ۶ وجود داره یا خیر پس باید اول چک کنید که اگر این روش وجود نداشت از روشی استفاده بشه کد های شما به مشکل بر نخوره . باز هیچی بهتر از مثال نیست . به مثال زیر دقت کنید.
if ('querySelector' in document) {
document.querySelector("#id");
} else {
document.getElementById("id");
}
در این مورد اگر querySelector در شی document وجود نداشته باشه از مقدار document.getElementById استفاده میشه .
امیدوارم این ۶ ترفند مورد استفاده شما قرار گرفته باشن . منتظر شنیدن نظراتتون هستم . ۶ ترفند دوم رو در پست بعد به شما معرفی میکنم.
