الگوهایی درباره پروژه های جاوا اسکریپت
الگوهایی درباره پروژه های جاوا اسکریپت
جاوا اسکریپت یکی از زبان های معروف برنامه نویسی می باشد که در پروژه های مختلف طراحی سایت می توانید از کتابخانه های آن بهره مند شوید ، این زبان به پروژه های سمت کاربر و برنامه نویسان امکان آزادی عمل می دهد و با انعطاف پذیری و فضای خلاقیت بالا توانسته به کدنویسان کمک زیادی بکند و آنها البته در این راه باید به زبان های فریم ورک جاوا اسکریپ با jQuery ، require.js ، Angulars ، ReactJs ، ExtJs آشنا باشند تا بتوانند پروژه های فراوانی را کدنویسی نمایند. البته در این راه بنده به عنوان برنامه نویس موارد غیر قابل تصور زیادی در پروژه های سمت کاربر یا فرانت دیده ام که همه ما احتمالا آنها را انجام داده ایم.
الگوهای فراوانی در این زمینه وجود داشته که حتی بر روی ناهماهنگ ترین پروژه ها نیز تاثیر گذار بوده اند. در این مطلب سعی کرده ایم حیاتی ترین الگوها را به شما معرفی کنیم که از تجربیات فردی بدست آمده و تمامی این مواردی که امروز خدمت شما ذکر می کنیم باید در کار مورد استفاده قرار بگیرد ، الگوهایی که بر مبنای پایدار برای یک پروژه ، با هر چارچوب ، روش و تیم های مختلف می تواند استفاده شوند. در ادامه با تیم نیکداد همراه باشید تا چیزهای جدید و مفیدی یاد بگیرید و با این مطالب جذاب بتوانید پروژه های عالی درست کنید.
تقسیم و غلبه در پروژه های جاوا اسکریپت
تقسیم و غلبه به معنی جدا کردن فایل های جاوا اسکریپت از یکدیگر می باشد، بیشتر ما اصطلاح تقسیم و غلبه را در جایی شنیده‌ایم، اما به نظر می‌رسد که بسیاری افراد این قانون را دست‌کم می‌گیرند. CommonJS ,Webpack ,NodeJS به ما توانایی این را می دهند، که بتوانیم فایل مربوط به کد ها را از یکدیگر جدا کنیم، پس چرا به آن ها اهمیت نمی دهیم؟ در مبحث تقسیم و غلبه ما ۲ موضوع زیر را مورد بررسی قرار می دهیم:
- هماهنگی : با تقسیم پروژه شما به فایل‌های تک، مدیریت جستجو، و وابستگی به طور قابل‌توجهی آسان‌تر می‌شود، زیرا اساس کد شما رشد کرده است. نامگذاری هر فایل بر اساس محتوایی که در آن وجود دارد، آن فایل را شهودی می‌سازد، و زمانی که از معماری گذر می‌کند هیچ گونه فشاری بر روی مغز وارد نمی‌کند.
- مدیریت: جدا کردن هر نوع کدی به فایل خودش، به شما این امکان را می‌دهد که در صورت لزوم به سرعت آن را جابه جا کنید، و ترویج جداسازی را انجام دهید. زمانی که تابع کمکی شما، در قسمت‌های مختلف برنامه مورد نیاز است، شما می‌توانید به سادگی یک شاخه مشترک ایجاد کنید، وتابع کمکی را به آن جا بکشید. با این کار شما، تابع کمکی را در دسترس بخش‌های دیگر کد خود قرار می دهید.
نامگذاری همه عناصر در پروژه های جاوا اسکریپت
هر متغیر، تابع، یا فایلی زمان شما را می‌گیرد؛ آنها را طوری نامگذاری می‌کنید که انگار دارید نوزاد خود را نامگذاری می‌کنید. شما ممکن است با نامیدن متغیر”x”زمان ۰٫۳ ثانیه در روز صرف کنید، اما در یک ماه شما ۲ روز وقت صرف خواهید کرد تا بفهمید چه معنایی دارد، سپس ۴ نفر دیگر در اصلاح کردن آن وقت می گذارند. به جلو فکر کنید، و از اسم‌های طولانی نترسید. از هک کردن و چیزهایی که باعث می‌شوند شما فکر کنید مستقیما به MIT(موسسه فناوری ماساچوست) متصل می شودی، خودداری کنید. راه‌حل شما ممکن است با درایت و پیچیده باشد، و گاهی مربوط به زمانی در آینده شما، یا یک نفر در تیم تان باشد، روی آن توافق کنید و سپس یک تکه بزرگ از زمان را صرف تلاش برای مشخص کردن آنچه در این کد اتفاق می‌افتد کنید. بر روی ایجاد چیزهای ساده، بدون نیاز به مستند سازی، تمرکز کنید.
اعداد و رشته های جادویی
اعداد و رشته‌های جادویی خود را حل کنید، این مرحله نیز مانند مرحله نام گذاری است؛ هر چند ممکن است وسوسه‌انگیز باشد، اما از اعداد و یا رشته‌های جادویی در کدهای خود استفاده نکنید. مهم نیست که چقدر مقدار آن کوچک یا غیر عادی به نظر می‌رسد، آن را درون یک متغیر با یک نام معنی‌دار قرار داده و به بالای محدوده کد خود انتقال دهید. اغلب اوقات، هر مقدار مشخصی که شما وارد کد می کنید، دوباره در جای دیگری استفاده خواهد شد. قرار دادن اعداد و رشته های شما در متغیرهای درست، تکرار کد را کاهش داده، و تنظیمات را ساده‌تر می‌کند، همچنین این کار می تواند به مقادیر شما معنا بخشد.
مبارزه داخلی در پروژه های جاوا اسکریپت
اگر کد شما فراتر از ۱۲۰ کاراکتر به سمت راست برود، یا فراتر از ۵۰۰ خط به پایین حرکت کند، یا اگر توضیحات شما ۳ سطح عمیق دارد، نهایت تلاش خود را بکنید که آن را تقسیم کنید. شما می توانید این شرایط را حل کنید، پیچیدگی کد ها را با تقسیم آن ها در فایل های جداگانه، اگر توضیحات شما زیاد است، آن را در توابع مختلف، وعده ها، یا شواهد عینی تقسیم کنید. اگر از فراخوانی های ناهماهنگ زیادی استفاده می کنید، هماهنگ سازی می تواند کد های شما را آسان تر سازد.
پیکر بندی جداگانه برای برخی فایل ها
اگر برنامه شما از ارزش‌های سراسری، نقاط انتهایی API(رابط کاربردی برنامه نویسی)، یا نمایش ویژگی ها استفاده می‌کند، آنها را در یک فایل پیکربندی جداگانه قرار دهید. تعدادی از بسته‌ها وجود دارند، که به مدیریت پیکر بندی ها کمک می‌کنند. در برخی موارد برنامه شما هم روی سرور و هم روی لوکال هاست برای توسعه در دسترس خواهد بود . ایجاد فایل پیکربندی اولیه بسیار آسان‌تر از ساخت آن در مراحل بعدی است، و به شما اجازه می‌دهد تا موارد زیر را تنظیم کنید:
- نحوه رفتار محیط های پیکر بندی
- از چه اختیاراتی می توانند استفاده کنند؟
- چه ویژگی هایی دردسترس است؟ و سایر موارد…
استفاده ازچهارچوب ها در پروژه های جاوا اسکریپت
احتمالا بار ها دیده اید، که چهار چوب های جاوا اسکریپت مورد استفاده قرار می گیرد، شاید به خاطر این است که اغلب افراد آن ها را می شناسند، یا آن ها از محبوبیت بین مردم برخوردار است. زمان خود اختصاص دهید به این که، ببینید چه چهار چوبی مناسب پروژه شما می باشد، و کدام یک از این چهار چوب ها باید وجود داشته باشد. اگر وب سایت شما در چارچوبی ایجاد شود که ۱۰۰/۰۰۰ ستاره در سایت Github دارد، کاربر نمی‌تواند نسبت به این فریم ورک بی تفاوت باشد. از روی تجربه، من چارچوب‌ها و کتابخانه‌ها را به صورت زیر انتخاب می‌کنم:
- React: وقتی که شما به کنترل کامل بر روی معماری و ساخت نیاز دارید، React می تواند گزینه خوبی برای شما باشد، اما باید در نظر داشته باشید که، این فریم ورک فقط برای برنامه های وب ساخته شده است. توسعه محیط React زمان می برد، و نیازمند برنامه ریزی زیادی قبل از آن می باشد. React بازدهی خوبی برای شما دارد، تنها در صورتی که بدانید، چه کاری میخواهید انجام دهید.
- Angular / VueJS / Ember : زمانی که شما به یک برنامه تحت وب سریع و قابل‌اعتماد نیاز دارید، در عوض یک جعبه سیاه بزرگ به جای معماری این فریم ورک خواهید یافت. این چارچوب‌ها کار های زیادی برای شما انجام می‌دهند، از بین بردن مزایا و معایب ساختار معماری نیز از ویژگی های این فریم ورک می باشد. ساختار سخت فریم ورک های Angular ،VueJS ، Ember نیز اشتباهات بیشتری نسبت چهارچوب React دارد.
- jQuery / lodash / یا similar : زمانی که شما به یک صفحه وب با سرعت بالا نیاز دارید، این چهارچوب ها گزینه خوبی برای شما می باشند، شما همچنین می‌توانید چند کیلوبایت به آن ها اضافه کنید. فریم ورک های نام برده، می‌توانند به طور قابل‌توجهی زمان توسعه را کاهش دهند، اما به مراقبت نیاز دارند، زیرا به شما این امکان را می‌دهند که کد های غیر قابل نگهداری را بنویسید، از این فریم ورک ها بهعنوان کمکی استفاده کنید، نه به عنوان پایه پروژه های جاوا اسکریپت!
- Vanilla / فاقد چهارچوب: هم برای برنامه های وب، و هم برنامه های تلفن همراه، شما می‌توانید زمان زیادی را صرف توسعه و برنامه‌ریزی کنید. جاوا اسکریپت خام، یک انتخاب خوب است هنگامی که، پروژه شما می خواهد چیز جدیدی را معرفی کند. انیمیشن های مرورگر یا بهینه سازی عمیق می تواند نمونه های آن باشد. شما به خلق کردن نوعی چارچوب خود پایان خواهید داد.
با لیست ارائه شده از چهار چوب های جاوا اسکریپت، تنها مانند یک پیشنهاد رفتار کنید، زمان بگذارید و تصمیم بگیرید، کدام چهار چوب می تواند بهترین اثر را برای پروژه شما خلق کند.
انجام دادن تست تا مرحله نهایی
آزمایش واحدها،و بخش های مختلف کدهای خود را فراموش نکنید، تا آخرین مرحله این تست ها را انجام دهید و از سالم بودن آن ها، اطمینان حاصل کنید. مگر این که فقط یک نمونه اولیه وجود داشته باشد، که به زودی بازنویسی خواهد شد. با افزایش پیچیدگی، حفظ و کنترل کد های شما سخت‌تر خواهد شد، تست این کار را برای شما انجام خواهد داد. ممکن است شما در آینده، با یک مشکل فنی در کد های خود، مواجه شوید،در آن زمان از خود برای انجام تست‌ها تشکر می کنید، همان گونه که شما هرگز درک نمی‌کردید، پس از آن که شما ویژگی های جدیدی به برند خود را اضافه کردید، چقدر نام تجاری شما دچار تحول شد.
کنترل نسخه در پروژه های جاوا اسکریپت
مهم نیست پروژه جاوا اسکریپت شما از چه نوعی باشد، ممکن است یک نمونه اولیه باشد، مقیاس کاملی از برنامه وب تجاری باشد، یا یک پروژه فرعی کوچک، از همان لحظه که اولین خط کد را یادداشت می‌کنید، از گیت یا هر کنترل نسخه دیگری استفاده کنید. گیت یک نرم افزار کنترل نسخه است، که به شما اجازه می دهد نسخه های مختلفی از پروژه خود را داشته باشید، این نرم افزار همچنین گزارشی از تغییرات به وجود آمده روی پروژه را به شما ارائه می دهد.
کنترل نسخه به شما این امکان را می‌دهد، که از طریق زمان سفر کنید، از عناصر شکسته محافظت کنید، و تغییرات معرفی شده در گذشته را ببینید. اگر چیزی وجود دارد که شما لازم باشد از این مقاله بیاموزید، اصول اولیه کنترل نسخه، و استفاده از آن به صورت روزانه است. چرا ؟ چون حتی اگر بقیه نسخه ها را نادیده بگیرید، و به طور تصادفی در راه اشتباه کنید، با نسخه کنترلی که می‌توانید آن را اصلاح کنید، بدون استفاده از گیت، شما معمولا محکوم به شروع کار هستید.
مدیریت موقعیت در پروژه های جاوا اسکریپت
به عنوان توسعه دهندگان فرونت اند، ما معمولا با دو چالش مهم مواجه می‌شویم، نمایش و ذخیره داده ها! بعد از گذشت زمان، نگهداری داده ها ممکن است انجام نشود، چون آن قدر راحت است که آن را نادیده می گیریم، این جریان تا جایی پیش می رود که، پروژه شما چند ماه بعد تبدیل به یک پروژه غیر قابل نگهداری می شود. مدیریت موقعیت در پروژه های جاوا اسکریپت، دشوار است. زیرا برنامه‌های ما باید معمولا با آن چه مشتری بر روی صفحه نمایش می‌بیند، و آن چه سرور در پایگاه‌های داده ذخیره کرده‌است، هماهنگ باشند. هدف ما افزودن هیچ پیچیدگی بیشتر در ساختار جاوا اسکریپت نیست. مولفه‌ها باید همان مجموعه داده را تحویل دهند، که با تغییرات به وجود آمده توسط کاربر، هماهنگ باشد، و نسبت به هر گونه تغییر در سرور واکنش نشان دهد. چگونه می‌توانیم این مسائل را حل کنیم؟ در پاراگراف های زیر راه حل هایی برای هر نوع چهارچوبی که نا برده شد، آورده شده است:
- React: از آن جایی که یک محیط باز برای این چهار چوب وجود دارد، راه حل های زیادی برای آن وجود دارد. Redux و Mobx دو کتابخانه ای هستند که می توانند با React مورد استفاده قرار بگیرند. redux این امکان را به شما می دهد، که برنامه هایی که می نویسید بر روی محیط های مختلف مثل سرور و کلاینت، قابل تست باشد، MobX یک کتابخانه مستقل است، اما بیشتر مردم آن را با React استفاده می کنند، هر کدام از این دو کتابخانه مزایا و معایب خود را دارند، قبل از استفاده از آن ها، اصول آن ها را درک کنید.
- Angular ,Ember ,and VueJS: با توجه به مدیریت موقعیت خود که در آن قرار دارید، از آن ها استفاده می‌شود. در حالی که نیازی به استفاده از کتابخانه های اضافی نیست، ngRx , Akita and Vuex می تواند همراه با آن ها استفاده شود.
- برای هر چارچوب دیگری در جاوا اسکریپت، شما می توانید از کتابخانه های Redux , Mobx یا هر راه حل مدیریتی دیگری، بنا به موقعیت خود استفاده کنید. هدف اصلی این است که، اطمینان حاصل شود کل نرم افزار همان منبع حقیقت است، و ناهماهنگی در آن وجود نداشته باشد. این منبع می‌تواند یک سرویس، یک کتابخانه یا یک موقعیت ساده قابل مشاهده باشد.
نکات پایانی
اگر تمایل دارید برای شرکت خود اقدام به طراحی سایت کنید پیشنهاد می کنم ابتدا مقالات مربوط به تفاوت طراحی سایت فروشگاهی و طراحی سایت شرکتی را مطالعه کنید. همچنین صفحه خدمات طراحی سایت نیکداد را برای این کار نگاه کنید. شرکت نیکداد بهترین و با کیفیت ترین خدمات طراحی سایت را در قالب طراحی سایت ارزان و مقرون به صرفه به شما ارائه می کند.
همچنین سئو سایت برای موتورهای جست و جو و تبلیغات گوگل از جمله مهمترین روش ها برای بیشتر دیده شدن سایت شما به حساب می آید. شرکت نیکداد خدمات طراحی سایت تهران ،تبلیغات گوگل و سئوسایت را با مناسب ترین قیمت به شما ارائه می دهد.
