یادگیری جاوا اسکریپت یک ماجراجویی است. پس از تقریباً یک دهه برنامه نویسی آماتور و حرفه ای در صنایع مختلف به وسیله جاوا اسکریپت، عموماً همه با این جمله موافق هستند. پروژه های فرانت اند با جاوا اسکریپت به ما برنامه نویسان آزادی زیادی در انتخاب، انعطاف پذیری و فضای بسیار زیادی برای خلاقیت می دهد. اما در عوض نیازمند کمی دانش در زمینه ی جاوا اسکریپت و برنامه نویسی می باشد. اگر دوست دارید که موارد بسیار مهمی را در برنامه نویسی به زبان جاوا اسکریپت یاد بگیرید، حتماً این مطلب را به صورت کامل مطالعه کنید و مطمئن باشید که از خواندن و یادگیری این نکات به هیچ وجه پشیمان نخواهید شد.
توضیحات مقدماتی
بعد از انجام دادن پروژه های بسیار زیادی با JQuery، require.js، Angular.js، React، ExtJs و شاید ده ها چیز دیگر در جاوا اسکریپت، چیزهای غیر قابل تصوری از فرانت اند 2018 جاوا اسکریپت دیده ام و همه ی ما احتمالاً زمانی با آن کار کرده ایم. اما همواره الگوهایی وجود داشته اند که کار می کنند تا پروژه های ناهماهنگ به نوعی قابل مدیریت شوند. در ادامه با 10 مورد از اساسی ترین آن ها آشنا می شوید که از تجربه شخصی گرفته شده اند. این الگوها پایه هایی استوار را برای یک پروژه از هر فریم ورک، از هر متد و از هر اندازه ای فراهم می کنند. اگر از این الگوها استفاده کنید می توانید مطمئن شوید که نیازی به توضیحات اضافه و همینطور کامنت گذاری در پروژه نیست و کار برنامه نویس نیز بسیار راحت تر می شود و اگر در یک گروه عضو باشید نیز سایر اعضا به راحتی می توانند کدهای شما را متوجه شده و بهتر آن را بهبود ببخشند.
تقسیم کردن پروژه جاوا اسکریپت به بخش های مختلف
بیشتر ما این عبارت را در جایی شنیده ایم، اما به نظر می رسد که بسیاری از افراد این قانون را جدی نگرفته اند. CommonJS، Webpack و Node به ما این توانایی را می دهند که کدهایمان را به چندین فایل تقسیم کنیم. اما چرا ما باید نگران باشیم؟ در ادامه به بررسی دو دلیل برای تقسیم کردن پروژه در جاوا اسکریپت خواهیم پرداخت.
با تقسیم کردن برنامه در جاوا اسکریپت برنامه دارای ثبات می شود.
تقسیم کردن پروژه در جاوا اسکریپت به فایل های کوچک و تکی زمانی که کدهای شما زیاد است، باعث می شود که جست و جو و مدیریت آن ها به میزان بسیار قابل توجهی راحت تر شود، نام گذاری هر فایل بعد از این که آن را جدا کردیم باعث می شود که پروژه بهتر دیده شود و باعث می شود که در هنگام مشاهده ی معماری پروژه به مغزتان فشار نیاید.
با تقسیم کردن برنامه در جاوا اسکریپت بهتر می توانید آن را مدیریت کنید.
جدا کردن هر قطعه و قرار دادن آن درون فایل مربوط به آن به شما این اجازه را می دهد که به راحتی در مواقع نیاز درون آن حرکت کنید. زمانی که تابع کمکی مورد نیاز شما در قسمت دیگری از اپلیکیشن قرار دارد، می توانید به راحتی یک پوشه ی اشتراک گذاری ایجاد کنید و تابع مورد نیاز را درون آن قرار دهید و از آن استفاده کنید.
در جاوا اسکریپت کدها را واضح سازی کنید.
درجاوا اسکریپت وقت بگذاریدو نام تمامی متغیرها، تابع ها و فایل ها را تغییر دهید.همانطور که برای فرزند خود نام گذاری می کنید، نام های مناسبی را در جاوا اسکریپت برای آن ها انتخاب کنید. شما امروز 0.3 ثانیه برای این که نام یک متغیر را x قرار دهید گذراندید ولی یک ماه بعد شما باید دو روز وقت بگذارید تا متوجه شوید که این متغیر چه معنایی می دهد. بنابراین نام آن را تغییر دهید حتی اگر چهار برابر زمان نیاز باشد. فکر کن و از نام های طولانی نترس.
از هک و چیزهایی که باعث می شوند درباره اپلای کردن به MIT فکر کنید، جلوگیری کنید. راه حل شما در واقع می تواند هوشمندانه یا پیچیده باشد و حتی گاهی اوقات در آینده شما یا یکی از هم تیمی های شما بخواهد از آن استفاده کند. در این شرایط باید زمان بسیار زیادی را صرف کند تا متوجه شود که درون کد جاوا اسکریپت شما چه اتفاقی افتاده است. تمرکز کنید که برنامه های خود را ساده سازی کنید بدون این که به توضیحات و یا کامنت ها نیاز داشته باشد.
از اعداد جادویی و استرینگ ها به صورت مستقیم استفاده نکنید.
همانند نام گذاری، از اعداد جادویی و استرینگ ها به صورت مستقیم در کد خود استفاده نکنید. مهم نیست که این اعداد یا استرینگ ها چقدر کوچک یا ارزشمند باشند، آن را درون یک متغیر با اسمی با معنی قرار دهید و آن را به بالای جایی که می خواهید از آن در جاوا اسکریپت استفاده کنید، قرار دهید. در بیشتر اوقات وقتی از یک مقدار به صورت مستقیم در کد جاوا اسکریپت استفاده می کنید ممکن است در جایی دیگر نیز استفاده شود، قرار دادن آن ها در متغیرها باعث می شود که کمتر از کد تکراری استفاده کنید و در نتیجه دارای کد ساده تری باشید که این کار ارزشمند است. بسیاری از افراد گمان می کنند که این کار در برنامه نویسی به زبان جاوا اسکریپت اضافه کاری است. در حالی که چنین نیست و شما با انجام این کار در واقع نشان می دهید که در برنامه نویسی به زبان جاوا اسکریپت یک فرد کاملاً حرفه ای هستید.
با پیچیدگی و تودرتویی در جاوا اسکریپت مقابله کنید.
اگر عرض کد شما بیشتر از 120 کاراکتر است و یا عمق آن بیشتر از 500 خط است یا دستور if شما بیشتر از سه سطح پایین رفته است، بیشترین تلاش خود را برای تقسیم بندی کردن کد خود در جاوا اسکریپت انجام دهید. شما می توانید در پیچیدگی هایی که مربوط به دستورهای شرطی است، درون if های تودرتو کد خود را به تقسیم بندی کنید و برای این تقسیم بندی می توانید از تابع های جداگانه استفاده کنید. اگر شما درون کدتان از فراخوانی های همزمان و پی در پی استفاده کرده اید، با استفاده از async/await می توانید اقدام به ساده سازی کد خود کنید.
پیچیدگی های بسیار زیادی در برنامه نویسی جاوا اسکریپت باعث می شود که علاوه بر این که خودتان در حین برنامه نویسی با جاوا اسکریپت دچار مشکل شوید و نتوانید برنامه ها و اپلیکیشن هایی را که نوشته اید را دیباگ کنید، افراد دیگری که قصد داشته باشند کد شما را مشاهده کنند هم نمی توانند به خوبی از آن سر در بیاورند و در نتیجه پروژه ی شما با مشکل بسیار بزرگی رو به رو خواهد شد.
پیکربندی منظم در جاوا اسکریپت
در صورتی که برنامه ی شما از متغیرهای global، API endpoints، قابلیت تغییر یا اعتبارنامه شخص ثالث استفاده می کند، آن ها را در یک فایل پیکربندی جداگانه قرار دهید. مجموعه ای از پکیج ها وجود دارد که به شما در مدیریت پیکربندی هم در وب و هم در کامپیوترتان کمک می کند، همانطور که می دانید اپلیکیشن شما هم بر روی سرور موجود است و هم بر روی کامپیوتر برنامه نویس؛ به همین علت این پکیج ها در مدیریت هر دو حالت به شما کمک می کنند. ایجاد فایل پیکربندی در ابتدای کار پروژه بسیار راحت تر است و این امکان را به شما می دهد که نحوه ی کارکرد این محیط را تنظیم کنید، مشخص کنید که با چه شرطی کار کنند، دقیقاً کدام ویژگی های آن ها در دسترس باشند و بسیاری از کارهای دیگر که در پروژه های جاوا اسکریپت می توان انجام داد.
فریم ورک ها در جاوا اسکریپت برای کمک کردن هستند.
بارها شده است که شما یک فریم ورک را ببینید که از آن استفاده شده و یا استفاده کننده آن را می شناخته است و یا به دلیل محبوبیت از آن استفاده کرده است. کمی زمان بگذارید و فکر کنید که برای پروژه ی خود نیاز به یک فریم ورک دارید یا نه و اگر دارید کدام یک از آن ها را باید استفاده کنید. کاربر نهایی وب سایت شما در صورتی که بداند فریم ورکی که از آن برای طراحی سایت و یا اپلیکیشن خود در جاوا اسکریپت استفاده کرده اید در Github دارای صد هزار ستاره است نمی تواند به راحتی از تجربه ی کردن کار با وب سایت شما بگذرد. کتابخانه ها و فریم ورک ها را می توان به چندین دسته تقسیم کرد که در ادامه با آن ها آشنا خواهیم شد.
کتابخانه های React در جاوا اسکریپت
زمانی از آن استفاده می شود که شما نیاز دارید که یک کنترل کلی بر روی معماری برنامه و نحوه ی ساخت آن داشته باشید اما آن ها فقط برای اپلیکیشن های وب ساخته شده اند. کار با سیستم React زمان زیادی را می گیرد و نقشه های بسیار زیادی قبل از آن نیاز است. به شرطی که شما بدانید می خواهید چکار کنید React می تواند کمک زیادی به شما کند. این کتابخانه ی جاوا اسکریپت از بهترین کتابخانه های آن می باشد که امروزه در دنیا بسیاری از افراد از آن استفاده می کنند بنابراین برای استفاده از آن احساس نگرانی نکنید و خیالتان راحت باشد.
کتابخانه های Angular/VueJS/ Ember در جاوا اسکریپت
زمانی از این کتابخانه های جاوا اسکریپت استفاده می شود که نیاز به یک اپلیکیشن وب سریع و قابل اعتماد باشد. این فریم ورک ها کارهای زیادی برای شما انجام می دهند و باعث می شوند که از مزایا و معایب معماری برنامه دوری کنید و همینطور ساختار دقیق آن ها نیز آزادی عمل بیشتری را به شما نسب به React می دهد.
کتابخانه های JQuery / lodash/ similar جاوا اسکریپت
زمانی که نیاز به یک صفحه ی وب دارید که سریع بالا بیاید و بتواند چند کیلوبایت صرفه جویی کنید، می توانید از این کتابخانه ها استفاده کنید. آن ها می توانند به راحتی زمان توسعه ی اپلیکیشن را کاهش دهند اما باید مراقب باشید از آن جایی که آن ها به شما اجازه می دهند کدهای ناقص بنویسید از آن ها می توان به عنوان یک راهنما استفاده کرد نه یک پایه.
کتابخانه های Vanilla / No framework جاوا اسکریپت
از این کتابخانه ها می توانید هم برای اپلیکیشن های وب و هم صفحات وب استفاده کنید. زمانی که شما زمان زیادی را صرف برنامه نویسی و نقشه کشیدن می کنید، جاوا اسکریپت انتخاب خوبی است .زمانی که پروژه ی شما یک چیز تجربی دارد WebGL، Workers، بهینه سازی های عمیق یا انیمیشن های مرورگر را معرفی می کند. شما در نهایت می توانید فریم ورک شخصی خود را بسازید.
این لیست از کتابخانه های جاوا اسکریپت تنها به عنوان یک پیشنهاد است، زمان بگذارید و تصمیم بگیرید که کدام فریم ورک برای شما بهتر است.
به جز برای نمونه های اولیه در جاوا اسکریپت تست بنویسید.
یونیت تست ها، Smke تست ها، تست های End-to-end، Sanity check ها. به جز مواردی که پروژه ی شما یک پروژه ی اولیه است که قرار است به زودی بازنویسی شود تست ها را بنویسید. با افزایش پیچیدگی، نگهداری و مدیریت کدهای شما سخت تر می شود. تست ها می توانند این کار را برای شما انجام دهند. گاهی اوقات با یک باگ رو به رو خواهید شد و در صورتی که از تست ها در هنگام نوشتن پروژه کمک گرفته باشید، همان لحظه است که از خودتان تشکر می کنید که با استفاده کردن از تست ها در هنگام طراحی پروژه کار دیباگ کردن کد را برای خودتان به میزان بسیار زیادی راحت تر کرده اید.
در جاوا اسکریپت از کنترل کننده ورژن استفاده کنید.
مهم نیست که این یک نمونه ی اولیه باشد یا یک اپلیکیشن وب کامل یا یک نمونه کوچک از اپلیکیشن وب، از گیت یا از سایر کنترل کننده های ورژن (version control)، از همان لحظه ای که شما اولین خط از کدتان را می نویسید استفاده کنید. نحوه ی ادغام کردن را یاد بگیرید، مشکلات را حل کنید و به commit های قبلی بازگردید. کنترل کننده ورژن به شما اجازه می دهد که از طریق زمان سفر کنید، قسمت های شکست خورده ی کد را نجات دهید و تغییراتی که در گذشته ایجاد شده را مشاهده نمایید. بی شک یکی از مهم ترین نکات یا حتی مهم ترین نکته ای که می توانید از این مقاله بیاموزید استفاده کردن از کنترل کننده ورژن در پروژه هایتان است، شاید این سوال برایتان پیش بیاید که چرا این مسئله این قدر مهم است؟ مهم بودن این مسئله به این دلیل است که حتی اگر شما بقیه ی چیزها را نادیده بگیرید و بقیه ی مسیر را به صورت تصادفی اشتباه بروید، با استفاده از کنترل کننده ورژن می توانید آن را بدون نیاز به خودش تعمیر کرده و دوباره شروع کنید.
حالت های مختلف را مسئولانه مدیریت کنید.
یک الگو یا کتابخانه برای مدیریت حالت ها پیدا کنید و از آن به خوبی استفاده کنید طوری که انگار زندگی شما به آن وابسته است. مانند توسعه دهندگان فرانت اند معمولاً با دو چالش مهم در جاوا اسکریپت رو به رو هستیم که این دو چالش نشان دادن داده ها و ذخیره ی آن ها می باشد. این دو چالش تا آخر پروژه در کنار شما هستند و شما بالاخره باید اقدام به حل کردن این دو چالش کنید. بهتر است که این کار را در همان ابتدای پروژه انجام دهید چرا که با گذشت زمان این کار سخت تر می شود و به نوعی اضافه کاری است.
ذخیره دیتا و مدیریت حالت ها معمولاً با پیچیدگی هایی رو به رو است چرا که شما باید به صورت همزمان این دو چالش را حل کنید. در واقع هدف ما این نیست که پیچیدگی کار را افزایش دهیم بلکه می خواهیم کاری کنیم که همان چیزی که در سرور اتفاق می افتد را کاربر به صورت همزمان بر روی صفحه نمایش خود مشاهده کند و همینطور بتواند تغییراتی بر روی آن انجام دهد. حال چطور این مسئله را در جاوا اسکریپت حل کنیم؟
اقدام اول:
برای حل کردن این مشکل، React روش های مختلفی به شما ارائه می دهد که از جمله آن ها می توان به استفاده کردن از Redux در معماری Flux و همینطور استفاده از Mobx اشاره کرد. هر کدام از این ها دارای مزایا و معایبی هستند. برای این کار مطمئن شوید که اصول استفاده از کتابخانه را به خوبی یاد گرفته اید.
اقدام دوم:
کتابخانه های Angular، Ember و VueJS بر اساس ایده ی قابل مشاهده بودن به راه حل های مدیریت خودشان می پردازند در حالی که چنین کاری لازم نیست زیرا کتابخانه های اضافی همچون ngRx و Akita و Vuex وجود دارند این که این کار را انجام می دهند.
اقدام سوم:
برای بقیه ی فریم ورک ها یا وانیلا جاوا اسکریپت می توانید از Redux، Mobx یا راه حل مدیریت حالت خودتان استفاده کنید. هدف اصلی این است که مطمئن شوید که اپلیکیشن از یک ابزار مناسب استفاده می کند. این ابزار می تواند یک سرویس یا یک کتابخانه باشد.
روند سؤال کردن در جاوا اسکریپت
در پایان به گروه ها گوش دهید و یاد بگیرید. هر چیزی که می خوانید، هر کامنتی، هر مقاله ی بلند و طولانی که حتی توسط یک گربه نوشته شده است و می تواند بر روی کد شما تأثیر بگذارد را در نظر داشته باشید و سؤال بپرسید. با ذهنی باز از ایده های جدید استقبال کنید و آن ها را بپذیرید، حتی می توانید از ایده های فرانت اند نیز استفاده کنید ولی فقط به یاد داشته باشید که از روی عادت این کار را نکنید و با علاقه آن را انجام دهید. این مورد باعث شده است که تعداد بسیار زیادی از پروژه های جاوا اسکریپت به صورت مستقیم به فراموشی سپرده شوند.
نکات مهم درباره فریم ورک های مورد استفاده در پروژه
پروژه هایی که با استفاده از فریم ورک های قدیمی نوشته می شوند، گاهی اوقات از پروژه هایی که با دو فریم ورک در یک زمان نوشته شده اند، (به دلیل این که یک نفر از تیم خارج شده است) بسیار بهتر و پایدارتر هستند. در حالی که رویکرد جدید ممکن است اپلیکیشن شما و عملکرد توسعه دادن را بهبود ببخشد. به انتخاب خود بچسبید و از انتخاب خودتان جدا نشوید تا خاصیت نگهداری آن را حفظ کنید و آن را در صورت نیاز تنظیم کنید.
نظرات کاربران در رابطه با این دوره