پست‌های انتشارات انتشارات JsHints

یک بار برای همیشه asynchronous را یاد بگیریم!

Reza Hasani — Sat, 01 Aug 2020 00:24:25 +0430

یکی از مواردی که تازه‌کارهای برنامه‌نویسی بهش برمیخورن، اصطلاح asynchronous هست. اصطلاحی که ممکنه توی دید اول خیلی واضح نباشه و وقتی کار به syntax و ... میرسه اوضاع پیچیده‌تر میشه. توی این مقاله اول قراره یکی از این syntaxها رو خیلی سریع بررسی کنیم و بعد از اون، سراغ قسمت اصلی مقاله یعنی تمام اتفاقای جذابی که موقع استفاده از asynchronous رخ میده خواهیم رفت.با این تیکه کد شروع میکنیم تا یه Promise ساده دریافت کنیم. احتمالا بدونین که تابع async همیشه بدون استثنا Promise برمیگردونه. یعنی باید منتظر یه اتفاقی بمونه. اون اتفاق میتونه response با کد 200 باشه یا ارور یا اتمام یه تایمر یا کلا هرچیز دیگه‌ای که باید براش منتظر بمونیم.و اما کلمه کلیدی await: قبل از هرچیزی لازمه این نکته رو به خاطر بسپارین که کلمه کلیدی await فقط و فقط در توابع async قابل استفاده‌ست. نه هیچ جای دیگه! این تیکه کد رو خوب نگاه کنین:پس await توی تیکه کد بالا صبر میکنه تا نتیجه مورد نظرمون دریافت بشه. یه نکته خیلی مهم رو دقت کنین که await نمیاد CPU رو به خاطر این قضیه درگیر کنه و کلا همه کارا رو متوقف کنه تا جواب بهش برگردونده بشه بلکه بقیه کارا همزمان انجام میشن. اثبات این موضوعم توی ادامه مقاله قراره انجام بدیم?و اما قسمت جذاب ماجراتا حالا به این موضوع فکر کردین که وقتی دارین از توابع asynchronous استفاده میکنین، چه اتفاقی داره رخ میده؟ اصلا به درد میخوره یاد بگیریم؟ شکککک نکنین توی خیلی از رفع باگ‌ها کمک میکنه و فرشته نجات میشه! پس قراره باهم یاد بگیریمش :)قبل از شروع بحثمون، دو تا اصطلاح رو باید معرفی کنم. دوتا اصطلاحی که خیلیامون توی inspect مرورگرامون دیدیم، اما معنیشو نمی‌دونیم:Call Stack | 2. Callback Queueبا یه کد ساده شروع میکنیم و کم‌کم به سمت asynchronous پیش میریم.یادتون باشه اگر از asynchronous استفاده نکنیم، از مورد دومی یعنی Callback Queue هم استفاده نکردیم.اولین مثالمون asynchronous نیست و یه تابع عادیه. پس طبق نکته بالا از Callback Queue استفاده‌ای نمیشه. میخوایم ببینیم چه اتفاقی توی Call Stack داره رخ میده:یه تیکه کد خیلی ساده!خب بریم سراغ Call Stack برای این تیکه کد. هرکدوم از pushها رو توی موارد جداگونه و به صورت boldشده اوردم:1- اولین چیزی که داخل این استک push میشه، تابعیه به اسم «main». دقیقا شبیه ++C که همچین تابعی رو به عنوان بدنه و فانکشن اصلی میشناخت ولی اینجا از نوع پنهان‌شدش? main پوش میشه.2- خط به خط جلو میره تا خط آخر یعنی جایی که تابع «testCallStack» صدا زده شده. توی استک روی main، این تابع push میشه.3- وارد testCallStack میشه. به تابع «forEach» میرسه. صداش میزنه و داخل استک روی main و testCallStack پوش میکنه.4- داخل تابع forEach، از anonymous function استفاده شده. پس یه همچین چیزی داخل استک پوش میشه:anonymous('Reza') <- اولین رشته‌ای که دریافت میکنه5- و آخرین چیزی که بهش میرسه رو داخل کنسول چاپ و داخل استک push میکنه. یعنی:console.log('Reza')دو مورد آخری یعنی مورد 4 و 5، pop میشن و دوباره همین مراحل برای string بعدی آرایه تکرار و push میشه. و در آخر همه این موارد به ترتیب pop میشن و Call Stack خالی میشه.و اما برای توابع asynchronous چه اتفاقایی رخ میده؟میرسیم به قول اول مقاله... وقتی از asynchronous استفاده میکنیم دقیقا چه اتفاقایی داره میفته؟ تیکه کد خیلی ساده زیر رو دقیق بررسی کنیم تا همه چیزا برامون روشن بشه:قبل این که بخوایم بررسی کنیم، بد نیست روی خروجی یه مقداری فکر کنین و جلوتر جوابتون رو ارزیابی کنین. به نظرتون کدوم خروجی رو خواهیم داشت؟'I can not wait!' / 'Zero seconds' / 'I am done!' / 'Two seconds' or'I can not wait!' / 'I am done!' / 'Zero seconds' / 'Two seconds' or'I can not wait!' / 'Two seconds' / 'Zero seconds' / 'I am done!'توی مثال ساده asynchronous بالا، میخوایم ببینیم چه اتفاقایی توی Call Stack و Callback Queue رخ میده. به ترتیب بررسی میکنیم و جلو میریم.مثل مثال قبلی، اولین چیزی که داخل Call Stack پوش میشه، تابع «main» هست. بعد از اون، باز هم طبق مثال قبل، console.log اولی، پوش و بعد از چاپ در کنسول، pop میشه. پس تا اینجای کار این خروجی‌ها رو توی کنسولمون داریم:'I can not wait!'و اما قسمت جذاب :)به console.log دومی میرسه. میبینه تایمر داره. اگر توی Call Stack پوش کنه، نمیتونه بعدا به این console.log برگرده. در لحظه هم که نمیتونه استفاده کنه و باید ۲ثانیه صبر کنه. طبق چیزی هم که اول مقاله گفتم، CPU این ۲ثانیه رو صبر نمیکنه و بقیه تسک‌ها رو همزمان باهاش انجام میده. پس فرشته نجات ما این وسط کیه؟قبل از این که بریم سراغ جواب سوال بالا، لازمه یه نکته خیلی مهم رو درمورد جاوا اسکریپت ذکر کنم که فرضیه کمک‌گرفتن CPU از هسته دیگه برای تسک‌های همزمان رو درجا باطل میکنه:جاوا اسکریپت فقط و فقط و فقط یک thread دارد!پس تا اینجای کار برامون قطعی شد که نمیتونیم اون تایمر رو توی Call Stack پوش کنیم که مثلا توی thread جداگونه بهش برسیم.این که CPU رو متوقف کنیم هم که معلومه کار درستی نیست! فکر کنین برای یه response از api اگر سرور دیر جواب میداد، هیچی توی صفحه وبمون نمایش داده نمیشد! درحالی که میدونیم اینجور نیست :)پس چه شگردی به کار برده شده تا بدون استفاده از thread و توقف CPU، تسک‌های بعدی مثل ساعت کار کنن؟جواب: APIهای نوشته شده براِی نود جی‌اس + Callback Queueاما چه جوری؟ برمیگردیم به مراحلی که داشتیم دونه به دونه میرفتیم. وقتی به خط کد console.log دومی میرسیم، این تیکه کد داخل APIهای Node موقتا نگه‌داری میشه و تایمر ۲ثانیه‌ای توی اونجا براش شروع به شمارش میکنه. پس تا الان Call Stack خالیه و جا برای تسک‌های بعدی داریم.سراغ console.log سومی میره( همزمان عکس کد رو هم ببینین). دوباره وارد APIهای Node میشه و تایمر 0ثانیه‌ای براش گذاشته میشه. و همچنان Call Stack خالی :)))تایمر 0ثانیه برای console.log سومی تموم شد! اینجا نقش آخر داستان وارد میشه! Callback Queue?مثلا Callback Queueعه?لاگ سومیمون که تایمر 0ثانیه داشت، الان دیگه توی APIها نیست و این مورد زیر، وارد Callback Queue میشه:Callback (0sec)میره سراغ console.log آخری. تایمر نداره پس API و Callback Queue در کار نیست و فقط داخل Call Stack پوش، چاپ و سپس pop میشه. پس کنسولمون تا اینجای کار میشه:'I can not wait!' / 'I am done!'نکته جالب اینجاست. حتی main که اون اولین push هم بود pop میشه! و Call Stack خالی خالی میشه! حالا Callback Queue میبینه Call Stack خالیه و اینجاست که ابتدا (Callback (0sec و بعد از اون console.log سومی رو برای Call Stack میفرسته و به ترتیب push و pop میشن:'I can not wait!' / 'I am done!' / 'Zero seconds'همه این اتفاقا، زیر ۲ثانیه رخ داده! همشون توی زمان ۰ مطلق اتفاق افتاده. بعد از ۲ثانیه، از APIهای Node، لاگ دومی وارد Callback Queue میشه. پس مثل قبلی، همچین چیزی وارد Callback Queue میشه:Callback (2sec)دوباره Callback Queue میاد داخل Call Stack رو چک میکنه و میبینه خالیه. پس وقتشه که مثل قبلی اون دومورد (Callback (2sec و console.log رو push و سپس pop کنه.یعنی خروجی‌ها به ترتیب اینجوری میشن(گزینه دوم تست بالا):'I can not wait!' / 'I am done!' / 'Zero seconds' / 'Two seconds'جمع‌بندییه جورایی میتونیم اینطور در نظر بگیریم که Callback Queue واسطه‌ایه بین APIهای Node و Call Stack. به این صورت که (Callback (nSec بعد از تموم‌شدن تایمر nثانیه، از طرف APIهای Node برای Callback Queue فرستاده میشه. توی Callback Queue چک میشه که آیا Call Stack خالی هست یا نه(حتی main هم نباید توی استک باشه). اگر خالی بود از صف dequeue میشه و داخل Call Stack پوش میشه.صف صبحگاهی مدرسه رو در نظر بگیرین. بعد از اتمام مراسم صبحگاهی(تموم‌شدن تایمر nثانیه) و وقتی که دانش‌آموزا میخوان وارد کلاس بشن، ناظم مدرسه(Callback Queue) میاد کوتاهی ناخن دانش‌آموزاش(خالی بودن Call Stack) رو چک میکنه. اگه کوتاه(خالی) بود اجازه میده که وارد کلاس(Call Stack) بشن. اگه نه صبر میکنه تا تعهد بدن(Call Stack خالی بشه). کاملا واضح شد دیگه فکر کنم?همین مورد که 2ثانیه و 0ثانیه طول کشید، میتونه یه request به API باشه. پس یادتون باشه که دقیقا همین اتفاقا میفته وقتی ما درخواستی رو ارسال میکنیم و منتظر response میمونیم.کنجکاو باشیم!دنبال همه چیز باشیم! هیچ یادگیری‌ای رو حتی برای کوتاه مدت، پشت گوش نندازیم. چون خیلی زود خودشو نشون میده و ممکنه اون تایم برای یادگیری خیلی دیر باشه.همین مورد Call Stack ممکنه چیزی باشه که خیلیا بگن اون پشت داره اتفاق میفته و ما نمیبینیم پس به چه درد ما میخوره؟ در جواب باید گفت که همین ترتیب اجرای چند تیکه کد، میتونه باعث کشف یه باگ بزرگ توی پروژه بشه که هرکسی از پس اون برنمیاد.آرزو میکنم شما اون فردی باشید که از پسش برمیاین?موفق و سربلند باشید❤Reza Hasani

پیاده سازی Private Routes در React

محمدجواد آقابابائی — Sat, 25 Jul 2020 15:06:59 +0430

تفکیک مسیر خصوصی از عمومی در Reactچند وقت پیش داشتم با همکارم صحبت می‌کردم و ازش سوال کردم که ببینم چطوری پروژه های ری‌اکت رو Route بندی میکنه ؟! دقیقا راه اشتباهی که خودم قبلا میرفتم رو انتخاب کرده بود چند نفر دیگه رو هم دیده بودم که اشتباه میزدن ، بنابراین تصمیم گرفتم راجب این قضیه بنویسم و با بقیه به اشتراک بذارم .اول از همه یه نکته ریز رو بهش اشاره کنم برای این مقاله یه سری پیش نیاز ها لازمه که ذکر میکنم خدمتتون - تسلط کافی به react router - آشنایی با یکی از state management هامرحله اولاول از همه نیازمند یک پروژه خام ری‌اکت هستیم. برای پیاده سازی نیازمند React Router هستیم ، پس این رو هم به پروژه اضافه می‌کنیم.npm install react-router-dom yarn add react-router-domتمامی کامپوننت های استفاده شده در مقاله پیوندشون آخر مقاله قرار داده شده !قراره که یه داشبورد ساده با هم پیاده کنیم که کاربر قبل از لاگین اجازه دسترسی به پنل رو نداره و پس از لاگین این اجازه رو پیدا میکنه خب تا اینجای کار فکر کنم متوجه private route شده باشین ، داشبورد یک کامپوننت خصوصی به حساب میاد یا بهتر بگم همون private route خودمون :)خب بیاین دایرکتوری پروژه رو با هم ایجاد کنیم و استارت کار رو بزنیم . شکل درختی دایرکتوری پروژهبرای تشخیص وضعیت لاگین کاربر من از State Management و Hooks استفاده کردم شما هم میتونین نسبت به نیاز خودتون مثل من یا با هر روشی که دوست دارین این قضیه رو هندل کنین.مرحله دومآماده سازی React Routerroutes. jsبرای آشنایی بیشتر با React Router به داکیومنت آن در پایین مقاله سر بزنید .پیاده سازی کامپوننت PrivateRoutePrivateRoute. jsدر اینجا ما یه تابع دارم که کارش اینه که از useAuth سوال میکنه آقا جان کاربر توکن داره یا نه ؟! به هنگامی که isLoggeIn پاسخ مثبت بهش برگردونه Route مورد نظر رو بارگذاری میکنه و اگه پاسخ منفی باشه کاربر رو ریدایرکت میکنه به آدرس "Login/" که همون صفحه لاگین ما هستش.پیاده سازی کامپوننت App به همراه RouterApp. jsتمامی route های خصوصی یک مشخصه به نام private دارن که boolean هست از روی این قضیه به راحتی route هامون رو از همه دیگه تفکیک می‌کنیم تنها با یک شرط . حالا دیگه یه App.js تر و تمیز توی پروژه هامون داریم :)) https://media.giphy.com/media/B0vFTrb0ZGDf2/giphy.gif چکیدهدر این مقاله راجع به نحوه پیاده سازی Private Route ها در React صحبت کردیم و یه روش خفن و تر و تمیز رو باهم پیاده کردیم که به وسیله اون به راحتی دسترسی کاربران را به Route هایی که نیازمند احراز هویت هستن محدود می‌کنیم .دمو و سورس کد https://codesandbox.io/embed/private-route-react-8dovj?file=/src/App.%20js پیوند ها : https://reactrouter.com/web/guides/quick-start https://reactjs.org/docs/context.html خوشحال میشم نظرات و پشنهادتون رو داشته باشم و امیدوارم لذت برده باشید.موفق و پیروز باشید...

چرا باید package-lock.json را دوست داشته باشیم؟!

Reza Hasani — Sun, 12 Jul 2020 19:37:48 +0430

اکثر ما توی محیط‌های کاری مختلف، به افرادی برخوردیم که بیشتر از ما توی یه سری چیزا کنجکاو میشن و میخوان علت وجود هرچیزی رو بدونن. ممکنه پیش خودمون سوال کرده باشیم که واقعا ریز شدن توی این موارد کمکی هم میکنه یا نه؟?وقتی که وسط یه پروژه کامپوننت‌ها سنگین شد و کم‌کم به مشکلاتی به ظاهر غیرمنطقی برخوردم، متوجه شدم که جواب سوال بالا، آره هست!یکی از این موارد، این دوتا فایلیه که هممون دیدیمش(package.json و package-lock.json). فایلایی که فقط ممکنه در حد گذاشتن یا نگذاشتن توی gitignore و یه سری لیست dependency ازشون بدونیم. توی این پست کاربرد و تفاوت‌های این دوتا فایل رو قراره یاد بگیریم.package-lock.jsonقبل از شروع بحثمون، یه سوالی رو مطرح میکنم.چرا package-lock.json حتما و حتما و حتما باید توی source control و commitهامون وجود داشته باشه؟ تا حالا راجع بهش فکر کردین؟ جواب این سوالو آخر این مقاله متوجه خواهید شد :))تا قبل از ورژن 5 npm، فایلی با عنوان package-lock.json بعد از زدن دستور npm install تولید نمیشد و تا اون موقع از package.json برای نصب ماژول‌ها توی سیستم شخص دیگه استفاده میشد. اما از بعد این ورژن، فایل package-lock.json اطلاعات خیلی بیشتری رو درمورد هر پکیج و dependencyهای اون پکیج بهمون میداد. و این یعنی به صفر رسوندن اختلاف برای نصب ماژول‌ها توی سیستم شخص دیگه :) پس برعکس چیزی که هممون فکر میکنیم، npm برای نصب پکیج‌ها، از package.json یک لیست dependency پیدا میکنه و برای ورژن پکیج‌های اون لیست، سراغ package-lock.json میره( بد نیست توی پرانتز اشاره کنم که دستور npm ci، برعکس npm i مستقیما به package-lock.json نگاه میکنه و از package.json فقط برای بررسی هماهنگی بین ورژن‌های دو فایل استفاده میکنه. و اگه ورژن‌های یک پکیج در این دو فایل یکی نبودند، موقع نصب ارور میده )ممکنه الان توی ذهنتون بیاد که package.json برای نصب یک ماژول کافیه چون دقیقا ورژنی که میخوایم رو داره و وقتی یه کاربری npm install میزنه و توی لیست dependencyها ورژن دقیق یک ماژول رو داشته باشیم، دقیقا مثل اینه که زده باشیم npm install sth@v.v.v. پس چرا package-lock.json نیاز داریم؟جواب: dependencies of dependency :)با مثال توضیح میدم. فرض کنید میخوایم پکیج react-helmet رو توی ورژن 5.2.1 نصب کنیم. دستور زیر رو میزنیم.npm i react-helmet@5.2.1بلافاصله بعد از نصب، فایل package-lock.json هم آپدیت میشه. از طرفی هم توی package.json این خط به dependencies اضافه خواهد شد:"dependencies": { "react-helmet": "^5.2.1" }مشکل دقیقا از اینجا شروع میشه! توضیحات package.json برای یک پکیج کافی نیست! خود react-helmet قطعا dependencyهایی داره که هرکدومشون ورژن خاصی دارن. وقتی که ورژن react-helmet تغییری نکرده و همون 5.2.1 باقی مونده ولی کاربرِ دیگه پروژه رو میگیره و npm i میزنه، ممکنه ورژن چندتا از dependencyهایی که react-helmet استفاده کرده تغییر کرده باشه! چیزی که به هیچ وجه توی package.json وجود نداره. و باگ از جایی شروع میشه که اون تفاوت ورژن dependency، باعث بشه یک سری فانکشن‌ها به شکل دیگه عمل کنند! و اینجاست که متوجه حرف اول مقاله میشیم! فکر میکنیم غیر منطقیه! ولی مشکل از ما بوده که package-lock.json رو فایل اضافی تلقی میکردیم و اون رو توی gitignore گذاشتیم :))با هم اجزای موجود توی فایل package-lock.json برای مثالی که زدیم رو بررسی میکنیم:محتویات package-lock برای react-helemt@5.2.1ورژن پکیج‌هایی که react-helmet داره از اونا استفاده میکنه رو به خوبی توی عکس بالا میبینید. پس npm برای نصب ماژول‌ها از این فایل استفاده میکنه چون هرچیزی که مورد نیازشه دقیقا توی این فایل ذکر شده. اگر دوست داشتین بیشتر درمورد integrity و تفاوت sha512 , sha1, ... بدونین، این document رو پیشنهاد میکنم https://w3c.github.io/webappsec-subresource-integrity/Semantic Versioningتوی این قسمت میخوام درمورد ورژن‌بندی npm هم موردی رو ذکر کنم. اگر دقت کرده باشید ورژن‌های همه پکیج‌های npm یا ورژن پروژه خودتون موقع زدن دستور npm init، از سه عدد تشکیل شده که به صورت a.b.c هست. به این روشی که npm استفاده میکنه، semantic versioning یا به اختصار semver میگن. که توی این روش ورژن بندی هرکدوم از حروف a, b, c، نشان‌دهنده یه نوع تغییر هستند که به صورت زیر هست:a.b.c -> a: major version, b: minor version, c: patch versionsآخرین حرف یعنی c، نشان‌دهنده یک bugfix هست که تغییر بزرگی رو توی پکیج ایجاد نکرده.دومین حرف یعنی b، نشان‌دهنده یک سری تغییر در فانکشن‌ها و عملکردهای پکیج هست که باز هم این تغییر باعث تغییر بزرگ توی پکیج و عوض شدن کلیِ چیزها نمیشه.و اما اولین حرف یعنی a، نشان‌دهنده تغییر بزرگیه که ممکنه روی پروژه‌ای که ما ازش استفاده میکنیم ناهماهنگی‌هایی رو به وجود بیاره. پس اگر a توی پکیجاتون فرق کرد، احتمالا مجبورید که برای یک سری جاها document اون پکیج رو دوباره مطالعه کنید?حالا فرض کنید یکی از dependencyهای پکیج react-helmet، از 15.5.4 تبدیل بشه به 16.5.4 و فایل package-lock توی source control وجود نداشته باشه. همه اعضای تیم بعد از باگ:همه این‌ها گفته شد تا به یک نتیجه برسیم:وجود package-lock.json در source control اجباریست و تنها دلیل آن هم dependencyهای پکیجیست که نصب کردیم.و سخن آخر این که سعی کنیم شبیه اون آدمای کنجکاو باشیم! وگرنه مشکلاتی ممکنه برامون پیش بیاد که تا مرز توقف پروژه برای یه تایم طولانی پیش بره.موفق و سربلند باشید❤ Reza Hasani

مفهوم IIFE و Closure در جاوا اسکریپت و Nested Functions

Reza Hasani — Wed, 01 Jul 2020 01:08:37 +0430

جاوا اسکریپت پره از ارورهایی که خیلی موقعا دردسرای بزرگی رو توی پروژه‌ها ایجاد میکنه. اما یه سری قوانین میتونن به کمکمون بیان تا به جای handle اون ارور با روش‌های غیر منطقی و کد کثیف، خیلی راحت درک و از ریشه حلشون کنیم. توی این پست میخوایم یکی از اون مشکلات و روش handleش رو یاد بگیریم :)خیلی وقتا نیاز داریم که توی functionمون، یه function دیگه داشته ‌باشیم تا بتونیم از دیتاهای موجود استفاده کنیم. روش خیلی خوبیه برای این که سمت تعریف متغیر global یا setState و ... نریم. اما ممکنه این کارمون منجر به ارورهایی بشه که توی این متن با این ارورها و handleکردنشون آشنا میشیم!اول کار رو با یه مثال شروع می‌کنم. به نظرتون با call کردن تابع f، چه خروجی‌ای خواهیم‌داشت؟ (قبل از خوندن ادامه متن، حتما روش فکر کنین)خروجی f به نظر شما چیه؟جواب: undefined!و اما علتش چیزی میشه که ما رو میرسونه به مفهوم خیلی مهمی به اسم Closure. نقل قول زیر میتونه درجه اهمیتش رو برسونه:Coding in JavaScript without an understanding of closures is like trying to speak English without an understanding of grammar rulesاگر بخوام خیلی کوتاه و ساده تعریف کنم، باید بگم که closureها هستن که به ما اجازه دسترسی از inner function به outer function میدن. این رو هم یادتون باشه که توی JavaScript، بلافاصله بعد از ساخته‌شدن تابع، closure هم ساخته میشه.توی تیکه کد بالا، وقتی وارد scope توی function اصلی(wrapElements) میشیم، برای هر variable که result و i و n هستند، یه slot توی memory اختصاص داده میشه (allocate)و مشکل از جایی شروع میشه که ما وارد حلقه for میشیم. وقتی وارد این حلقه میشیم، خیلیامون انتظار داریم که خود value از i رو داشته‌باشیم. در حالی که ما فقط و فقط یک reference از i داریم و دیگر هیچ!پس یادمون باشه که:Closures store their outer variables by reference, not by valueعلت undefinedگرفتنمون حالا معلوم میشه: این که functionهای داخلی، منتظر میمونن تا آخرین مقدار Closure براشون فرستاده بشه. یعنی توی این تیکه کد، توی حلقه for، تابع صدا زده نمیشه تا وقتی که i به عدد 5 که مقدار نهایی هست میرسه. و اینجاست که میخواد توی آرایه با ایندکس‌های 0 تا 4، دنبال ایندکس 5 بگرده و به undefined میخوره :)حالا فرض کنید var i رو اون بالا تعریف نکنیم و بیاریمش تو scope پایینی و همونجایی که قراره استفادش کنیم. پس کد ما این شکلی میشه:جالبه بدونید که اینجا هم undefined میخوریم!و علتش هم اینه که وقتی ما توی scopeهای پایینی، متغیری رو تعریف می‌کنیم، دقیقا مثل اینه که اون بالا تعریفش کردیم و این پایین ازش استفاده میکنیم! پس بار دیگه، فقط و فقط یه slot توی مموری برای i خواهیم داشت. دقیقا مثل تیکه کد اولمون.پس با ارور آشنا شدیم :) چجوری هندلش کنیم؟جوابش ما رو میرسونه به عنوان بحثمون یعنی Immediately Invoked Function Expressionاین تیکه کد رو خوب نگاه کنید!استفاده از تکنیک IIFEاین تکنیک توی هر تغییر i، یه function میسازه و بلافاصله صداش میزنه. و اینجاست که آرایه result با هر تغییر i، یه عضو جدید درست میکنه. خوبه که اسم اصلی اینجور تعریف توابع رو هم بدونیم: Self-invoking functions و دیگه ارور undefined رو نخواهیم‌ داشت?پس به همین راحتی و با خوندن چند کتاب خوب از جاوا اسکریپت، میتونیم این مشکلا رو از ریشه متوجه بشیم تا این ارورها و handleکردن غیرمنطقیشون، بعدا باعث شکل‌گیری فاجعه توی پروژه نشهموفق و سربلند باشید❤ Reza Hasani

کار با AsyncStorage در ReactNative

محمدجواد آقابابائی — Mon, 09 Mar 2020 04:15:52 +0330

کار با AsyncStorage در ReactNativeAsyncStorage چیست ؟ به زبان ساده میشه گفت ، ذخیره داده ها بر روی دستگاه به صورت لوکال و واکشی آن هامن تقریبا دوس دارم توضیحات مختصر ، کوتاه و اما مفید بدم که شما در کمترین زمان ممکن درک کنید و صحبت های زیاد من هم سرتون رو درد نیاره :)خب بریم یکم بیشتر راجب AsyncStorage براتون توضیح بدم تا کاملا درک کنید که چی هست اصن ! من یه اسمی گذاشتم برای AsyncStorage که بهش میگم ذخیره سازی کلیدی ، یعنی اینکه یک سری داده رو ما با کلید منحصر به فرد خودشون به سمت AsyncStorage ارسال میکنیم و اون هم برای ما در حافظه گوشی های اندرویدی یا ios ذخیره میکنه و هنگامی که به این داده ها نیاز داشتیم فقط کافیه کلید منحصر به فرد اون داده رو صدا بزنیم به فرض مثال 'TOKEN-KEY' ، همین جا به یه سری نکات مهم اشاره کنم:ذخیره سازی کلیدی (AsyncStorage) برای داده های بزرگ پیشنهاد نمیشه پس در نظر داشته باشین که برای داده های کوتاه گزینه خیلی مناسبی هست و در کمترین زمان ممکن داده را در اختیار ما قرار میده یا برامون ذخیره میکنه .داده های ذخیره شده با بستن اپلیکیشن یا ریست کردن دستگاه از بین نخواهد رفت تنها با پاک شدن اپلیکیشن یا clear data کردن توسط کاربر اطلاعات از دست خواهند رفت .خب اگه هنوزم براتون پیچیده هست این قضیه و شما یک توسعه دهنده وب هستید میخوام بهتون بگم که AsyncStorage تقریبا LocalStorage خودمون هستش و برای مثال به ما در احراز هویت کاربر کمک میکنه. یکم بیشتر بخوام توضیح بدم فرض کنید ما نیازمند این هستیم یک سری توضیحات به کاربر برای اولین بار نشان دهیم و دیگر به آن یادآوری نکنیم و خب این کاربر رو اذیت میکنه که هر بار این توضیحات تکراری رو ببینه ، یکی از روش های پیاده سازی AsyncStorage هست . خب فکر کنم وقتشه یکم دست به کد بشیم :)من دو حالت استفاده از AsyncStorage رو داخل کد بهتون نمایش میدم که عبارت هستند از :1.ذخیره داده ها با کلید منحصر به فردذخیره داده ها با کلید منحصر به فرد2.واکشی داده ها با کلید منحصر به فردواکشی داده ها با کلید منحصر به فرددر ضمن متد های دیگری هم برای استفاده از AsyncStorage وجود داره که تعدادی از اون ها رو در زیر براتون بیان میکنم و باقی موارد را می توانید با مراجعه به لینک در پیوند بدست آورید .ذخیره داده ها با کلید منحصر به فردواکشی داده ها با کلید منحصر به فردپاکسازی تمامی کلید ها و داده های آن هاپاکسازی یک کلید خاص به همراه داده ی آنواکشی تمامی کلید های ذخیره شده و داده هاتوجه داشته باشید که برای استفاده از AsyncStorage نباید آن را به این صورت import نمایید import { AsyncStorage } from 'react-native';و باید به حالت پایین import نمایید زیرا مدل قبل منسوخ شده می باشد .import AsyncStorage from '@react-native-community/async-storage';پیوند : https://reactnative.dev/docs/asyncstorage خوشحال میشم نظرات و پشنهادتون رو داشته باشم و امیدوارم لذت برده باشید موفق و پیروز باشید .