نوشته های کامران داور

کلون گرفتن از یک آبجکت در جاوا اسکریپت

کامران داور — Sun, 13 Nov 2022 18:21:22 +0330

تو این مقاله میخوام به این سوال جواب بدم که چطور میشه از یه آبجکت یک کپی مستقل ایجاد کرد یا clone گرفت. مستقل بودن به معنای اینکه هر آبجکت یک آدرس جداگونه در مموری داشته باشه. که اصطلاحا بهش میگن deep copy.روش اول : for in looplet user = { name: "John", age: 30 }; let clone = {}; for (let key in user) { clone[key] = user[key]; }روش دوم : Object.assignlet user = { name: "John", age: 30 }; let clone = Object.assign({}, user);روش سوم: Spread operatorlet user = { name: "John", age: 30 }; let clone = {...user};اینجا یه نکته ظریف وجود داره و اونم اینکه آبجکت user یک سطح بیشتر نداره اما اگه ما یه nested Object داشته باشیم آیا روش های بالا جواب میدن؟یکیشو بررسی میکنیم:let user= { name: "John", sizes: { height: 182, width: 50 } }; let clone = Object.assign({}, user); alert( user.sizes === clone.sizes ); // true, same object // user and clone share sizes user.sizes.width = 60; // change a property from one place alert(clone.sizes.width); // 60, get the result from the other oneهمونطور که میبنید تغییر width در user باعث تغییر width در clone شده. و این یعنی اینکه deep copy برای sizes اتفاق نیافتاده.پس برای اینکه بتونیم یک deep copy از یه nested object ایجاد کنیم این روش ها به کارمون نمیاد. و باید از روش های زیر استفاده کنیم:روش چهارم: structuredClone (For nested objects)let user = { name: "John", sizes: { height: 182, width: 50 } }; let clone = structuredClone(user);روش پنجم : cloneDeep from lodash librarylet user = { name: "John", sizes: { height: 182, width: 50 } }; let clone = _.cloneDeep(user);پایانمنابع:1- https://javascript.info/object-copy2- Object copy using Spread operator actually shallow or deep?

نینجا کد

کامران داور — Sun, 30 Oct 2022 16:45:20 +0330

این مقاله ترجمه ای خلاصه وار از این نوشتار است: https://javascript.info/ninja-codeدر این مقاله سعی کردم که ترجمه رو نزدیک به متن اصلی نگه دارم. متن اصلی این مقاله طنز داره و از تمام موارد این مقاله باید به شدت بپرهیزید. در واقع باید سعی کنید اصلا نینجایی کد نزنید .1- کد را تا حد امکان کوتاه کنید. نشان دهید که چقدر باهوش هستید.i = i ? i < 0 ? Math.max(0, len + i) : i : 0;2- راه دیگر برای کدنویسی کوتاه تر استفاده از نام متغیرهای تک حرفی در همه جا است. مانند a، b یا c.3- اگر قوانین تیم استفاده از نام های تک حرفی و مبهم را ممنوع می کند - آنها را کوتاه کنید، مختصر کنید.list → lst userAgent → ua browser → brsr4- در هنگام انتخاب نام سعی کنید از انتزاعی ترین کلمه استفاده کنید. مانند obj، data، value، item، elem و غیره.5- فقط یک برنامه نویس واقعاً دقیق باید بتواند کد شما را درک کند.یکی از راه‌ها استفاده از نام متغیرهای مشابه، مانند data و date است. آنها را تا جایی که می توانید مخلوط کنید.6- استفاده از نام های مشابه برای چیزهای مشابه زندگی را جذاب تر می کند و خلاقیت شما را به عموم نشان می دهد. به عنوان مثال، پیشوندهای تابع را در نظر بگیرید. اگر تابعی پیامی را بر روی صفحه نمایش نشان می‌دهد - آن را با display شروع کنید، مانند displayMessage. و سپس اگر تابع دیگری روی صفحه نمایشگر چیز دیگری مانند نام کاربری را نشان داد، آن را با show (مانند showName) شروع کنید.7- یک متغیر جدید را فقط و فقط در صورت لزوم اضافه کنید. در عوض، از نام‌های موجود دوباره استفاده کنید. فقط مقادیر جدیدی را در آنها بنویسید. در یک تابع سعی کنید فقط از متغیرهای ارسال شده به عنوان پارامتر استفاده کنید. این کار تشخیص اینکه چه چیزی دقیقاً در متغیر فعلی وجود دارد و همچنین اینکه از کجا می آید را واقعاً دشوار میکند. هدف توسعه شهود (بینش یا بصیرت یا درک ناگهانی) و حافظه شخصی است که کد را می خواند. فردی با شهود ضعیف باید کد را خط به خط تجزیه و تحلیل کند و تغییرات را از طریق هر خط کد دنبال کند. یک نوع پیشرفته از این رویکرد، جایگزین کردن مخفیانه (!) مقدار با چیزی مشابه در وسط یک حلقه یا یک تابع است.function ninjaFunction(elem) { // 20 lines of code working with elem elem = clone(elem); // 20 more lines, now working with the clone of the elem! }8- قبل از نام متغیرها آندرلاین قرار دهید. مانند _name یا __value. اگر فقط معنی آنها را می دانستید عالی می شد. یا، بهتر است، آنها را فقط برای سرگرمی، بدون هیچ معنای خاصی اضافه کنید. یا معانی مختلف در جاهای مختلف. شما با یک تیر دو نشان میزنید. اول، کد طولانی‌تر و کمتر قابل خواندن می‌شود، و دوم، یک توسعه‌دهنده همکار ممکن است زمان زیادی را صرف کشف معنای آندرلاین ها کند.9- بگذارید همه ببینند موجودات شما چقدر باشکوه هستند! نام هایی مانند superElement، megaFrame و niceItem قطعا خواننده را روشن می کند.10- از نام های یکسان برای متغیرهای داخل و خارج یک تابع استفاده کنید. به همین سادگی. هیچ تلاشی برای ایجاد نام های جدید نکنید.let user = authenticateUser(); function render() { let user = anotherValue(); ... }11- توابعی وجود دارد که به نظر می رسد چیزی را تغییر نمی دهند. مانند isReady()، checkPermission()، findTags()، فرض بر این است که آنها محاسبات را انجام می دهند، داده ها را پیدا کرده و برمی گردانند، بدون تغییر چیزی خارج از آنها. به عبارت دیگر، بدون «side-effects». یک ترفند واقعا زیبا این است که علاوه بر وظیفه اصلی، یک اقدام "مفید" به آنها اضافه کنید.ابراز تعجب مات و مبهوت در صورت همکارتان وقتی می بیند تابعی به نام check یا find در حال تغییر چیزی است.راه دیگر برای غافلگیری این است که یک نتیجه غیر استاندارد را برگردانید.اجازه دهید فراخوانی checkPermission نه true برگرداند نه false، بلکه یک شی پیچیده را برگرداند.12-تابع را با آنچه در نام آن نوشته شده محدود نکنید. آن را گسترش دهید. به عنوان مثال، یک تابع validateEmail(email) می تواند (علاوه بر بررسی صحت ایمیل) یک پیام خطا نشان دهد و از شما بخواهد که ایمیل را دوباره وارد کنید. پیوستن چندین عمل در یک تابع از کد شما در برابر استفاده مجدد محافظت می کند.این مقاله ترجمه ای خلاصه وار از این نوشتار است: https://javascript.info/ninja-code

Formik

کامران داور — Mon, 16 Mar 2020 13:32:07 +0330

مدت کوتاهیه که با یه کتابخونه جدید آشنا شدم به اسم فرمیک. فرمیک با هدف ساخت فرم ها و مدیریت اونها و اعتبار سنجی شون در react ساخته شده. این کتابخونه باعث شده که روند توسعه ام نسبت به قبل خیلی خیلی سریع بشه. تا قبل ازین فرم ها رو بدون هیچ کتابخونهای ایجاد میکردم و چند تا مشکل اساسی برام پیش میومد:1- باید سناریو های مختلفی که کاربر اشتباه میکنه رو در نظر میگرفتم، براش الگوریتمی طرح میکرم و پیاده سازیش میکردم. که این مراحل بسیار بسیار زمان بر بود.2- همین سناریو های مختلف باعث میشد که کد هام با شرط های تو در تو حجمش خیلی خیلی زیاد بشه , و خوندن و درکش برای هر برنامه نویس دیگه ای رو کار زجرآوری میکرد.این مشکلات باعث شد تا دنبال کتابخونه ای بگردم تا اعتبار سنجی فرم هام رو دست بگیره (هندل کنه).و با فرمیک مواجه شدم و با خوندن داکیومنتش اونقدر جذبم کرد تا تمام فرم های اون پروژه رو از اول یا فرمیک باز نویسی کردم.فرمیک چه مشکلاتی رو برای من رفع کرد:1- مدت زمان ساخت فرم ها رو به شدت کاهش داد.2- حجم کد ها رو کمتر نصف کرد.3- مطالعه کدها برا هر برنامه نویسی رو ممکن کرد؛ حالا هر کسی بخواد کد های منو بخونه و درک کنه کافیه که فقط داکیومت فرمیک رو یک بار خونده باشه.سخن پایانی اگر شما هم موقع طراحی فرم ها اشکتون در میاد از فرمیک اسفاده کنید. خوشحال میشم نظرات شما رو بدونم. اگه این نوشته براتون مفید بود لایک و فالو رو فراموش نکنید.

چطور برای مصاحبه کاری آماده شویم؟

کامران داور — Tue, 10 Mar 2020 01:36:39 +0330

شاید با خودت بگی: "خب، مصاحبه که اماده شدن نمی خواد، من تو زمینه کاری خودم خدا هستم. میرم توی مصاحبه و بهترین ارائه رو انجام میدم." ، اما احتمالا اینطور نیست و همیشه یه فرد آماده عملکلرد بهتر ی داره نسبت به وقتی که آمده نیست. بنابراین بهتره روز قبل مصاحبه کارهایی رو انجام بدین:1 -رزومه خودتون رو با دقت مطالعه کنیدموقع مطالعه رزومه باید برای تمام شغل (پروژه) های قبلی خودتون توضیح مختصری در حد یکی دو پاراگراف توی ذهنتون آماده کنید، یادتون باشه که برای شغل هایی که سال های خیلی دوری داشتین لازم نیست توی مصاحبه زیادی توضیح بدین درعوض بیشتر وقتتون رو بزارن روی آخرین شغل هاتون.2 - مبانی زبان برنانه نویسی خودتون رو مرورو کنیدببینید شما مبانی زبان برنامه نویسی مد نظرتون رو یاد میگیرید و فریم ورکی رو انتخاب میکنید و شروع میکنید به کار کردن، اما تو این کارهای روزمره بعضی از مبانی زبان شما تکرار نمیشن و آهسته آهسته به فراموشی سپرده میشن، اما توی مصاحبه مستقیم دست گذاشته میشه روی همین مبانی زبان برنامه نویسی شما. بنابراین حتما باید مبانی زبان خاص خودتون رو مرور کنید.3- پرتکرارترین سوالات مصاحبه زبان خودتون رو سرچ کنید. در گوگل سوالات پرتکرار مصاحبها رو در حوزه زبان خودتون سرچ کنید، مثلا: top interview questions javaقطعا این ترفند احتمال موفقیت شما تو مصاحبه رو افزایش میده.4- برای سوالات شخصی آماده آماده باشیداین قسمت مصاحبه چالش برانگیزه، چرا که مصاحبه شونده چندان انتظار سوالات شخصی نداره و شوکه میشه. بعضی ازین سوالات عبارتند از:خودتو ده سال آینده کجا میبینی؟ نقاط ضعفت چیه؟ اوقات فراقتت به چه شکلی میگذره؟بزرگترین چالش برنامه نویسی ای که داشتی چی بوده؟باید مراقب باشین که به این سوالات خیلی هوشمندانه یا زیرکانه جواب بدین. چون که ممکنه یک جواب نسنجید توی این قسمت شما رو مردود کنه. 5- در مورد شرکت مد نظرتون اطلاعات بدست بیاریناین اطلاعات میتونه شامل موارد زیر باشه:حوزه فعالیت هاروش های کاریچالش های کاریمحصولاتمشتریانبا داشتن این اطلاعات میتونید پاسخ های زیرکانه ای به سوالات مصاحبه کننده بدید. طوری که مصاحبه کننده با خودش بگه : "آقا این همونیه که میخوایم".6- تلاش نکنید برای "همه چیز" آماده شید.اونها برای سوال پرسیدن و به چالش کشیدن شما انتخاب های بی نهایتی دارن، و قطعا شما نخواهید تونست برای همه چیز اماده شید. پس وسواس رو بزارید کنار و شب به موقع بخوابید که صبح برای مصاحبه سر حال باشید.

آ بهتر است یا ب؟

کامران داور — Wed, 04 Mar 2020 23:24:23 +0330

نود جی اس بهتره یا php?ری اکت بهتر است یا ویو؟جاوا اسکریپت بهتر است یا پایتون؟ری اکت نیتیو بهتر است یا فلاتر؟فرانت اند بهتر است یا بک اند؟!!!! (دستگاه عصبی بهتر است یا دستگاه گوارش؟!!!)و...حتما اگر برنامه نویس هستین یا تازه وارد دنیای برنامه نویسی شدین با تعداد بیشماری از این سوالات رو به رو شده اید. همچنین در گروه ها و انجمن های برنامه نویسی بحث های بی نهایتی درباره این مسائل وجود دارد.اما اگر میخواهید شبیه یک برنامه نویس حرفه ای فکر کنید باید برای همیشه این دست سوالات را کنار بگذارید.زبان های برنامه نویسی، چهارچوب ها و کتاب خانه ها همگی ابزار های برنامه نویسان هستند و هر کدام با هدف یا هدف هایی ساخته شده اند. هر ابزار برای انجام بعضی کار ها مناسب است و برای انجام بعضی دیگر خیر.بنابراین حرفه ای تر است سوالات خود را این طور مطرح کنید:برای انجام کار X ابزار آ بهتر است یا ابزار ب؟ابزار آ برای حل کردن چه مشکلی به وجود آمده است؟ ابزار ب چطور؟ابزار ب چه نقاط ضعفی دارد؟ چه نقاط قوتی دارد؟خوشحال میشم نظرات شما رو بدونم. اگه این نوشته براتون مفید بود لایک و فالو رو فراموش نکنید.

یک مقایسه نا به جا: Redux یا React Context؟(بخش اول)

کامران داور — Fri, 06 Dec 2019 22:47:14 +0330

سوال ما باید این باشه: When to use eachدر این مقاله ها قصد دارم به دو سوال پاسخ بدم:سوال اول: Redux چیه؟ React Context چیه؟ و در نتیجه چرا نباید با هم مقایسه بشن؟سوال دوم: مزیت های هر کدوم ازین ابزار ها چیه و کجا باید استفاده بشن؟بریم سراغ سوال اول:ریداکس چیه و چه میکنه؟A predictable state container for JavaScript apps.بنا به تعریف https://redux.js.org ، ریداکس یک state container قابل پیش بینی هست برای اپ های جاوا اسکریپت. قابل پیش بینی بودن استیت و تغییراتش در این state container مهم ترین ویژگیشه.ری اکت کانتکست چیه و چه میکنه؟Context provides a way to pass data through the component tree without having to pass props down manually at every level. بنا به تعریف https://reactjs.org/docs/context.html، کانتکست روشی رو فراهم میکنه تا بشه اطلاعات کامپونتت رو به سطوح پایین تر (نوادگان) فرستاد بدون این که لازم باشه اطلاعات رو به طور دستی با props یه سطوح پایینی پاس داد.چرا نباید با هم مقایسه بشن؟ و چرا نباید یکی جایگزین دیگری بشه؟از دو تعریف بالا من نتیجه میگیرم که اساسا این دو -ریداکس و کانتکست- برای دو هدف جدا از هم طراحی شدن به عبارت دیگه راه حل هایی هستن برای حل کردن مشکلات متفاوت : یکی برای قابل پیش بینی کردن رفتار state و دیگری برای پاس دادن اطلاعات به سطوح پایین تر کامپوننت. بنابر این سوال درست اینه: ?When to use eachپاسخ سوال دوم رو در بخش دوم این مقاله به زودی منتشر خواهم کرد.خوش حال میشم نظراتتون رو راجع به این مقاله بدونم.