https://virgool.io/feed/@mojtaba_afraz Dynamic and creative software developer with years of experience in generating strong code for companies. With first-class coding skills. As well as active and interested in startups fa 2026-06-07 14:53:25 https://files.virgool.io/upload/users/497223/avatar/PfG11C.jpeg?height=120&width=120 https://virgool.io/@mojtaba_afraz https://virgool.io/@mojtaba_afraz/%D8%B1%D9%88%D9%85%D9%88%D9%84%D9%88%D8%B3-%DA%A9%D8%A8%DB%8C%D8%B1-%D9%82%D8%B5%D9%87-%DB%8C-%D9%84%D8%A8%D8%AE%D9%86%D8%AF%D9%87%D8%A7%DB%8C%DB%8C-%DA%A9%D9%87-%DA%86%DB%8C%D8%B2%DB%8C-%D8%B1%D8%A7-%D8%B9%D9%88%D8%B6-%D9%86%D9%85%DB%8C-%DA%A9%D9%86%D9%86%D8%AF-k9nwg1dhdwhc بعضی وقت‌ها یه قصه، یه آدم خیالی، طوری میشه آینه‌ی زندگی آدم که دیگه نمی‌فهمی داری داستان رو میخونی یا خودتو برای من، رومولوس کبیر همچین قصه‌ای بود.یه پادشاه تنها، یه امپراتوری در حال سقوط، و مردی که به جای جنگیدن، تصمیم گرفت فقط نگاه کنه.نه از روی ترس، نه از روی ناتوانی؛ فقط چون فهمیده بود گاهی تلاش کردن، فقط درد رو طولانی‌تر می‌کنه.منم گاهی همین حس رو دارم.حسی که نمیخوای قهرمان باشی، نمیخوای چیزی رو نجات بدی، حتی شاید دلت بخواد همه چیز تموم بشه اما دنیا حتی همون تموم شدن رو هم ازت دریغ می‌کنه.نقشه ‌های پشت لبخندرومولوس یه مرد خسته بود.خسته‌تر از اون که دیگه بخواد برای چیزی بجنگه.اون تصمیم گرفته بود بذاره روم سقوط کنه، شاید برای اینکه باور داشت یه امپراتوری که فقط با خون زنده می‌مونه، دیگه ارزش زنده موندن نداره.اما این تصمیم رو داد نزد، فریاد نکشید، شعار نداد.فقط لبخند زد.فقط به بوقلمون‌هاش رسید.فقط تماشا کرد.من این کار رو خوب می‌فهمم.خیلی وقت‌ها، وقتی حرف زدن و جنگیدن فقط خستگی میاره، آدم یه ماسک بیخیالی می‌زنه.نه اینکه چیزی براش مهم نباشه — بلکه دقیقاً برعکس، چون همه چیز براش مهمه و فهمیده که جنگیدن فایده‌ای نداره.رومولوس بلد بود خودش رو قایم کنه.و من هم، گاهی یاد گرفتم پشت خنده‌هام، تصمیم‌های سخت و شکست‌خورده‌مو پنهان کنموقتی دنیا به تصمیم‌های آدم می‌خندهآدم بعضی وقت‌ها به یه جایی می‌رسه که میگه: «باشه، تمومش کنیم.»میگه: «دیگه نمی‌خوام چیزی رو نگه دارم. حتی اگه قراره نابود شم، اشکالی نداره.»رومولوس همینو خواست.ولی حتی این آرزو هم براش محقق نشد.جهان انقدر بی‌توجه و بی‌منطقه که گاهی نمیذاره حتی شکست بخوری.گاهی دنیا حتی شکست رو هم ازت دریغ می‌کنه.این یکی از تلخ‌ترین تجربه‌های زندگیه:وقتی حتی آخرین اختیارت — انتخاب نابود شدن — هم دست خودت نیست.من بارها این حس رو چشیدم.اونجایی که فکر می‌کنی «خب دیگه، بسه» ولی دنیا به طرز عجیبی ادامه میده.نه بهتر میشه، نه تموم.فقط کش میاد، فقط بیشتر خسته‌ت می‌کنه.سکوت؛ تنها کاری که میمونهرومولوس جنگید؟ نه.غر زد؟ نه.دست به گریه یا فریاد زد؟ نه.فقط ساکت موند و نگاه کرد.گاهی تو زندگی، سکوت کردن از هر کاری سخت‌تره.از قهرمان بازی کردن سخت‌تره.از تسلیم شدن سخت‌تره.اینکه ببینی دنیایی که هیچی ازت نمی‌فهمه، داره راه خودش رو میره، و تو فقط نگاه کنی،نه امید ببندی، نه نفرت بورزی، نه بجنگی.لبخند زدن وسط فروپاشی، شاید تنها کاریه که میشه کرد.یه لبخند خسته، که شاید برای دنیا هیچ فرقی نکنه،ولی برای خودت یه نشونه‌ست؛یه یادآوری که حتی وقتی همه چیز از دست میره، هنوز یه چیزی ته دلت زنده مونده.رومولوس برای من یه قهرمان نیست.کسی که فهمیده دست آدم تو خیلی چیزا بسته‌ست.فهمیده که گاهی باید گذاشت همه چیز همونطور که میخواد، پیش بره.فهمیده که ارزش داره، حتی تو وسط فروپاشی، اون یه ذره وقار، اون لبخند خسته رو نگه داری.نه برای دنیا،برای خودت مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Sun, 27 Apr 2025 20:50:54 +0330 https://virgool.io/@mojtaba_afraz/%D8%B1%DB%8C%D9%BE%D9%88%D8%B2%DB%8C%D8%AA%D9%88%D8%B1%DB%8C-%D9%87%D8%A7%DB%8C%DB%8C-%DA%A9%D9%87-%D8%B4%D9%85%D8%A7-%D8%B1%D8%A7-%D8%A8%D9%87-%DB%8C%DA%A9-%D8%BA%D9%88%D9%84-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%D9%85%DB%8C%DA%A9%D9%86%D8%AF%D9%82%D8%B3%D9%85%D8%AA-%D8%AF%D9%88%D9%85-yqetswqhv6pw یادگرفتن و عمیق شدن تو مباحث جاوااسکریپت میتونه سخت و طاقت فرسا باشه،البته اگر از منابعی که در دسترس شما هست مطلع نباشید،پس اینجا میخوام بهتون ریپوزیتوری هایی معرفی کنم که با استفاده از آن ها اصلا نیاز به پرداخت هزینه های گزاف برای یادگیری ندارید !این ریپوزیتوری ها شامل همه چیزهایی است که شما نیاز دارید.موضوعاتی از الگوریتم ها و اصول مهندسی گرفته تا راهنماهای سبک، تکه کدها، چیت شیت ها، کتاب ها، پروژه ها، سوالات مصاحبه، تست و غیره را در بر می گیرد.11 - awesome-javascript : مجموعه ای از کتابخانه های جاوا اسکریپت و منابع در سمت مرورگر.12 - modern-js-cheatsheet : چیت شیتی برای دانش جاوا اسکریپت که اغلب در پروژه های مدرن با آن مواجه می شوید.13 - jstips : نکات مفید جاوا اسکریپت که به شماکمک میکند کدنویسی خود را بهبود ببخشید.14 - js-stack-from-scratch : آموزش گام به گام ساخت یک Stack جاوا اسکریپت مدرن.15 - Awesome JavaScript Projects : مجموعه ای از پروژه های جاوا اسکریپت.16 - JavaScript30 : دوره معروف جاوا اسکریپت Wes Bos.17 - project-guidelines : مجموعه ای از بهترین روش ها برای پروژه های جاوا اسکریپت.18 - nodebestpractices : لیست بست پرکتیس های Node.js19 - javascript-testing-best-practices : بهترین شیوه های تست جاوا اسکریپت و Node.js جامع و کامل.20 - javascript-interview-questions : لیست 1000 سوال مصاحبه جاوا اسکریپت. مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Wed, 13 Apr 2022 15:12:44 +0430 https://virgool.io/@mojtaba_afraz/%D8%B1%DB%8C%D9%BE%D9%88%D8%B2%DB%8C%D8%AA%D9%88%D8%B1%DB%8C-%D9%87%D8%A7%DB%8C%DB%8C-%DA%A9%D9%87-%D8%B4%D9%85%D8%A7-%D8%B1%D8%A7-%D8%A8%D9%87-%DB%8C%DA%A9-%D8%BA%D9%88%D9%84-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%D9%85%DB%8C%DA%A9%D9%86%D8%AF%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-bpc7xcluzori یادگرفتن و عمیق شدن تو مباحث جاوااسکریپت میتونه سخت و طاقت فرسا باشه،البته اگر از منابعی که در دسترس شما هست مطلع نباشید،پس اینجا میخوام بهتون ریپوزیتوری هایی معرفی کنم که با استفاده از آن ها اصلا نیاز به پرداخت هزینه های گزاف برای یادگیری ندارید !این ریپوزیتوری ها شامل همه چیزهایی است که شما نیاز دارید.موضوعاتی از الگوریتم ها و اصول مهندسی گرفته تا راهنماهای سبک، تکه کدها، چیت شیت ها، کتاب ها، پروژه ها، سوالات مصاحبه، تست و غیره را در بر می گیرد.1 - javascript-algorithms :این ریپوزیتوری شامل مثال های متعدد و الگوریتم های محبوب بر پایه جاوااسکریپت هست2 - 30-seconds-of-code :کدهای کوتاه جاوا اسکریپت برای همه نیازهای توسعه شما.3 - airbnb-js-style-guide : یک راهنمای جالب و خوب از کمپانی معروف airbnb.4 - You-Dont-Know-JS :این ریپوزیتوری رو شاید شنیده باشید یا حتی دیده و مطالعه کرده باشید،این ریپو مجموعه‌ای از کتاب‌های فوق‌العاده ای است که به مکانیسم‌های اصلی زبان جاوا اسکریپت می‌پردازند.5 - wtfjs : لیستی از نمونه های پیچیده جاوا اسکریپت.6 - js-the-right-way :یک مرجع آسان برای خواندن سریع بهترین شیوه ها، استانداردهای کدنویسی پذیرفته شده ولینک ها در سراسر وب.7 - javascript-questions :لیستی طولانی از سوالات (پیشرفته) جاوا اسکریپت و توضیحات آنها توسط Lydia Hallie.8 - clean-code-javascript : اصول مهندسی نرم افزار، از کتاب معروف رابرت سی مارتین Clean Code، برگردانی شده برای جاوا اسکریپت.9 - 33-js-concepts : 33 مفهوم مدرن جاوا اسکریپت که هر توسعه دهنده ای باید بداند.10 - ES6-for-humans : راهنمایی با توضیح خیلی خوب برای نوشتن ES6. مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Sat, 12 Feb 2022 01:29:28 +0330 https://virgool.io/@mojtaba_afraz/%DA%86%DB%8C%D8%B2%D9%87%D8%A7%DB%8C%DB%8C-%DA%A9%D9%87-%D9%85%DB%8C-%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%DB%8C%D8%AF-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-package-lockjson-%D8%A8%D8%AF%D8%A7%D9%86%DB%8C%D8%AF-%D8%A7%D9%85%D8%A7-%D8%AA%D8%B1%D8%B3%DB%8C%D8%AF%DB%8C%D8%AF-%DA%A9%D9%87-%D8%A8%D9%BE%D8%B1%D8%B3%DB%8C%D8%AF-ecckqthvwnxa بنابراین، Node Package Manager (npm) را به v5 به‌آپدیت کردید، و به نظر می‌رسد همه چیز خوب پیش می‌رود. اما صبر کنید، این چیست؟ یک فایل جدید به صورت خودکار ایجاد شد. Package-lock.jsonاگر آن را باز کنید، شبیه dependency های موجود در package.json است، اما بزرگتر تر. شما تصمیم می گیرید که آن را نادیده بگیرید و سراغ کارهای خودتون بروید. در نهایت یک دپندنسی با مشکل مواجه می شود. یا پیدا نشد یا به نظر می رسد نسخه اشتباهی نصب شده است. اکثر مردم فقط package-lock.json را حذف می کنند و «npm install» را اجرا می کنند. پس چرا حتی آن را داشته باشیم؟ قرار است چه کار کند؟Semantic Versioning : قبل از اینکه بتوانید package-lock و حتی package.json را درک کنید، باید نسخه سازی معنایی (semver) را بدانید. این نابغه پشت npm است و چه چیزی باعث موفقیت بیشتر آن شده است .به طور خلاصه، اگر در حال ساخت برنامه‌ای هستید که سایر برنامه‌ها با آن رابطه دارند، باید نحوه تأثیر تغییراتی که ایجاد می‌کنید بر توانایی شخص ثالث برای تعامل با برنامه شما تأثیر بگذارد. این کار از طریق نسخه‌سازی معنایی انجام می‌شود. یک نسخه از سه بخش تشکیل شده است: X، Y، Z که به ترتیب نسخه اصلی، فرعی و پچ هستند. یک مثال می تواند 1.2.3، یا نسخه اصلی 1، نسخه فرعی 2، پچ 3 باشد. تغییر در پچ نشان دهنده رفع اشکالی است که چیزی را خراب نمی کند. تغییر در نسخه فرعی نشان دهنده یک عملکرد جدید است که چیزی را خراب نمی کند. تغییر در نسخه اصلی نشان دهنده یک تغییر بزرگ است که سازگاری را از بین می برد. اگر کاربران با تغییر نسخه اصلی سازگار نشوند، بعضی چیزها کار نمی کنند. برای اینکه با semver اشنا شوید این مقاله را به شما توصیه میکنممدیریت بسته ها : در نهایت npm وجود دارد تا مدیریت package ها را آسان کند. پروژه های شما ممکن است صدها وابستگی داشته باشد که هر کدام صدها وابستگی دیگر دارند. برای دور نگه داشتن ذهن شما از جهنم وابستگی، npm ساخته شد تا با چند دستور ساده بتوانید این وابستگی ها را نصب و مدیریت کنیدهنگامی که بسته ای را با npm نصب می کنید (و آن را ذخیره می کنید)، یک مورد به package.json شما اضافه می شود که حاوی نام package و semver است که باید استفاده شود. با این حال، npm از برخی حروف عام در این تعریف semver پشتیبانی می کند. به‌طور پیش‌فرض، npm آخرین نسخه را نصب می‌کند و یک caret به عنوان مثال اضافه می‌کند. "^1.2.12". این نشان می‌دهد که حداقل باید از نسخه 1.2.12 استفاده شود، اما هر نسخه بالاتر از آن تا زمانی که نسخه اصلی یکسانی داشته باشد، مشکلی نداردپروژه های مشترک : فایده واقعی داشتن وابستگی هایی که در package.json تعریف شده اند این است که هر کسی که به package.json دسترسی دارد می تواند یک پوشه وابستگی ایجاد کند که حاوی ماژول های مورد نیاز برای اجرای برنامه شما باشد. اما بیایید نگاهی به راه خاصی بیندازیم که ممکن است همه چیز اشتباه پیش برود.فرض کنید یک پروژه جدید ایجاد می کنیم که از express استفاده می کند. پس از اجرای «npm init»، express را نصب می کنیم: «npm install express — save». در زمان نوشتن، آخرین نسخه اکسپرس 4.15.4 است. بنابراین "express": "^4.15.4" به عنوان یک وابستگی در package.json اضافه می شود و آن نسخه دقیق روی دستگاه من نصب می شود. حالا شاید فردا، برنامه نویسان اکسپرس یک باگ رفع کنند، و بنابراین آخرین نسخه 4.15.5 می شود. سپس اگر کسی بخواهد در پروژه من مشارکت داشته باشد، آن را شبیه سازی می کند و «npm install» را اجرا می کند. از آنجایی که 4.15.5 نسخه بالاتر با همان نسخه اصلی است، که برای آنها نصب شده است. ما هر دو اکسپرس داریم، اما دو نسخه متفاوت داریم. از نظر تئوری، آنها همچنان باید سازگار باشند، اما شاید آن رفع اشکال بر عملکردی که ما استفاده می کنیم تأثیر بگذارد و برنامه ما نتایج متفاوتی را هنگام اجرا با نسخه اکسپرس 4.15.4 در مقایسه با 4.15.5 ایجاد کند.Package-lock : هدف package-lock اجتناب از وضعیتی است که در بالا توضیح داده شد، که در آن نصب ماژول ها از همان package.json منجر به دو نصب متفاوت می شود. Package-lock.json در npm نسخه 5 اضافه شد، بنابراین اگر از نسخه اصلی 5 یا بالاتر استفاده می کنید، می بینید که تولید شده است مگر اینکه آن را غیرفعال کنید.در نهایت Package-lock فهرست بزرگی از هر وابستگی فهرست شده در package.json شما، نسخه خاصی که باید نصب شود، مکان ماژول و هش که یکپارچگی ماژول را تأیید می کند، لیست package های مورد نیاز آن است. و لیستی از وابستگی ها. بیایید نگاهی بیندازیم که ورودی اکسپرس چیست:&quotexpress&quot: { &quotversion&quot: &quot4.15.4&quot, &quotresolved&quot: &quothttps://registry.npmjs.org/express/-/express-4.15.4.tgz&quot, &quotintegrity&quot: &quotsha1-Ay4iU0ic+PzgJma+yj0R7XotrtE=&quot, &quotrequires&quot: { &quotaccepts&quot: &quot1.3.3&quot, &quotarray-flatten&quot: &quot1.1.1&quot, &quotcontent-disposition&quot: &quot0.5.2&quot, &quotcontent-type&quot: &quot1.0.2&quot, &quotcookie&quot: &quot0.3.1&quot, &quotcookie-signature&quot: &quot1.0.6&quot, &quotdebug&quot: &quot2.6.8&quot, &quotdepd&quot: &quot1.1.1&quot, &quotencodeurl&quot: &quot1.0.1&quot, &quotescape-html&quot: &quot1.0.3&quot, &quotetag&quot: &quot1.8.0&quot, &quotfinalhandler&quot: &quot1.0.4&quot, &quotfresh&quot: &quot0.5.0&quot, &quotmerge-descriptors&quot: &quot1.0.1&quot, &quotmethods&quot: &quot1.1.2&quot, &quoton-finished&quot: &quot2.3.0&quot, &quotparseurl&quot: &quot1.3.1&quot, &quotpath-to-regexp&quot: &quot0.1.7&quot, &quotproxy-addr&quot: &quot1.1.5&quot, &quotqs&quot: &quot6.5.0&quot, &quotrange-parser&quot: &quot1.2.0&quot, &quotsend&quot: &quot0.15.4&quot, &quotserve-static&quot: &quot1.12.4&quot, &quotsetprototypeof&quot: &quot1.0.3&quot, &quotstatuses&quot: &quot1.3.1&quot, &quottype-is&quot: &quot1.6.15&quot, &quotutils-merge&quot: &quot1.0.0&quot, &quotvary&quot: &quot1.1.1&quot } },سپس ایده این است که به جای استفاده از package.json برای نصب ماژول ها، npm از package-lock.json استفاده کند. از آنجا که package-lock یک نسخه، مکان و هش یکپارچگی را برای هر ماژول و هر یک از وابستگی‌های آن مشخص می‌کند، نصبی که ایجاد می‌کند، هر بار یکسان خواهد بود. مهم نیست روی چه دستگاهی هستید یا در آینده چه زمانی نصب می کنید، باید هر بار همان نتیجه را به شما بدهد که بسیار مفید است. مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Wed, 09 Feb 2022 20:38:44 +0330 https://virgool.io/@mojtaba_afraz/vitejs-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B1%D8%A7-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D9%87-%D8%A2%D9%86-%D8%A7%D9%87%D9%85%DB%8C%D8%AA-%D8%AF%D9%87%DB%8C%D8%AF-mnciey5aebno سازنده Vue.js ابزار جدیدی به نام Vite.js را ارائه کرد. او آن را نسل بعدی ابزارهای frontend می نامد. یک ابزار ساخت که از یک سرور توسعه دهنده تشکیل شده است که کد شما را برای production باندل می کند.و Vite.js به توسعه دهندگان این امکان را می دهد که یک محیط توسعه برای فریمورک هایی مانند Vue و React و حتی برای برنامه Vanilla JavaScript با یک dev server راه اندازی کنند. Vite به صورت داخلی از Rollup.js برای bundling پشتیبانی می‌کند.یک ابزار ساخت در نهایت Vite.js یک ابزار ساخت سریع را با API بسیار قابل تنظیم با استفاده از افزونه ها ارائه می دهد. علاوه بر این، Vite.js از بسیاری از کتابخانه های front-end محبوب مانند Preact، React، Vue.js و Vanilla JavaScript را پشتیبانی می کند.Vite JS چیست و چرا باید به آن اهمیت دهید؟در واقع، Vite برای Vue Single File Components (SFC) به عنوان یک سرور توسعه، توسعه داده شد. اما با گذشت زمان، Vite تکامل یافته و به یک سرور توسعه جاوا اسکریپت no-bundle شده است. اکنون Vite از اکثر framework های وب پشتیبانی می کند. علاوه بر این، گردش کار سریع‌ترو روان‌تر را برای توسعه برنامه‌های کاربردی وب مدرن ارائه می‌دهد. به طور خلاصه، Vite شبیه Vue CLI است اما سریعتر.نام "Vite" از کلمه فرانسوی "Fast" گرفته شده است که "Vit" تلفظ می شود.به‌عنوان یک توسعه‌دهنده، در حین توسعه یک برنامه وب، ممکن است هنگام ایجاد تغییرات با زمان زیادی برای بارگذاری برنامه مواجه شده باشید. Vite سرعت FeedBack Loop را در طول توسعه افزایش می دهد و آن را فوق العاده سریع می کند.به طور رسمی، Vite.js به باندلر Svelte و Vue تبدیل شده است. بنابراین، در میان جامعه توسعه دهندگان محبوبیت پیدا کرده است و به رقیبی سرسخت برای سایر فریم ورک های فرانت اند معروف مانند Lit و React تبدیل شده است.آخرین نسخه Vite.js یک محیط جاوا اسکریپت no-bundling ویژگی‌های جدید بسیاری را ارائه می‌دهد. Vite 2.0 که در 16 فوریه 2021 منتشر شد، یک معماری کاملاً بازطراحی شده، پشتیبانی درجه یک CSS، یک سیستم افزونه جدید و بسیاری موارد دیگر را ارائه می دهد.Vite JS چگونه کار می کند؟پشتیبانی مرورگر برای ماژول های ES6 معمولا زمانی که ماژول های ES در ابتدا در ES2016 معرفی شدند ضعیف بود. در نتیجه، بسیاری از مرورگرهای فعلی اکنون ماژول‌های ES را به صورت بومی پشتیبانی می‌کنند و به شما امکان می‌دهند از دستورات import و export به‌صورت بومی استفاده کنید. همچنین، می‌توانید با مشخص کردن اینکه در حال import کردن یک ماژول با استفاده از ویژگی type+”module” در تگ اسکریپت خود، Import را در HTML خود وارد کنید:<script type=&quotmodule&quot src=&quotfilename.js&quot> این مقاله برگردان کوچکی از مقاله radixWeb بود،برای اطلاعات بیشتر داکیومنت رسمی vite رو پیشنهاد میکنم مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Wed, 09 Feb 2022 18:05:17 +0330 https://virgool.io/@mojtaba_afraz/%D8%B1%D9%86%D8%AF%D8%B1-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%88%D8%A8-%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D9%85%DB%8C%D8%B4%D9%88%D9%86%D8%AF-osn1vdmo744q رندر صفحه وب به چه معناست؟رندر کردن یک صفحه وب فرآیند تبدیل کدهای HTML، CSS و جاوا اسکریپت به یک صفحه تعاملی است که بازدیدکنندگان وب سایت انتظار دارند هنگام کلیک کردن روی یک لینک، آن را ببینند. هر صفحه وب سایت با در نظر گرفتن کاربر نهایی طراحی شده است. و قطعاً نمی‌خواهید بازدیدکننده صفحه شما با مشکلاتی مواجه شود.چند کلمه در مورد مرورگرهای وباز آنجایی که بیشتر کارهای رندرینگی که امروز در مورد آن بحث می کنیم توسط مرورگرها انجام می شود، منطقی است که در مورد آنها با جزئیات بیشتری صحبت کنیم. مرورگر وب یکی از آشناترین انواع نرم افزار برای کاربران مدرن اینترنت است. این نرم افزار وظیفه بازیابی فایل ها از یک سرور راه دور یا یک دیسک محلی و نمایش آنها را برای کاربر به شیوه ای خاص دارد که تعامل آسان و موثر با کاربر را فراهم می کند.اکثر کاربران در مورد مرورگرهای وب ترجیحات قوی دارند: افراد گوگل کروم، موزیلا فایرفاکس، اپل سافاری خود را نگه می دارند تا زمانی که دلیل قوی برای رفتن به گزینه دیگری پیدا کنند.با این حال، افراد زیادی در مورد نرم افزار کوچکتر در مرورگر مورد علاقه خود که در واقع مسئول اکثر عملیات است، نمی دانند. این قسمت به عنوان موتور مرورگر شناخته می شود و در واقع تعداد موتورهای کمتری نسبت به مرورگرها وجود دارد. نمونه‌هایی از موتورهای مرورگر عبارتند از Blink برای Google Chrome، Gecko برای Mozilla Firefox و WebKit برای Apple Safari.روشی که موتورهای مرورگر مختلف HTML، CSS، XML و انواع دیگر داده‌ها را پردازش می‌کنند نیز می‌تواند کمی متفاوت باشد. به همین دلیل است که تست بین مرورگرها بخش مهمی از توسعه وب با کیفیت است. با اطمینان از اینکه صفحه وب شما به درستی در مرورگرها و موتورهای مرورگر مختلف ارائه می شود، از مشکلات رندر جلوگیری می کنید و از حفظ کاربر اطمینان می دهید.خب،DOM، CSSOM و Render Tree چیست؟قبل از اینکه به توضیح نحوه عملکرد رندر صفحه وب و نحوه بهینه سازی آن برای عملکرد بهتر ادامه دهیم، بیایید سه اصطلاح اساسی را که بیش از یک بار در راهنمای ما با آنها مواجه خواهید شد، مرور کنیم. DOM، CSSOM و Render Tree سه مورد از اساسی ترین مفاهیم رندر صفحه وب هستند.1- DOM :و DOM یا Document Object Model یک رابط برنامه نویسی کاربردی است که ساختار و محتوای یک سند وب را معمولاً به شکل HTML نشان می دهد. DOM عناصر یک صفحه وب را به عنوان Node و اشیاء مجزا ارائه می کند و به زبان های برنامه نویسی مختلف اجازه می دهد تا با محتوای صفحه تعامل داشته باشند. DOM یک نمایش شی گرا از یک صفحه وب را ارائه می دهد و به یک زبان برنامه نویسی مانند جاوا اسکریپت اجازه می دهد تا به راحتی به ساختار سند دسترسی پیدا کند.2 - CSSOM :و CSSOM یا CSS Object Model مجموعه‌ای از رابط‌های برنامه‌نویسی کاربردی برای دسترسی و اصلاح اطلاعات مربوط به استایل یک صفحه وب است. CSSOM شامل تمام Selectors و ویژگی های انتخابگر مورد نیاز برای ارائه صحیح صفحه است. CSSOM برای CSS همان چیزی است که DOM برای HTML است، با این تفاوت که به جای ساختار آن، به استایل یک صفحه وب می پردازد.3 - Render Tree : درخت رندر مجموعه ای از Objects است که باید توسط مرورگر رندر شوند تا اطلاعات را به روشی آسان ارائه کند. درخت رندر از چندین عنصر کوچکتر تشکیل شده است که باید رندر شوند. موتورهای مرورگرهای مختلف می‌توانند به این عناصر به طور متفاوتی اشاره کنند: برای مثال، WebKit آنها را یک رندر یا یک شی رندر می‌نامد در حالی که Gecko به آنها به عنوان یک Frame اشاره می‌کند.ساختار یک درخت رندر با ساختار DOM سازگار است: هر رشته متن با یک عنصر جداگانه نشان داده می شود که شی DOM مربوطه و style محاسبه شده خود را دارد. تنها عناصری که در درخت رندر گنجانده نشده‌اند، عناصری هستند که برای نامرئی بودن تنظیم شده‌اند، مانند تگ‌ها یا عناصر دارایdisplaynoneمرورگر چگونه یک صفحه وب را رندر می کند؟رندر کردن یک صفحه وب کاری است که مرورگر به صورت روزانه انجام می دهد و یک روش استاندارد برای انجام آن وجود دارد که هر بار که صفحه ای برای رندر وجود دارد مرورگر آن را طی می کند. در اینجا مراحلی وجود دارد که برای تبدیل چند هزار خط کد به یک صفحه وب که کاربر انتظار دارد ببیند، طی می شود.ابتدا HTML از سرور دریافت می شود و در DOM پردازش می شود. استایل ها در CSSOM بارگیری و تجزیه می شوند. درخت رندر با استفاده از DOM و CSSOM ایجاد می شود.مرورگر یک طرح برای هر عنصر درخت رندر با مختصات مجزای آن با استفاده از روش flow ایجاد می کنداطلاعات در پنجره مرورگر به شکل نهایی خود از طریق آخرین مرحله فرآیند که به آن painting نیز می‌گویند نمایش داده می‌شود.هر بار که کاربر با صفحه تعامل می‌کند یا اسکریپت‌ها آن را به هر نحوی تغییر می‌دهند، مراحل بیشتری لازم است، زیرا ساختار و سبک سند احتمالاً قابل تغییر است و نیاز به به‌روزرسانی دارد. در بسیاری از موارد، رندر مجدد کامل لازم نیست و صفحه وب را می توان با یکی از دو تکنیک زیر به روز کرد.Repaint :در اینجا Repaint تکنیکی است که به مرورگر اجازه می‌دهد تا ظاهر عناصر صفحه وب را بدون تغییر LayOut به‌روزرسانی کند. RePaint می‌تواند به رنگ پس‌زمینه، طرح کلی عنصر یا نمایان بودن آن مربوط باشد.Reflow :در اینجا Reflow زمانی اتفاق می افتد که تغییر در صفحه وب روی layOut صفحه و موقعیت عناصر آن تأثیر بگذارد. Reflow موقعیت همه عناصر را در DOM، از جمله فرزند و مؤلفه‌های والد، دوباره محاسبه می‌کند، حتی اگر تغییرات مربوط به یک عنصر باشد. Reflow می تواند توسط:دستکاری (افزودن، حذف یا تغییر) عناصر DOM تغییرات در محتوا، از جمله محتوای فیلد فرم تغییرات در CSSافزودن یا حذف StyleSheetتغییر ویژگی “class attribute” تغییر اندازه پنجره مرورگرپیمایش(منظورم همون اسکرول هست)فعال سازی شبه کلاس (:hover)مرورگرها رندر صفحه وب را بهینه می کنندهم Repaintو هم Refow تمایل به کند کردن عملکرد یک صفحه وب دارند، حتی بیشتر از Repaint. بسته به قدرت پردازش دستگاه، ReFlow می تواند به طور قابل توجهی سرعت آن را کاهش دهد، و مقدار تغییراتی که باید توسط ReFlow پوشش داده شود، اغلب آنقدر زیاد است که می تواند معادل رندر مجدد کل صفحه باشد. به همین دلیل است که مرورگرها سهم خود را برای بهینه سازی فرآیند رندر انجام می دهند.* - qarea Blog مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Fri, 07 Jan 2022 16:54:14 +0330 https://virgool.io/@mojtaba_afraz/%DA%86%D8%B1%D8%AE%D9%87-%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1-%D9%88-%D9%86%D8%B3%D8%AE%D9%87-%D8%A8%D9%86%D8%AF%DB%8C-%D9%86%D8%B1%D9%85-%D8%A7%D9%81%D8%B2%D8%A7%D8%B1-semver-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%86%D8%B3%D8%AE%D9%87-%D8%A8%D9%86%D8%AF%DB%8C-qitvnwbv3lnz حتما نسخه بندی و نگارش‌های مختلف نرم افزار‌هایی را که استفاده می‌کنید، مشاهده نموده‌اید. نسخه‌های آلفا یا بتا یا نسخه بندی سالیانه یا با حروف و اعداد خاص. با این حال همه نرم افزار‌ها علاوه بر عناوین متعارف، یک نسخه بندی داخلی عددی، شمار‌ه‌ای هم دارند. بسته به حجم و اندازه نرم افزار‌ها، ممکن چرخه انتشار نرم افزار‌ها متفاوت باشند. سیاست عرضه نرم افزار در هر شرکت هم متفاوت است. مثلا شرکت مایکروسافت برای عرضه ویندوز ابتدا نسخه بتا یا پیش نمایش آن را عرضه نموده تا با دریافت بازخورد‌هایی از استفاده کنندگان، نسخه نهایی نرم افزار خود را با حداقل ایراد و خطا عرضه نماید. البته این بخاطر بزرگی نرم افزار ویندوز نیز می‌باشد اما شرکت ادوبی اکثرا هر یکی دو سال بدون عرضه نسخه‌های قبل از نهایی یک دفعه نسخه جدیدی را رسما عرضه می‌نمایدچرخه انتشار نرم افزار:چرخه انتشار نرم افزار از زمان شروع کد نویسی تا عرضه نسخه نهایی می‌باشد که شامل چندین مرحله و عرضه نرم افزار می‌باشد.Pre-alphaاین مرحله شامل تمام فعالیت‌های انجام شده قبل از مرحله تست می‌باشد. در این دوره آنالیز نیازمندیها، طراحی نرم افزار، توسعه نرم افزار و حتی تست واحد باشد. در نرم افزار‌های سورس باز چندین نسخه قبل از آلفا ممکن است عرضه شوند.Alphaاین مرحله شامل همه فعالیت‌ها از زمان شروع تست می‌باشد. البته منظور از تست، تست تیمی و تست خود نرم افزار می‌باشد. نرم افزار‌های آلفا هنوز ممکن است خطا و اشکالاتی داشته باشند و ممکن است اطلاعات شما از بین رود. در این مرحله امکانات جدیدی مرتبا به نرم افزار اضافه می‌گردد.Betaنرم افزار بتا، همه قابلیت‌های آن تکمیل شده و خطا‌های زیادی برای کامل شدن نرم افزار وجود دارد. در این مرحله بیشتر به تست کاهش تاثیرات به کاربران و تست کارایی دقت می‌شود. نسخه بتا، اولین نسخه‌ای خواهد بود که بیرون شرکت و یا سازمان در دسترس قرار می‌گیرد. برخی توسعه دهندگان به این مرحله preview، technical preview یا early access نیز می‌گویند.Release candidateدر این مرحله نرم افزار، آماده عرضه به مصرف کنندگان است و نرم افزارهایی مثل سیستم عامل‌های ویندوز در دسترس تولید کنندگان قرار گرفته تا با جدید‌ترین سخت افزار خود یکپارچه شوند.General availability (GA)در این مرحله، عرضه عمومی نرم افزار و بازاریابی و فروش نرم افزار مد نظر است و علاوه بر این تست امنیتی و در نرم افزار‌های خیلی بزرگ عرضه جهانی صورت می‌گیردچرا نرم افزار خود را نسخه‌بندی کنیم و نسخه‌بندی معنایی(Semver) چیست !؟در دنیای مدیریت نرم‌افزار یک موقعیت ناخوشایند به نام "جهنم وابستگی" وجود دارد. هر چه سیستم شما بزرگ‌تر می‌شود و هر چه کتابخانه‌های بیشتری به نرم‌افزار خود می‌افزایید، به همان میزان احتمال گرفتار شدن شما در این دام بیشتر خواهد شد.در سیستم‌هایی با وابستگی بسیار زیاد، انتشار نسخه جدید کم کم تبدیل به یک کابوس می‌شود. اگر وابستگی شما به کتابخانه‌ها بسیار زیاد و پیچیده باشد، شما در معرض خطر قفل شدن انتشار نسخه جدید قرار می‌گیرید (عدم توانایی برای بروزرسانی یک کتابخانه بدون انتشار نسخه جدید کتابخانه‌های وابسته). اگر وابستگی شما به کتابخانه‌ها خیلی بی‌قاعده و کم باشد، شما ناگزیر توسط نسخه‌های بی‌قاعده درگیر می‌شوید. هنگامی که مشکل قفل شدن انتشار نسخه جدید و/یا انتشار نسخه‌های بی‌قاعده شما را از حرکت مناسب و خوب برای تکمیل پروژه‌تان بازمی‌دارد، در واقع شما در "جهنم وابستگی" قرار دارید.به عنوان یک راه حل برای حل این مشکل، یک مجموعه ی ساده از قوانین و الزامات که چگونگی طراحی شماره های نسخه و افزایش آن را دستور میدهد را پیشنهاد می‌کنیم. برای کار کردن این سیستم، شما ابتدا نیاز به اعلام API عمومی دارید. این خود ممکن است شامل مستندات و یا اجرای کد باشد. علی رغم آن، مهم است که این API روشن و دقیق باشد. هنگامی که API عمومی خود را تعیین کردید، تغییرات برنامه شما بر روی نسخه API عمومی تاثیر خواهد داشت و آنرا افزایش خواهد داد. بر این اساس، این مدل نسخه‌بندی را در نظر بگیرید: X.Y.Z یعنی (Major.Minor.Patch). رفع حفره‌هایی که بر روی API عمومی تاثیر نمی‌گذارند، مقدار Patch را افزایش می‌دهند، تغییرات جدیدی که سازگار با نسخه قبلی است، مقدار Minor را افزایش می‌دهند و تغییرات جدیدی که کاملا بدیع هستند و به نحوی با تغییرات قبلی سازگار نیستند مقدار Major را افزایش می‌دهند.توضیح روش SemVer برای نسخه بندی نرم افزارعددی که برای نسخه نرم افزار توسط روش Semver انتخاب میشود از سه قسمت X.Y.Z تشکیل شده است که به شکل Major.Minor.Patch هم می توان از آن نام برد .عدد اول Major یا X زمانی اضافه میشود که تغییرات گسترده ای صورت گرفته باشد و شاید از API جدید استفاده شده باشد که نسخه قبلی آن را ساپورت نکند .عدد دوم Minor یا Y زمانی افزوده می شود که قابلیتی به نرم افزار اضافه شده باشد که نسخه قبلی هم آن را بدون مشکل می تواند اجرا کند .عدد سوم Patch یا Z زمانی اضافه می شود که ایرادها را برطرف کرده باشیددسته بندی شماره گذاری نرم افزار : نسخه های پیش از انتشار رسمینسخه هایی که منتشر می شود تا بازخوردها دریافت شده و نهایتا نسخه نهایی عرضه گردد.نسخه های پس از انتشار رسمینسخه هایی که بعد از انتشار رسمی عرضه می شودنسخه بندی پیش از انتشار چگونه است ؟همان تصویر و روش بالا را در نظر بگیرید در انتها باید با استفاده از کارکتر “-” یکی از کلمه های Alpha ( عرضع اولیه ) و Beta ( عرضه ثانویه ) و در نهایت rc ( پیش از انتشار )هر کدام از کلمه های بالا هم به نوبه خود احتمال ارتقا تا قبل از نسخه بعندی دارند به عنوان مثال1.0.0-Alpha.171.0.0-rc.12نسخه های بالا به ترتیب یعنی عرضه اولیه (آلفا ) که ۱۷ مرتبه اصلاح شده و نسخه پیش از انتشار رسمی که ۱۲ بار رفع خطا شده .نکاتی که باید در نسخه بندی حتما رعایت شود :جدا کننده نسخه با کلمه پیش از انتشار حتما باید   –   باشد .نیازی نیست برای هر تغییر و رفع اشکالی نسخه جدید انتشار دهید . میتوانید برای رفع یکباره 5 ایراد ، یک عدد به Z اضافه کنید.اگر عدد  x  تغییر کند عدد y و عدد z صفر می شود .به عنوان مثال اگر نگارش فعلی ۴.۶.۱۴ باشد ( یعنی نسخه ۴ با ۶ تغییر و ۱۴ رفع ایراد ) ورژن بعدی ۵.۰.۰ خواهد بود ( ورژن ۵ که هنوز تغییر و رفع ایرادی نداشته )حتما باید نسخه کامل نوشته شود . ( نمی توانید نسخه ۵.۰.۰ را نسخه ۵ بنویسید)محلی در شروع برنامه یا در فرم اصلی برای مطلع کردن کاربر از نسخه نصب شده حتما قرار دهید.منابع:آفیس‌باز - قلم مجتبی کاویانی مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Sat, 20 Nov 2021 19:37:52 +0330 https://virgool.io/@mojtaba_afraz/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-props-based-solution-%D8%AF%D8%B1-vuejs-igbgq7xsdcqz دنیای بدون Props رو تصور کردی !؟اصلا مگه داریم!؟مگه میشه!؟ قطعا نه ، پس بیا یکم درباره اش صحبت کنیم . . .میخوام این بار با یسری Task شروع کنم،میتونی راه حل های این Task رو تو ذهنت بچینی یا این که بری کدش رو هم بنویسیانتخاب با خودت . . .1 - قدم اولساده است ، یه دکمه بسازید که از کامپوننت Parent بشه متن های مختلفی رو بهش داد2 - قدم دومهمچنان ساده و آسون ، حالا وقتش رسیده که بتونید آیکون رو هم به سمت راست دکمه تون اضافه کنید که مثل قبل از طرف Parent باید مشخص بشه که آیکون چیه3 - قدم سومحالا وقتش رسیده این دکمه باحالی که تا اینجا داشتیم رو باحال تر کنیممیخوایم این قابلیت رو بهش اضافه کنیم که بعضی جا ها فقط یه طرف آیکون داشته باشهبعضی جاها هردو طرف آیکون داشته باشنو اون جاهایی هم که یه طرف آیکون دارن بتونه به انتخاب خودمون راست یا چپ باشه4 - قدم چهارمرسیدیم به قسمت خوب ماجرا ، اینبار وقتی رو دکمه کلیک شد باید یه لودر به کار نشون بدیم5 - قدم پنجمحالا بهتر شد ، ولی بعضی موقع میخوایم لودر همه فضای دکمه رو بپوشونه،بعضی موقع هم نه،فقط جای آیکون ظاهر بشهپس با اضافه کردن این قابلیت بهتر هم میشهقضیه چیه !؟خب اگر نتونستم همه مراحل بالا رو انجام بدید یا درک کنید نگران نباشید ، این بیشتر یه مثال ذهنی بود و اینکه بشه اون حس مورد نظر رو بهتون منتقل کرداما میپرسید : "خب،الان قراره درباره چی صحبت کنیم !؟"پس الان بهتون میگمتوی "قدم اول " احتمالا شما با همچین نمونه کدی شروع کردید :و اگر میخواید بدونید بعد از اضافه کردن قابلیت ها و طی کردن قدم های بعدی کد ما به چه شکل در اومدباید بگم که این شکل :نمیدونم درک کد بالا چقدر براتون سخت بود ، اما احتمالا کم نبودهماجرا اون جایی سخت میشه که حتی قدم هایی که بالا با هم طی کردیم رو ندیده باشید و مستقیم بیاید و با همچین کدی روبرو بشیدیا فرض کنید یکی دیگه از اعضای تیمتون این کد رو نوشته و حالا وظیفه شماست که سرپرستی این یتیم رو انجام بدید و ازش استفاده کنیدو اینطوری میشه که : Props , EveryWhere سوال مهم - این پدیده پیچیدگی بیش از حد Prop ها یا بده !؟بد نیست ، چرا !؟چون کارمون رو انجام میده ( کار میکنه ?)+ پس یعنی خوبه ?!؟- نه دقیقا . . .+ ?چه مشکلاتی داره !؟نیازمندی های جدید ، پیچیدگی رو بیشتر میکنهمسئولیت های زیادی رو ایجاد میکنهتعداد زیادی Template با شرط های مختلف ( خودش یه پیچیدگی عظیم داره)روی Flexibility تاثیر داره و اون رو کاهش میده (نمیدونم Flexibility باید بگم انعطاف پذیری یا نه)حفظ و نگهداری اون تبدیل به یه کابوس میشه اگر این مشکلات برای ما وجود داره آیا راه بهتری هم هست !؟اولین نکته که خوب هست بهش اشاره کنم این هست که همیشه بهترین راه استفاده درست هستو مجدد تاکید میکنم که اصلا منظورم این نبوده که Props خوب نیست (پس لطفا اینجور برداشت نکنید ?)و اما فرشته نجات ما در این مواقع کسی نیست جز آقای Slot ممکنه خیلیاتون از قبل با Slot اشنا بوده باشید و باهاش کار کرده باشید اما به اون هایی که تا امروز از این مورد استفاده نمیکردن شدیدا پیشنهاد می کنم که رویکردشون رو عوض کننخیلی قصد ندارم توی مقاله هام مستقیم همه مباحث رو آموزش بدم ، چون ممکنه خیلی ها این موارد رو بلد باشن ، پس صرفا قصد دارم که راهکار معرفی کنم و بیشتر آشناتون کنم با مباحث و راه حل های مختلفپس اگر Slot یا حتی Props رو بلد نیستید ، این رو به خودتون میسپارم تا درباره اش بخونید و یاد بگیریدممنونم که تا اینجای مقاله همراهم بودی ، امیدوارم که برات مفید بوده باشهاگر نظر یا پیشنهاد یا انتقادی داری میتونی برام بنویسییا اینکه از طریق سایر راه های ارتباطی باهام در تماس باشی مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Tue, 10 Aug 2021 13:38:14 +0430 https://virgool.io/@mojtaba_afraz/%D9%BE%DB%8C%D9%85%D8%A7%D9%86-%D9%86%D8%A7%D9%85%D9%87-%D9%86%D8%A7%D9%85-%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C-component-%D9%87%D8%A7-%D8%AF%D8%B1-vuejs-zqnwiiqksezj اول از همه بگم بعد خوندن "پیمان نامه" تعجب نکنید ? ، اینجا ما "Convention" رو "پیمان نامه" ترجمه کردیمتوی این مقاله ما درباره Component های Vue.js صحبت میکنیم،اما وابسته به صلاحدید خودتون میتونید این Rule هارو توی سایر پروژه هاتون هم استفاده کنید فکر نکنم دیگه نیاز به مقدمه چیدن باشه،همه ها Front-End Developer ها با کانسپت Component آشنا هستیم،چون تبدیل به یه مفهوم جدا نشدنی از تکنولوژی وب شدناگر به موضوع کلین کد علاقه مند بوده باشید حتما با موضوع نامگذاری استاندارد آشنا هستید،اینجا میخوایم در سطح کامپوننت این نامگذاری ها رو بررسی کنیم1 - از نامگذاری تک کلمه ای دوری کنیداولین نکته،هنگام نامگذاری اجزای خود از نام های تک کلمه ای خودداری کنیدچه Header باشه،چه Footer - با Button هم که دیگه فاجعه تکمیل میشه که میشه برای جلوگیری از این کار آورد اینه که این نوع نامگذاری باعث سردرگمی و تعارض با تگ های معنایی در HTML5 میشهراه حل : از یک پیشوند استفاده کنیدتوضیح زیادی شاید درباره این موضوع نیاز نباشه . . .اما یکی از متداول ترین روش ها برای نامگذاری استفاده از یک پیشوند هست(مثل base یا app )برای مثال وقتی یک دکمه طراحی کردید که تو سراسر برنامه از اون استفاده میکنید،خوبه که بجای نامگذاری تک کلمه ای مثل Button،اون رو BaseButton یا AppButton تعریف کنیدنکته : برای اجزایی مثل Header نباید از پیشوند های بالا استفاده کنید،در ادامه درباره چرایی اون توضیح میدمخب توی انتخاب پسوند یک نکته ای وجود داره ، وقتی شما کامپوننتی دارید که در آن واحد فقط یک نمونه از اون روی صفحتون Active هست ، خوبه که از پیشوند "The" استفاده کنیدمثلا هیچوقت شما توی صفحتون یدونه Header بیشتر ندارید ( اگر دارید دیگه ادامه این مقاله رو نخونید،برید یه مقاله درباره UX پیدا کنید?)پس بهتره که اون کامپوننت رو TheHeader بنامید2 - کامپوننت های مرتبط رو چطور نامگذاری کنیم !؟همینطور که دارید عکس بالا رو مشاهده میکنید ، مثالش رو اینجا براتون میگمفرض کنید شما یک کامپوننت ToDo دارید که چندتا آیتم توی اونها قرار میگیره،توی هرکدوم از آیتم ها هم یک کامپوننت دیگه وجود داره که مشخص کننده نام اون آیتم هستچجوری اینا نامگذاری کنیم!؟ مثل مثالی که توی تصویر میبینیدخب حالا این چه مزیتی برامون داره !؟نکته باحالی که وجود داره باعث میشه توی یه فولدر کنار هم قرار بگیرن کامپوننت های مرتبط به هماز نظر معنایی باعث میشه با یک نگاه ساده متوجه بشیم که این آیتم مربوط به کدوم بخش هست3 - نامگذاری متد های یک Componentخیلی نمیخوام رو این مورد مانوور بدم،چون یه موضوعی هست که نسبتا عمومیه و شاید خیلی انحصاری برای صرفا کامپوننت نباشه ، یه گریز ریزی میزنیم به یک نمونه متد در Vue.jsخب به عنوان اولین نکته،باید بگم اسم متدتون باید کامل اون کاری که قراره انجام بده رو تعریف کنه(مثال بالا)اما نکته دوم که دیده شده دوستانی که از React.js مهاجرت میکنن سمت Vue.js این کار رو انجام میدننیازی نیست که برای گرفتن مقدار یک ایونت ، کل ایونت رو بگیرید => یک نام مفهومی و مناسب برای مقدار انتخاب کرده و فقط از اون استفاده کنید تا خوانایی کدتون بالا برهدر آخر شایان ذکر هست که در تیم های توسعه،پیروی از قوانین دستوری که همه تیم روی اون اتفاق نظر دارن میتونه کمک زیادی به سرعت توسعه و جلوگیری از بهم ریختگی و گنگی پروژه ما کنهباشد که از رستگاران باشیمممنونم که تا اینجای مقاله با من همراه بودید ، اگر نظر یا نکته یا انتقاد یا پیشنهادی داشتید حتما برام بنویسید مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Sat, 07 Aug 2021 20:48:33 +0430 https://virgool.io/@mojtaba_afraz/css-module-%D8%AF%D8%B1-vuejs-hmtsg7jwj7o7 اگر با Vue.js کار کرده باشید احتمالا روش های Style دهی به المنت هارو میدونید،اما یه تکنیک Style دهی به نام Css module در Vue.js وجود داره که کمتر کسی بهش توجه کردهیکی از رایج ترین تکنیک های style دهی استفاده از Scoped هستشخب حالا این Scoped چه کاری برامون انجام میده که باعث میشه کلاس های ما به تداخل نخورن !؟همونطور که توی عکس بالا میبینید ما از کلاس svg-icon استفاده کردیم،اما خود Vue اومده برای کلاسمون یک Data attribute تعریف کرده همراه با روش Hash کردن مخصوص خودش،پس درواقع با این کار از تداخل کلاس ها با هم جلوگیری کردهCSS Module چیست !؟به این مدل فراخوانی دقت کنیدبرای استفاده از این قابلیت باید از module را به عنوان attribute به style بدهیدهمونطور که از تصویر مشخصه،ساختار کلاس ها مثل قبل هست(یک قابلیت اضافه شده که جلوتر میگم) و روش فراخوانی کلاس ها با آبجکت style$ صورت میگیرهخب،درسته که در ظاهر تفاوت چندانی با حالت عادی نداره اما هنگام رندرینگ بهینگی هایی رو شامل میشهیکی از بهینگی هایی که در ظاهر میتونیم ببینیم تغییر نام گذاری کلاس ها موقع رندر شدن هستدیگه خبری از Data attribute نیست و به جاش نام کلاسمون تشکیل شده از (نام کامپوننت + نام کلاس + هش)یکی دیگه از قابلیت های Css module امکان export کردن متغیر های css هست که در بالا یک نمونه اش رو میبینیددر کل بخاطر بهینگی های جدید Vue در روایات توصیه فراوانی به استفاده از Css Module ها شدهو جالبه که بدونید آقای بن هنگ(Ben Hong) Css Module ها رو به عنوان Best Practice در Vue معرفی میکنه مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Fri, 06 Aug 2021 13:30:14 +0430 https://virgool.io/@mojtaba_afraz/call-stack-%D8%AF%D8%B1-javascript-sfhpopawsy3c Call Stack In JavaScriptبزار ببینم ساعت چنده !؟اوپس ، ساعت 4 صبحهمدتی هست که دارم یکم روی مباحث جاوااسکریپت عمیق تر میشم،با موارد و Tip های جالبی آشنا شدمیکی از مباحث ساختاری که به نظرم هر برنامه نویس جاوااسکریپت باید بدونه(و معتقدم خودم قبل از فهمیدنش تباه بودم) این آقای Call Stack هستخب،حالا چی هست اصلا!؟ بچه کجاست !؟ چیکار میکنه !؟تا حالا به این فکر کردید تابع هایی که مینویسیم چطور اجرا میشن !؟ ، مرورگر یا موتور اجرا کننده چطوری بهش نگاه می کنند و بعد اجرا میکنند !؟یکی از ویژگی های جاوااسکریپت اینه که در یک لحظه فقط میتونه یک کار رو انجام بده،پس باید یه ترتیبی برای انجام دادن دونه به دونه کار هاش داشته باشهممکنه خیلی ها این نوع تعریف من رو قبول نداشته باشن،اما بیاید سختش نکنیم،همه چیز به وقتشقرار نیست تو عمق هم عمیق بشیم(جواد خیابانی)call Stack تو تعریف خیلی ساده یه لیستی هست که موتور های جاوااسکریپت برای خودشون دارن که مربوط به ترتیب اجرا شدن توابع ما میشهبزار یکم بیشتر توضیح بدم،این کد رو نگاه کن function one() { console.log(&quotone&quot); }; function two() { one(); console.log(&quottwo&quot); }; two();بیاید ببینیم ارتباط این کدمون با Call Stack چه شکلی هستش . . .همونطور که معلومه توی کدمون دوتا تابع داریم => "one" & "two"بعد از تعریف این تابع ها ما اومدیم تابع دوم رو صدا زدیم، پس با توجه به صدا کردن این تابع،باید بیاد و بره تو استکمونحالا Call Stack ما این شکلی میشهخب،بعد از صدا زدن تابع two اومد تو لیست call Stack ما قرار گرفت،پس برنامه باید بره سراغ این تابع تا اجراش کنهما توی تابع two تابع one رو صدا زدیم،پس باز هم اینجا تابع one باید بیاد تو لیست زیبامون :)حالا یه همچین لیستی از توابعی که باید اجرا بشن داریم . . .نکته : ترتیب لیست شدن توابع از پایین به بالا و ترتیب اجرا آنها از بالا به پایین استخیلی ساده،الان توابع ما اجرا میشنتابع one بعد از تمام کارش(چاپ کردن مقدار "one") از Call Stack خارج میشهحالا نوبت به تابع two میرسه . . . که اونم با چاپ کردن مقدار "two" از stack خارج میشهپس حالا stack ما خالیه :) نکته : به هر کدوم از ایتم هایی که وارد call stack میشن میگن یک "frame"اگر درباره call stack خونده باشید یا شنیده باشید،حتما چیزی به نام eventLoop رو هم شنیدید یا خوندیدحالا اینکه اون دیگه چیه و کجای داستان قرار میگیره رو تو پست بعدی براتون مینویسمممنونم از اینکه تا اینجا رو بودی مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Mon, 02 Aug 2021 18:45:01 +0430 https://virgool.io/@mojtaba_afraz/%DA%86%DA%AF%D9%88%D9%86%D9%87-%D8%A8%D9%87-%DB%8C%DA%A9-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%D9%87-front-end-%D8%AA%D8%A8%D8%AF%DB%8C%D9%84-%D8%B4%D9%88%DB%8C%D9%85-uh71mia1giqh توسعه دهنده فرانت اند(Front-End Developer) شخصی است که با استفاده از HTML ، CSS و Javascript طرح ها را به صفحات وب سایت فعال تبدیل می کند تا کاربران بتوانند از طریق مرورگر به آن صفحات وب دسترسی داشته و با آنها تعامل داشته باشند.یک دهه پیش اصطلاحی به عنوان توسعه دهنده Front-end وجود نداشت. وقتی کسی وب سایتی را توسعه می داد ، فقط با عنوان توسعه دهنده وب شناخته میشدبا تغییر سریع فناوری وب ، اصطلاحاتی مانند طراحی UI / UX ، توسعه Back-end ، توسعه Front-end ، DevOps و غیره ظاهر می شوند. آنها نقشها را در توسعه وب طبقه بندی می کنند زیرا روز به روز با پیشرفت تکنولوژی تبدیل شدن به یک برنامه نویس کامل هم سخت تر میشد توسعه دهنده فرانت اند به این معنی است که شما پلی بین طراح و توسعه دهنده بک اند هستید. شما باید طراحی را درک کنید و در عین حال قادر به کد نویسی نیز باشید.با داشتن چنین منابع عظیمی در اینترنت ، یادگیری توسعه front-end به تنهایی بسیار آسان است. اما ، تصمیم گیری در مورد اینکه از کجا یادگیری را شروع می کنید یا آنچه را که باید در آینده انجام دهید می تواند گیج کننده باشد.به همین دلیل در این پست مسیری را به شما نشان می دهم كه وقتی تصمیم گرفتید به عنوان یك توسعه دهنده فرانت اند فعالیت کنید ، باید دنبال كنیدقبل از ادامه کار ، به خاطر داشته باشید که برای انجام تمام مراحل زیر ممکن است ماه ها یادگیری لازم باشد. منابع بسیاری وجود دارد که می توانید با استفاده از آنها به یک توسعه دهنده خوب در قسمت فرانت اند تبدیل شوید.تنها کاری که باید انجام دهید این است که تمرکز خود را حفظ کنید و صبر داشته باشید.تسلط بر اصول اولیه طراحی وب سایتدر این مرحله شما باید بتوانید یک وب سایت ساده کار کنید. شما چیزهای اساسی برای ساخت یک وب سایت ، از مفهوم آن تا موارد فنی را یاد خواهید گرفت.1 - درک نحوه کار وب و شرایط آناول از همه ، شما باید نحوه کار وب را درک کنید. خوب ، ممکن است بی اهمیت به نظر برسد اما قبل از اینکه به سراغ نکات فنی بروید ، باید درک کنید که مفهوم آن چیست.درک اشتباه از نحوه کار وب و اصطلاحات آن ممکن است هنگام یادگیری نکات فنی باعث کندی شما شود.2 - یادگیری HTML & CSSدر اینجا HTML مخفف Hypertext Markup Language است. این یک زبان نشانه گذاری برای ایجاد و ترتیب محتوای وب مانند عناوین ، پاراگراف ها ، تصاویر و سایر مطالب است.همچنین CSS مخفف Cascading Style Sheets است. این یک زبان ارائه برای سبک دادن به ظاهر و طرح مطالبی است که توسط HTML ساخته شده است. با CSS می توانید سبک قلم ، رنگ ، موقعیت ، padding ، حاشیه و موارد دیگر را تنظیم کنید.این دو مورد در ساخت یک وب سایت مستقل هستند اما با یکدیگر ارتباط دارند. 99٪ (اگر 100٪ نباشد) وب سایتهای موجود در اینترنت با این زبانها ساخته شده اند.اگر تعجب می کنید که HTML و CSS چگونه به نظر می رسند ، می توانید CTRL + Shift + i یا F2 را فشار دهید ، در اینجا برگه Element را انتخاب کنید و آنها را مشاهده کنید ، HTML در سمت چپ و CSS در سمت راست.3 - استفاده از JQuery & JavaScript در این مرحله ، من انتظار ندارم که شما به Javascript یک باره تسلط داشته باشید زیرا بعداً در مرحله 10 با آن بیشتر آشنا خواهید شد. شما فقط باید بفهمید که این چیست و چگونه از آن به همراه HTML & CSS در وب استفاده کنید.هدف اصلی این مرحله این است که شما می توانید با استفاده از Javascript ، به ویژه با استفاده از JQuery ، وب سایتی با عملکرد و محتوای پویا ایجاد کنید.جاوااسکریپت (به اختصار JS) یک زبان برنامه نویسی است که برای افزودن عملکرد ، تعامل ، اتوماسیون ، محتوای پویا و موارد دیگر در وب سایت استفاده می شود. Javascript کاری را انجام می دهد که HTML & CSS نمی تواند انجام دهد.جی کوئری (JQuery) محبوب ترین کتابخانه جاوا اسکریپت است که نوشتن وظایف معمول Javascript را مختصر تر می کند.نکته ای که به احتمال زیاد قراره در ادامه مسیر بهش بربخورید بلااستفاده بودن جی کوئری یا بحث مرگ جی کوئریه،ببنید دوستان من این موضوع رو رد نمی کنم،اما به جد به شما پیشنهاد می کنم که مبحث یادگیری جی کوئری رو حتما در ادامه داشته باشید4 - درک مقدماتی مفهوم UI / UX برای وبمن قبلاً اشاره کردم که توسعه دهندگان فرانت اند پل ارتباطی بین توسعه دهنده و طراح هستند. بنابراین ، از شما انتظار نمی رود که فقط بتوانید کدنویسی کنید ، بلکه باید مفهوم UI / UX (رابط کاربری / تجربه کاربری) را نیز درک کنید.این مهارت فنی نیست ، اما با درک آن ارزش افزوده ای خواهید داشت ، به ویژه هنگامی که هیچ طراح در تیم شما وجود ندارد.5 - تمرین و آزمایششما قبلاً در مورد HTML ، CSS و Javascript / JQuery آموخته اید ، اما هنوز بر آنها تسلط ندارید. فقط زمانی می توانید بر آنها تسلط پیدا کنید که وب سایت های واقعی ساخته شده باشید. این زمان شما برای ایجاد نمونه کارها است.شما ممکن است دوره ها و آموزشها را در مدت یک ماه به پایان رسانده باشید ، اما تمرین در HTML ، CSS و JQuery حداقل 2 ماه طول می کشد تا شما را به عنوان یک توسعه دهنده فرانت اند تبدیل کند.در این مرحله توقف وجود ندارد زیرا شما همچنان باید برای مراحل بعدی تمرین کنید.استفاده از ابزارها و چهارچوبهای Front-endدر این مرحله ، از برخی فریمورک ها و ابزارهای فرانت اند برای کمک به شما در ساخت وب سایت خود استفاده خواهید کرد. استفاده از آنها در پروژه شما روند توسعه وب شما را تسریع می کند زیرا آنها می توانند کارهای مشترک در توسعه وب را برای شما به طور خودکار انجام دهند.6 - یادگیری فریمورک های CSS (Bootstrap)اگر بعد از انجام مراحل 1 تا 5 به اینجا رسیدید ، باید حتماً نمونه کارهای وب سایت خود را ایجاد کرده باشید.از آنجا که قبلاً اصول را فرا گرفته اید ، تا جایی که بتوانید کدنویسی موثرتر و کارآمدتری داشته باشید ، سطح خود را بالا خواهید برد. با استفاده از چارچوب CSS در پروژه خود ، بهره وری خود را در ایجاد وب سایت افزایش می دهید.به زبان ساده ، CSS Framework دسته ای از کدهای CSS است که می توانید از آنها در پروژه خود استفاده کنید. با قرار دادن یک چارچوب CSS در پروژه خود ، حتی اگر کد CSS خود را ننویسید ، می توانید وب سایت خود را زیبا و مناسب جلوه دهید. فقط برخی از کلاس ها را در div خود قرار دهید که یک چارچوب CSS آنها را برای شما سبک کرده است.در این مرحله ، شما می آموزید که از Bootstrap استفاده کنید زیرا محبوب ترین چارچوب CSS در وب است7 - استفاده از پیش پردازنده CSS (SASS و LESS)پروژه وب سایت شما بزرگتر ، پیچیده تر و دارای صفحات زیادی است. شما باید کدهای CSS بیشتری بنویسید. شما ممکن است اغلب با استفاده از کپی کردن ، از برخی از استایل های CSS در صفحات مختلف استفاده مجدد کنید. در پایان ، کدهای CSS شما کثیف خواهند بود. همچنین می خواهید کد کمتری بنویسید زیرا صفحات زیادی باعث استرس شما شده است.خوب ، اگر اتفاقی که برای شما افتاده است ، وقت آن است که از پیش پردازنده CSS استفاده کنید. به زبان ساده ، CSS Pre-processor ابزاری است که به شما امکان می دهد کدهای CSS را با نحو خاص خود تولید کنید.دارای برخی از ویژگی ها مانند nesting ، متغیر و mixin است که به شما امکان می دهد کدهای CSS قابل استفاده مجدد ایجاد کنید. بیشتر نحوهای پیش پردازنده های CSS شباهت زیادی به CSS دارند. در یادگیری آن مشکلی نخواهید داشت زیرا بیشتر شبیه نسخه مختصر CSS است.پیش پردازنده های CSS بسیاری برای انتخاب وجود دارد. SASS و LESS محبوب ترین آنها هستند. نحو آنها نیز بسیار شبیه به یکدیگر است.8 - استفاده از Version Control (GIT)کنترل نسخه یکی دیگر از ابزارهای مفید برای کمک به شما در مدیریت پرونده ها و تغییرات در هر نوع پروژه توسعه نرم افزار است. بنابراین ، این فقط برای توسعه وب نیست.مزیت کنترل نسخه در صورت همکاری با برنامه نویسان دیگر در یک پروژه یا زمانی که مجبورید پروژه خود را به نسخه های مختلف تقسیم کنید ، قابل درک خواهد بود.در حال حاضر ، پرکاربردترین کنترل نسخه برای توسعه نرم افزار Git است. Git یک سیستم کنترل نسخه توزیع شده رایگان و متن باز است که برای مدیریت همه کارها از پروژه های کوچک تا بسیار بزرگ با سرعت و کارایی طراحی شده است.گیت با گیت هاب متفاوت است. در حالی که Git یک نرم افزار است ، Github یک وب سایت محبوب است که می توانید مخزن Git خود را در آنجا نمایش دهید یا بارگذاری کنید.9 - استفاده از Package Manager هامدیر بسته ابزاری برای توسعه نرم افزار است که به برنامه نویسان کمک می کند تا به راحتی کتابخانه های خارجی یا وابستگی ها را برای یک پروژه وارد یا اضافه کنند.قبل از استفاده از مدیر بسته ، متوجه خواهید شد که هر زمان به کتابخانه خارجی مانند JQuery یا چارچوبی مانند Bootstrap نیاز دارید ، آن را بارگیری کرده و به صورت دستی در پروژه خود قرار می دهید.مشکلی نیست تا زمانی که روی طرحی کار کنید که به مجموعه عظیمی از کتابخانه ها نیاز دارد. دیگر نمی توانید آن را دستی بارگیری و اضافه کنید زیرا کارآمد نیست. به همین دلیل شما به یک مدیر بسته نیاز دارید تا این کار را برای شما اتوماتیک کند.در توسعه front-end ، محبوب ترین مدیر بسته NPM (Node Package Manager) است. NPM مدیر بسته پیش فرض برای محیط زمان اجرا JavaScript Node است.10 - استفاده از Task Runner / Build Toolsقبل از ادامه کار ، باید مطمئن شوید که پروژه توسعه وب شما توسط NPM آغاز شده است (مرحله 9). یک task runner به عنوان یک وابستگی dev ، در پروژه NPM شما قرار می گیرد.ابزار Task Runner ابزاری اتوماسیون است که به شما کمک می کند کار مشترک در توسعه وب مانند کامپایل SASS یا LESS به CSS ، کوچک کردن HTML / CSS / JS ، بهینه سازی دارایی ها و راه اندازی وب سرور را اجرا کنید.با استفاده از task runner می توانید کد خود را برای تولید بهینه کنید تا بتواند عملکرد را افزایش دهد.اطلاعات بیشتر در Javascript11 - درک مفهوم اساسی برنامه نویسیبعد از طی مراحل 1 تا 10 ، ممکن است احساس کنید که از قبل یک برنامه نویس واقعی شده اید. خوب ، شما واقعاً به این هدف نرسیده اید زیرا آنچه قبلاً یاد گرفته اید بیشتر زبان Markup (HTML) و Presentation Language (CSS) است. شما فقط کمی در مورد javascript می دانید.به همین دلیل هم اکنون درمورد آن اطلاعات خواهید گرفت. اما ، قبل از یادگیری موارد فنی ، طبق معمول ، من به شما توصیه می کنم که ابتدا مفهوم مربوط به زبانهای برنامه نویسی را بخوانید12 - جاوااسکریپت مدرن (ES6) را بیاموزیدشما قبلاً کمی در مورد javascript یاد گرفته اید. اکنون وقت آن است که شما آن را به عنوان یک بخش اساسی یاد بگیرید. این بار ، شما فقط از طریق مقالات یا برخی از فیلم های یوتیوب یاد نخواهید گرفت زیرا بسیاری از درس ها برای یادگیری وجود دارد. . . در چارچوب های Javascript برای برنامه های وب وارد شویددرباره سه فریمورک و ابزار برتر بخش فرانت اند ( Vue,React,Angular ) نمینویسم،یا اگر بنویسم در مطلب جداگانه به اون میپردازم،با یه جستجو کوچیک میتونید به سطح عظیمی از اطلاعات درباره این سه عزیز برسید،این بخش قطعا به عهده خودتونهنتیجهاگر فقط بخوانید ، تمام منابع جمع آوری شده در بالا بی فایده خواهد بود و سپس آن را فراموش خواهید کرد. برای یادگیری آن باید صبور و پرتلاش و سخت کوش باشید.بنابراین ، از این به بعد ، امیدوارم که دیگر هیچ بهانه ای برای یادگیری توسعه front-end نداشته باشید زیرا من مسیر یادگیری را به شما نشان داده ام. بیشتر منابع فوق حتی رایگان هستند.موفق باشید ? مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Fri, 21 May 2021 21:53:40 +0430 https://virgool.io/CodeLovers/%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1-%D9%BE%D9%88%D8%B4%D9%87-%D8%A8%D9%86%D8%AF%DB%8C-%D9%85%D9%86%D8%A7%D8%B3%D8%A8-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%87%D8%A7%DB%8C-%D9%85%D9%82%DB%8C%D8%A7%D8%B3-%D8%A8%D8%B2%D8%B1%DA%AF-%D8%AF%D8%B1-reactjs-qmzml5wwhwld ساختار یا معماری پروژه نقش مهمی در نگهداری پروژه دارد. یک ساختار پوشه ای خوب به توسعه دهندگان در تیم کمک می کند تا بتوانند از طریق آن آسان و با هم ارتباط برقرار کنند و روند توسعه به صورت استاندارد پیش بروداکوسیستم React.js به توسعه دهندگان آزادی می دهد تا بتوانند پروژه را آنطور که دوست دارند ساختار دهندبا این حال ، اگر تازه یک پروژه در مقیاس متوسط تا بزرگ را شروع می کنید،اگر برنامه و پلنی برای ساختار بندی و قالب بندی پروژه نداشته باشید دیر یا زود گیجی و سردرگمی گریبانگیر شما و تیم شما میشود و روند توسعه در ادامه سخت و سخت تر خواهد شدبنابراین ، چگونه می توان پروژه React خود را ساختار بندی کرد؟ببینید، مقالات زیادی وجود دارد که در مورد رویکردهای مختلف صحبت می کنند. صادقانه بگویم ، هیچ معماری برتری وجود ندارد که بتوان گفت برای انواع پروژه های مختلف با هدف ها مختلف مناسب استآنچه که من در اینجا به شما نشان خواهم داد ، به سادگی یک روش فکری برای ساختار یک پروژه React است. شما می توانید برخی از قسمتها یا همه آنها را برای پروژه خود در نظر بگیرید. این انتخاب شماستبنابراین ، من در مورد هر یک از عملکردهای پوشه توضیح خواهم داد و دلیل آن را اضافه می کنم.ساختار پوشه بندی React1 - پوشه Assetsاین پوشه شامل دو پوشه دیگر برای تصاویر و SCSS است،در اینجا من از SCSS استفاده می کنم اما اگر شما از آن در پروژه خود استفاده نمی کنید مشکلی ندارد،میتوانید نام آن را به css یا styles تغییر دهیداگر ترجیح میدهید style خود را در منطقه component خودش بگذارید مشکلی نیست،اما در اینجا می میتوانید style های Global و مشترک در پروژه را در اینجا بگذارید2 - پوشه Componentsپوشه کامپوننت ها شامل مجموعه ای از بخش های UI مانند دکمه ، قسمت ورودی سفارشی ، مدال و غیره است که در میان پرونده های پروژه به اشتراک گذاشته می شود و مورد استفاده قرار می گیرد.اگر دوست ندارید نام آن «Components» باشد می توانید نام آن را به «elements» یا «UIs» تغییر دهید.3- پوشه Pagesاین پوشه در واقع Route های برنامه ما را منعکس می کند،با برداشتی که از نام فولدر می توان کرد باید گفت درواقع هر فایل در این پوشه هنگام بارگذاری یک Route صدا زده می شود و component های ساخته شده در پروژه در این صفحات استفاده می شوند4-پوشه Parts (گاها Layout)پوشه Parts تقریباً مشابه پوشه Components است. این شامل اجزای قابل استفاده مجدد است که در صفحات استفاده می شود.تفاوت در این است که اجزای موجود در پوشه Parts منعکس کننده قسمتهایی از صفحه مانند Footer ،SideBar و Headerهستند ، در حالی که پوشه کامپوننت ها شامل اجزای مستقل UI مانند دکمه ، فرم یا قسمت ورودی هستند.گاهی اوقات ، یک Part میتواند تشکیل شده از چند Component باشد5 - پوشه Servicesپوشه services از معماری Angular الهام گرفته شده است.در Angular قابلیتی به نام Dependency Injection وجود دارد که به ما امکان تزریق سرویسی را در هر نقطه از پروژه می دهد. بیشتر اوقات ، یک سرویس برای مدیریت ادغام API استفاده می شود.سرویس یک کامپوننت نیست. این به سادگی یک تابع javascript برای مدیریت ادغام API بر اساس نوع داده است.برای اینکه روشن تر باشد ، در اینجا نحوه نوشتن سرویس در اکثر پروژه ها نشان داده شده است.و در اینجا چگونگی فراخوانی آن در کامپوننت . . .من از axios برای فراخوانی API استفاده می کنم.ممکن است بپرسید ، چرا باید در صدا کردن API از services استفاده کنیم وقتی میتوان آن را در کامپوننت ها نوشت؟خوب ، اگر ما بخواهیم API را در کامپوننت های مختلف ، توسط توسعه دهندگان مختلف فراخوانی کنیم ، چه اتفاقی رخ می دهد؟.شرط می بندم ، کدها استاندارد نخواهند شد و در صورت تغییر توسعه دهندگان ، نگهداری آنها دشوار است.با استفاده از سرویس ها ، می توانیم این مسئله را با متمرکز کردن تماس API بر اساس نوع داده حل کنیم. اگر کسی می خواهد از آن استفاده کند ، فقط با صدا کردن آن در Service قابل انجام باشد6 - پوشه Store (اگر از Redux استفاده می کنید)اگر تصمیم دارید از redux در پروژه خود استفاده کنید ، پوشه Store به سراغتون میاد. در داخل آن ، زیر پوشه actions وreducers برای مدیریت حالت های redux وجود دارد.عمدتا ، actions وreducers در اجزای صفحه فراخوانی می شوند ، بنابراین آنها معمولاً براساس صفحاتی که از آنها استفاده می کنند ، نامگذاری می شوند.اگر برنامه شما یک پروژه در مقیاس کوچک تا متوسط است ، سعی کنید قبل از استفاده از redux ، استفاده از props و state را به حداکثر برسانید. اگر این خیلی پیچیده است ، خوب ، می توانید از redux استفاده کنید.7 - پوشه Utilsپوشه utils فقط محلی برای یافتن برخی از توابع کاربردی است که به طور مکرر در پروژه استفاده می شود. پرونده ها در پوشه utils فقط باید حاوی برخی از توابع مانند قالب بندی تاریخ ، تبدیل رشته و غیره باشند.آیا از ابتدا لازم است همه پوشه ها را وارد کنیم؟خوب ، نه. از ابتدای پروژه لازم نیست همه پوشه ها را وارد کنید.به عنوان مثال ، اگر مطمئن نیستید از redux استفاده کنید یا استفاده نمی کنید ، لازم نیست که یک پوشه Store ایجاد کنید.در صورت اطمینان از اینکه پروژه شما فقط تعداد کمی از API ها را مصرف می کند ، پوشه Services نیز لازم نیست.با این حال ، پوشه های assets، components، parts و pages مهم است که از ابتدا برای مدیریت کدها مرتب شوند. شما چی فکر میکنید؟ اگر نظری دارید ، لطفاً آزادانه نظر دهید و ایده های خود را مطرح کنید تا بتوانیم در این مورد نظرات بیشتری داشته باشیم. مجتبی افراز | Mojtaba Afraz مجتبی افراز | Mojtaba Afraz Fri, 21 May 2021 15:51:34 +0430