نوشته های Mahdi Rahmani

راهنمای جامع برای مسلط شدن به Closure در جاوااسکریپت

Mahdi Rahmani — Thu, 14 Nov 2024 15:36:02 +0330

Comprehensive Guide to Mastering Closures in JavaScriptکلوژرها (Closures) تو جاوااسکریپت از اون مفاهیم مهم و در عین حال پیچیده هستن که اگه خوب یادشون بگیری، میتونی کدی تمیزتر، ماژولارتر و بهینه تر بنویسی. شاید اولش فهمیدنشون یه کم سخت باشه، ولی واقعاً یکی از پایه های اساسی برنامه نویسی حرفه ای و توسعه پروژهه ای بزرگ و قوی تو جاوااسکریپت به حساب میان. تو این راهنما قراره از پایه ترین بخش ها تا تکنیک های حرفه ای کلوژرها رو با مثال های مختلف بهت یاد بدیم که هم خوب درکشون کنی، هم بتونی ازشون تو پروژه هات استفاده کنی.کلوژر چیست؟کلوژر تو جاوااسکریپت وقتی به وجود میاد که یه تابع داخل یه تابع دیگه تعریف بشه. این ویژگی باعث میشه تابع داخلی بتونه به متغیرها و پارامترهای تابع بیرونی دسترسی داشته باشه، حتی بعد از اینکه اجرای تابع بیرونی تموم شده. کلوژر به توابع این قابلیت رو میده که متغیرهای محیط اطراف خودشون رو "نگه دارن" و بعداً ازشون استفاده کنن.به عنوان مثال:function outerFunction() { let outerVariable = 'I am from the outer function'; function innerFunction() { console.log(outerVariable); } return innerFunction; } const closureExample = outerFunction(); closureExample(); // Output: 'I am from the outer function'تو این مثال، تابع innerFunction میتونه به متغیر outerVariable که توی محدوده ی بیرونی خودش تعریف شده، دسترسی داشته باشه؛ این دقیقاً یه نمونه از کلوژر در عمله.مفاهیم کلیدی: Scope، Scope Chain و Lexical Environmentبرای اینکه کلوژرها رو خوب بفهمی، لازمه با چند تا مفهوم پایه ای تو جاوااسکریپت آشنا بشی:محدوده یا همون Scope تعیین میکنه که متغیرها کجاها قابل دسترس هستن. تو جاوااسکریپت، دو نوع اصلی محدوده داریم: محدوده ی جهانی که از هر جای برنامه بهش دسترسی داری، و محدوده ی محلی که فقط توی یه تابع یا یه بلوک خاص در دسترسه.زنجیره ی محدوده یا Scope Chain هم مسیر جستجوی متغیرها رو مشخص میکنه. جاوااسکریپت از داخلی ترین محدوده شروع میکنه و همینطور میره به سمت محدوده های بیرونی تر تا متغیر مورد نظر رو پیدا کنه.محیط لغوی یا Lexical Environment هم همون جاییه که توابع و متغیرها توی کد نوشته شدن و محدوده ی اونا رو مشخص میکنه. این محیط شامل یه رکورد برای نگهداری متغیرها و توابعه و همینطور ارجاعی به محیط لغوی بیرونی برای دسترسی به متغیرهای بیرونیه.کاربردهای کلوژرهاکلوژرها تو جاوااسکریپت کلی کاربرد دارن، از مدیریت وضعیت گرفته تا کار با عملیات های غیرهمزمان.۱. کپسوله سازی داده ها (Data Encapsulation)کلوژرها بهمون این امکان رو میدن که داده ها رو کپسوله کنیم، یعنی متغیرها بتونن خصوصی بمونن و از محدوده ی جهانی خارج بشن.function createCounter() { let count = 0; return { increment: function() { count++; }, getCount: function() { return count; } }; } const counter = createCounter(); counter.increment(); console.log(counter.getCount()); // Output: 1تو این مثال، متغیر count خصوصی هست و فقط از طریق متدهای increment و getCount قابل دسترسیه.۲. برنامه نویسی تابعیکلوژرها تو برنامه نویسی تابعی خیلی مهم هستن و این امکان رو میدن که توابع مرتبه ی بالاتری بسازی.function createMultiplier(multiplier) { return function(number) { return number * multiplier; }; } const double = createMultiplier(2); console.log(double(5)); // Output: 10تو این مثال، تابع createMultiplier توابعی رو میسازه که مقدار multiplier رو به خاطر دارن، مثل double یا triple.۳. مدیریت رویدادهاکلوژرها تو مدیریت رویدادها خیلی مهم هستن و به توابع اجازه میدن که به متغیرهای تو محدوده خودشون دسترسی داشته باشن.function setupClickHandler(buttonId) { let count = 0; document.getElementById(buttonId).onclick = function() { count++; console.log(`Button clicked ${count} times`); }; } setupClickHandler('myButton');اینجا، رویداد هندلر میتونه به متغیر count دسترسی داشته باشه، حتی وقتی که setupClickHandler تموم شده.۴. توابع Callbackکلوژرها برای مدیریت توابع Callback و کارهای غیرهمزمان خیلی ضروری هستن.function fetchData(url, callback) { setTimeout(() => { const data = { name: 'John Doe', age: 30 }; callback(data); }, 1000); } fetchData('https://api.example.com/user', data => { console.log('Received data:', data); });تو این مثال، تابع Callback بعد از یه تأخیر زمانی همچنان به شی data دسترسی داره.تکنیک ها و الگوهای پیشرفته در کلوژرهاکارخانه ی توابعبا استفاده از کلوژرها، میتونیم به صورت داینامیک توابعی بسازیم که براساس پارامترهای خاص کار کنن.function createGreeter(greeting) { return function(name) { return `${greeting}, ${name}!`; }; } const helloGreeter = createGreeter('Hello'); console.log(helloGreeter('Alice')); // Output: 'Hello, Alice!'Curryingیه فرایند هست که توش یه تابعی که چند تا آرگومان میگیره، به یه سری توابع تبدیل میشه که هر کدوم فقط یه آرگومان میگیرن.function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn(...args); } else { return function(...moreArgs) { return curried(...args, ...moreArgs); }; } }; } const add = (a, b, c) => a + b + c; const curriedAdd = curry(add); console.log(curriedAdd(1)(2)(3)); // Output: 6Memoization با استفاده از کلوژرها، Memoization نتایج توابع پرهزینه رو ذخیره میکنه و از انجام محاسبات تکراری جلوگیری میکنه.function memoize(fn) { const cache = {}; return function(...args) { const key = JSON.stringify(args); if (cache[key]) { return cache[key]; } cache[key] = fn(...args); return cache[key]; }; } const fibonacci = memoize(n => { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }); console.log(fibonacci(10)); // Output: 55مدیریت کلوژرها و حافظهکلوژرها ممکنه حافظه ی زیادی مصرف کنن، چون متغیرهای داخل کلوژر تا وقتی که کلوژر وجود داره، تو حافظه میمونن. برای اینکه مشکل حافظه پیدا نکنیم، میتونیم از این روش ها استفاده کنیم:1. حذف ارجاعات غیرضروری: متغیرهای بزرگ یا غیرضروری رو بعد از استفاده به null تنظیم کن تا حافظه آزاد بشه.2. استفاده از let به جای var: با let متغیرهای بلوکاسکوپ ایجاد میشن که جلوی ایجاد کلوژرهای ناخواسته تو حلقه ها رو میگیره.3. محدود کردن طول عمر کلوژرها: با کلوژرهایی که برای مدت طولانی نگه داشته میشن (مثل متغیرهای جهانی یا رویدادها) محتاط باش و فقط وقتی لازمن ازشون استفاده کن.این روش ها به بهینه تر شدن مصرف حافظه و جلوگیری از مشکلات احتمالی کمک میکنن.مثال های کاربردی از کلوژرهاتوابع تایمر: دیبانس و ثروتلینگکلوژرها برای کنترل تعداد دفعات اجرای تابع توی تکنیک های دیبانس (debounce) و ثروتلینگ (throttling) استفاده میشن. این تکنیک ها کمک میکنن که توابعی که به دفعات زیاد صدا زده میشن (مثل رویدادهای اسکرول یا تایپ) محدود بشن و فقط در زمان های مشخصی اجرا بشن. کلوژرها با نگهداشتن وضعیت و زمان آخرین اجرا، این کنترل رو ممکن میکنن.function debounce(fn, delay) { let timeoutID; return function(...args) { clearTimeout(timeoutID); timeoutID = setTimeout(() => fn(...args), delay); }; } window.addEventListener('resize', debounce(() => { console.log('Window resized'); }, 300));تو این مثال، تابع debounce اجرای تابع رو به تأخیر میاندازه تا وقتی که کاربر تغییر اندازه (resize) رو متوقف کنه. یعنی اگه کاربر هی تغییر اندازه بده، تابع اجرا نمیشه و فقط وقتی که تغییرات متوقف بشه، تابع اصلی اجرا میشه. اینطوری از اجرای مکرر و غیرضروری تابع جلوگیری میکنه.مزایا و معایب کلوژرهامزایا:- کپسوله سازی داده ها: بهت اجازه میده متغیرها رو خصوصی نگه داری و امنیت اونها رو بالا ببری.- ماژولار بودن: کمک میکنه توابعی بسازی که دوباره قابل استفاده و اختصاصی باشن.- سازماندهی بهتر کد: باعث میشه محدودهی جهانی کمتر شلوغ بشه و در نتیجه کد خواناتر و مرتبتر بشه.معایب:- مصرف حافظه: کلوژرها میتونن حافظه بیشتری مصرف کنن چون دادهها رو تا زمانی که کلوژر وجود داره نگه میدارن.- پیچیدگی در دیباگ: کلوژرهای تو در تو ممکنه دیباگ کردن کد رو سختتر کنن.- بار عملکردی: استفاده زیاد از کلوژرها میتونه باعث کاهش کارایی بشه و عملکرد برنامه رو تحت تأثیر قرار بده. این ویژگیها رو باید بسته به نیاز و مقیاس پروژه در نظر بگیری.نتیجه گیری:کلوژرها یکی از مفاهیم اساسی تو جاوااسکریپت هستن که به توسعه دهنده ها این امکان رو میدن کدهایی بنویسن که ماژولارتر، کارآمدتر و انعطاف پذیرتر باشن. کلوژرها تو برنامه نویسی تابعی، عملیات های غیرهمزمان، مدیریت رویدادها و کپسوله سازی داده ها نقش مهمی دارن. با اینکه استفاده از کلوژرها مزایای زیادی داره، ولی خیلی مهمه که درست و با مدیریت دقیق ازشون استفاده بشه تا مشکلاتی مثل مصرف زیاد حافظه و سختی در دیباگ پیش نیاد.با فهمیدن اصول کلوژرها، برنامه نویس های جاوااسکریپت میتونن مهارت هاشون رو بالا ببرن و کیفیت و پایداری کدهاشون رو بهتر کنن. با به کارگیری کلوژرها، میتونی کدهای قدرتمندتر و مقیاس پذیرتری بسازی و سطح برنامه نویسی خودت رو به مرحله ی بالاتری برسونی.

درک Hoisting در جاوا اسکریپت: راهنمای جامع !

Mahdi Rahmani — Thu, 26 Sep 2024 00:15:43 +0330

درک Hoisting در جاوا اسکریپتمفهوم Hoisting در جاوااسکریپتدر جاوااسکریپت Hoisting یکی از مفاهیم مهم در جاوااسکریپت است که ممکن است منجر به رفتار غیرمنتظره در کد شود. این مکانیزم باعث می‌شود تا اعلان‌های متغیرها، توابع و کلاس‌ها به بالای محدوده خود منتقل شوند، حتی قبل از اجرای کد. به عبارت دیگر، اعلان (Declarations) متغیرها و توابع به بالای محدوده خود منتقل می‌شوند، اما مقداردهی‌ها (Initializations) در جای خود باقی می‌مانند.متغیرها در Hoisting :در جاوااسکریپت، متغیرهایی که با var تعریف می‌شوند، تنها اعلان آنها به بالای محدوده منتقل می‌شود، اما مقداردهی آنها نه. این یعنی اگر پیش از مقداردهی از متغیری استفاده کنید، مقدار آن undefined خواهد بود.console.log(foo); // undefined var foo = 'bar';در اینجا، foo به بالای محدوده منتقل شده اما مقداردهی نشده است، بنابراین خروجی undefined خواهد بود.متغیرها: Hoisting با let و const :با معرفی let و const در ES6، رفتار متفاوتی نسبت به var اعمال شد. در اینجا متغیرها به منطقه زمانی مرده (Temporal Dead Zone) وارد می‌شوند و اگر پیش از اعلان از آن‌ها استفاده شود، خطای ReferenceError رخ خواهد داد.console.log(bar); // ReferenceError let bar = 'baz';توابع در Hoisting :توابع در جاوااسکریپت به دو صورت تعریف می‌شوند: اعلان توابع (Function Declarations) و تعبیر توابع (Function Expressions).اعلان توابع :اعلان توابع به‌طور کامل به بالای محدوده منتقل می‌شود، به همین دلیل می‌توان آن‌ها را قبل از اعلام فراخوانی کرد:hoistedFunction(); // Outputs: "This function has been hoisted." function hoistedFunction() { console.log("This function has been hoisted."); }تعبیر توابع :عبیر توابع، مانند توابعی که با var, let, یا const تعریف می‌شوند، تنها اعلام متغیر به بالا منتقل می‌شود، اما مقداردهی (تعریف تابع) نه :console.log(notHoistedFunction); // undefined var notHoistedFunction = function() { console.log("This function expression is not hoisted."); };در اینجا، notHoistedFunction به بالا منتقل شده اما مقداردهی نشده است، بنابراین مقدار undefined خواهد بود.کلاس ها در Hoisting :کلاس‌ها نیز مشابه با let و const، تنها اعلانشان به بالا منتقل می‌شود و اگر قبل از اعلام کلاس از آن استفاده شود، خطای ReferenceError رخ می‌دهد :const p = new Rectangle(); // ReferenceError class Rectangle {}خطرات Hoisting :می‌تواند Hoisting باعث بروز رفتارهای غیرمنتظره در کد شود، به‌خصوص اگر متغیری را دو بار اعلام کنید. این امر می‌تواند باعث بازنویسی اعلام‌های قبلی شده و اشکال‌زدایی را در پروژه‌های بزرگ دشوار کند.جلوگیری از مشکلات Hoistingبرای جلوگیری از مشکلات مربوط به Hoisting:همیشه متغیرها و توابع خود را در بالای محدوده‌شان اعلام کنید. این کار باعث می‌شود کد شما خواناتر و قابل نگهداری‌تر باشد.از let یا const به جای var استفاده کنید. این باعث می‌شود که متغیرها در منطقه زمانی مرده قرار گیرند و خطاهای احتمالی شناسایی شوند.استفاده از "strict mode". در حالت strict، استفاده از متغیرهای اعلام نشده مجاز نیست که می‌تواند به شما کمک کند خطاهای مربوط به Hoisting را زودتر شناسایی کنید.چرا Hoisting پیاده‌سازی شد؟دو دلیل اصلی برای پیاده‌سازی Hoisting در جاوااسکریپت وجود دارد:تسهیل استفاده از توابع قبل از اعلامشان: Hoisting به شما امکان می‌دهد که توابع را قبل از تعریف آن‌ها فراخوانی کنید، که باعث انعطاف بیشتر در سازماندهی کد می‌شود.بهبود کارایی مفسر: Hoisting می‌تواند باعث بهینه‌سازی عملکرد مفسر جاوااسکریپت شود، زیرا مفسر در حین اجرای کد دیگر نیازی به جستجو برای اعلام توابع ندارد و می‌تواند سریع‌تر به اجرای آن‌ها بپردازد.نتیجه‌گیرییکی از ویژگی‌های قدرتمند جاوااسکریپت Hoisting است، اما می‌تواند در صورتی که به درستی مدیریت نشود، منجر به بروز مشکلاتی شود. با درک درست از نحوه عملکرد Hoisting و اجتناب از مشکلات مربوط به آن، می‌توانید کد جاوااسکریپت خود را به شکلی پایدارتر و قابل نگهداری‌تر بنویسید.

آشنایی در مورد http only و کمی هم regular cookies

Mahdi Rahmani — Tue, 17 Sep 2024 03:57:32 +0330

http-only and regular cookiesکوکی برای ذخیره سازی اطلاعات در سیستم یوزر و خفظ وضعیت session بین درخواست های http استفاده می کنند. در این پست مقایسه کوتاهی بین این دو داریم .کوکی های معمولیکوکی هایی هستند که توسط اسکریپت های سمت یوزر مثل جاوااسکریپت قابل دسترسی هستند . برای ذخیره اطلاعات یوزر ، پیگیری رفتار یوزر و حفظ وضعیت جلسه بین درخواست های http استفاده میشن .کوکی ها در حافظه کوکی مرورگر ذخیره میشن و می تونن توسط اسکریپت های سمت کابرد تغییر کنن .حملات xss : در این نوع حمله ، یه اسکریپت کخرب به صفحه وب تزریق میشه و می تونه کوکی ها رو بخونه و اطلاعات حساس یا توکن های احراز هویت رو سرقت کنه .حملات CSRF : در این نوع جمله ، یوزر بدون اطلاع با کلیک روی لینک یا ارسال فرم وادار میشه که عملیاتی روی یه برنامه انجام بده . اگه برنامه از کوکی های معمولی احراز هویت استفاده کنه ، اتکر می تونه از کوکی های یوزر برای انجام اتک استفاده کنه .روش هایی برای کاهش خطرات در کوکی ها : ورودی های کاربر رو پاک سازی کنیم ، از کوکی های امن استفاده کنیم ، استفاده از کوکی های http only .کوکی های http onlyاین کوکی ها در همون جایی که کوکی های معمولی ذخیره میشن نگهداری میشن . اما به خاطر اینکه توسط اسکریپت های سمت یوزر قابل دسترسی نیستن ، فقط به سرور ارسال میشن .حتی به خاطر اینکه این کوکی ها توسط اسکریپت سمت یوزر قابل دسترسی نیستن ولی همچنان در معرض حملاتی مانند CSRF یا آسیب پذیری های مرورگر قراردارن .این کوکی ها مثل کوکی های معمولی هستن ولی با فلگ HttpOnly تنظیم می شن که در برابر حملات XSS امن تر می کنه .روش هایی برای کاهش خطرات : استفاده از کوکی های امن ، استفاده از توکن های CSRF ، محدود کردن دامنه کوکی ها و اجرای کنترل صحیح .نتیجه گیریهر دو برای حفظ وضعیت session مفید هستن اما کوکی های regular در معرض حملات سمت یوزر مثل SXX و CSRD هستن در حالی که کوکی های http only امنیت بیشتری در برابر حملات دارن . باید از ترکیبی مثل پاک سازی ورودی ، استفاهد از کوکی های امن ، توکن های CSRF و کنترل های دسترسی مناسب استفاده بشه تا امنیت برنامه های وب افزایش پیدا کنه .