توسعهدهنده کسبوکار، مشاور بازاریابی | علاقمند به علوم رفتاری و طراحی تجربه
۳ تکنیک بسیار مهم که هر برنامه نویس جاوااسکریپت باید بدونه !
سلام به دوستان عزیزم. در این مطلب قراره ما با سه تا تکنیک جالب و به درد بخور در مورد برنامه نویسی javascript آشنا بشیم. یادگیری این تکنیک ها به شما کمک میکنه از بقیه خیلی بهتر باشید.
۱. تکنیک Currying
داستان Currying میگه ما برای اینکه، برای مثال به یک تابع ۳ تا ورودی (argument) بدیم بجای این کار یک ورودی به آن اختصاص دهیم و یک تابع درون تابع اصلی تعریف کنیم، دومین ورودی را به تابع درونی بدیم و داخل همین تابع مجددا تابع دیگری تعریف کنیم و سومین ورودی را به این تابع بدیم.
اینجا ما بصورت معمول ۳ تا ورودی به تابع خودمون دادیم:
const sum=function (a,b,c) {
return a+c+b
}
حالا میایم از currying استفاده میکنیم که دقیقا کار تابع بالا رو انجام میده:
const sum = function (a) {
return function (b) {
return function (c) {
return a + b + c
}
}
}
این که کدهارو طولانی تر کرد...پس چرا ازش استفاده کنیم؟ چرا مفیده؟
برای این currying مفیده چون یجورایی از closure استفاده کرده و اینکه بهمون کمک میکنه توابع مرتبه بالا (higher-order function) بسازیم. که حتما موقع کار با رویداد ها (event handling) به دردمون میخوره.
توابع مرتبه بالا توابعی هستند که یک تابع را به عنوان پارامتر ورودی دریافت و یا به عنوان خروجی ارسال می کنند، دانستن اینکه چه زمانی و چگونه از این توابع استفاده می شود ضروری است ،استفاده از این توابع باعث میشه کد هایی که می نویسین ساده تر و قابل فهم تر بشه.
۲. تکنیک Memoization
معنی memoization میشه "خاطره سازی" ولی خب معنی لفظی زیاد مهم نیست، بیاید درکش کنیم. خیلی ساده بگم:
فرض کنید ما یک تابع داریم و ازش استفاده میکنیم و آخرش هم یک مقدار(value) بهمون بر میگردونه . اوکی؟ خب حالا دفعه دوم که میخوایم از این تابع دوباره استفاده کنیم memoization میگه من مقدار دفعه قبلی رو داخل یه جا برات نگه داشتم (مثلا داخل یه متغیر به اسم cache ) خب همون رو برات بر میگردونم...چه کاریه دوباره بیای عملیات انجام بدی آخه؟! داخل کد هم یک نگاهی بندازیم مطلب بهتر جا بیفته:
const memoizedAdd = () => {
let cache = { }
return (value) => {
if (value in cache) {
console.log('Fetching from cache')
return cache[value]
} else {
console.log('Calculating result')
let result = value + 10
cache[value] = result
return result
}
}
}
// returned function from memoizedAdd
const newAdd = memoizedAdd();
console.log(newAdd(9)); //output: 19 calculated
console.log(newAdd(9)); //output: 19 cached
۳. استفاده از call , apply , bind
اول یک مثال بزنیم بعدش خیلی ساده با چندتا عکس مفهومش درک میشه:
let obj = {
num: 2
}
let add = function (num2, num3, num4) {
return this.num + num2 + num3 + num4
}
let arr = [ 3, 4, 5 ]
//Call method
console.log(add.call(obj, 3, 4, 5)) //Output : 14
/Apply method
console.log(add.apply(obj, arr)) //Output : 14
//bind Method
let bound = add.bind(obj)
console.log(bound(3, 4, 5)) //output : 14
کارهای خیلی باحالی با این ۳ تا متد که مربوط به Object ها هستند، میشه انجام داد. حالا چرا میگیم اینا مهم و کاربردی هستند؟!
فرض کنید ما دوتا object ساختیم و یک متد هم خارج از بدنه این object ها براشون ایجاد کردیم، حالا چجوری مقادیر و دیتا رو بین object و method مورد نظرش رد و بدل کنیم؟
اینجاس که این ۳تا متد به کمک ما میان و طبق کد های بالا میتونید ببینید که چقدر باحال امکان استفاده از this رو خارج از یک object و داخل یک method خارجی، برای ما فراهم میکنه.
هر سوالی داشتید داخل نظرات بپرسید حتما کمکتون میکنم
ممنون از توجهتون، همیشه عالی باشید.
مطلبی دیگر از این انتشارات
کد تمیز توی جاوااسکریپت/نود.جیاس
مطلبی دیگر از این انتشارات
آموزش html قسمت 7
مطلبی دیگر از این انتشارات
آموزش طراحی سایت-آرایه ها در جاوا اسکریپت