How do you use a constructor to create instances?

بسیاری از الگوهایی که توسعه دهندگان در جاوا اسکریپت به کار می‌برند را مشخص می‌کند، و یکی ازرایج‌ترین

الگوی سازنده است.

این به شما این امکان را می‌دهد که از قدرت جاوا برای ایجاد نمونه‌های قدرتمند استفاده کنید، و برایبسیاری از الگوهای دیگر اساسی است.

حال، یکی از چیزهایی که جاوا اسکریپت را واقعا خاص می‌سازد این است که فقط در مورد همه چیز یک شی است، که یک datatype است که بسیار انعطاف‌پذیر است زیرا می‌تواند انواع دیگر داده از جمله اشیا دیگر را نگه دارد.

یک شی از قدرت بسته شدن برای ایجاد مولفه‌های قابل‌استفاده مجدد استفاده می‌کند که محیطی را به یاد می‌آورند که در آن ایجاد شده‌اند.

ایجاد یک سازنده بسیار آسان است و آن‌ها شبیه توابعی هستند که نقش‌های دیگری در آن‌ها دارند؛ بلکه به این دلیل که بخشی از یک شی هستند، این ها می‌توانند کارهایی را انجام دهند که روش‌های Constructors نامیده می‌شوند.

، چون می‌خواهم به شما نشان بدهم که چگونه می‌توانید نمونه‌ها را برای هر کدام از این منوهای مختلف ایجاد کنید. بنابراین، اگر نگاهی به پرونده index.html بیاندازیم، این خیلی شبیه چیزی است که ما در ان قسمت انجام دادیم، به جز اینکه این دکمه اضافه را در اینجا اضافه کردیم و من این دکمه Font رادرست برای این که منوی کوچک همبرگر را در اینجا به دست آورم وارد می‌کنم.

و من این غذا را در اینجا یک ID از top Menu (top Menu)در اینجا داده بودم. و در اینجا یک نفر دیگر را هم در اینجا می‌گذارد که دارای این ID است. من همچنین گروهی از همه منوی غذا را به یک کلاس از navitems دادم تا بتوانم با CSS آن را هدف قرار دهم. من در CSS هم همین جا ونیز خود دکمه همبرگر اضافه کرده‌ام. من کلاس‌های ویژه‌ای دارم که هر زمان که در این حالت کوچک نیستیم،برای پنهان کردن این دکمه به کار می برم.

اگر این کار را گسترده‌ تر کنم، خواهید دید که این دکمه ناپدید می‌شود. معمولا پنهان است. و زمانی که به یک سایز کوچک‌تر میرسد، این دکمه را نشان می‌دهد. هرگاه از ۶۰۰ پیکسل عبور کنیم، این دکمه را نشان نمی‌دهد، صرف‌نظر از این که آیا بر روی متد کلیک کرده یا نه، ما قادر به کلیک روی آن نخواهیم بود اگر وسیع‌تر باشد. ما همه این کارها را کرده‌ایم و تنها کاری که باید بکنیم این است که سناریو را بسازیم. وما قصد داریم از این الگوی سازنده استفاده کنیم.

و کاری که من انجام می‌دهم این است که یک عملکرد را در اینجا ایجاد کنم، و من می‌خواهم آن را همبرگرصدا کنم. من به این دلیل از طریق کنوانسیون سرمایه گذاری می‌کنم ،که هر وقت از یک شی یا یک روش سازنده استفاده می‌کنیم، قصد آن را دارید که از آن استفاده کنیم مجبور نیستید، اما این همان کاری است که همه انجام می‌دهند. و پس از آن، ما می‌خواهیم یک node Name از این عنصر را در صفحه وارد کنیم که می‌خواهیم با این تابع فعال کنیم. در اینجا ما می‌خواهیم یک متغیر ایجاد کنیم که به یک نود اشاره دارد؛ من آن را my Node می‌نامم.

و من از document.querySelector استفاده خواهم کرد. و من می‌خواهم ان را هدف قرار دهم، و هم چنین به دنبال یک مورد با کلاس همبرگر در اینجا بگردم. اگر نگاهی به فایل index.html بیندازیم، شما می‌دانیدکه این دکمه‌ها کلاس همبرگر دارند تا ما بتوانیم آن‌ها را هدف قرار دهیم، و این همان کاری است که ما در اینجا انجام می‌دهیم. پس بریم که شروع به ساخت constructor ‌کنیم. ما قصد داریم هر بار که این تابع خوانده می‌شود و چیزی که می‌خواهیم به آن بازگردیم یک شی است، و این شی یک سری خصوصیات خواهد داشت که می‌خواهیم در یک شی جاوا اسکریپت قرار دهیم.

بنابراین ما قصد داریم اینجا دو عمل انجام دهیم؛ یکی از آن‌ها فعال کردن است، و این کار در حال راه‌اندازی menus hamburger است و آن‌ها را قابل جمع شدن می‌سازد. بنابراین، این یک تابع anonymousخواهد بود که به معنای یک تابع است. زمانی که یک تابع ایجاد می‌کنید که چیزی مانند این را بر می‌گرداند، واین عنصر در اینجا تابع دیگری است، ما این را یک روش می‌نامیم. چون ما قادر به تماس با همبرگر هستیم وسپس از یکی از این subfunctions استفاده می‌کنیم. توجه داشته باشید که این یک بسته بودن نیز هست زیرا این روش فعال کردن، یا عملکرد، قادر به استفاده از این متغیر خواهد بود.

بنابراین، جلوتر می‌رویم و اینجا کار من را انجام می‌دهد می‌خواهیم my Node را هدف قرار دهیم زیرا ازاین متغیر برای من موجود است. پس ما به addEventListener خواهیم گفت. و سپس ما می‌خواهیم یک رویداد کلیک را اضافه کنیم، و عملکرد دیگری را در اینجا انجام دهیم، و این کار، هر زمان که رویدادی را انجام دهیم، یک شی رویدادی را که ما در این متغیر الکترونیکی قرار می‌دهیم، باز می‌گرداند.

اگر دوباره بهHTML نگاه کنیم، خود دکمه را داریم و سپس ما ان را در همان سطح داریم. پس ما می‌خواهیم به نوعی به آن برسیم. از آنجایی که آن و دکمه در همان سطح هستند، کاری که من می‌خواهم انجام بدهم، هدف اصلی این دکمه است، زیرا این چیزی است که من در گره خود دارم، و این به شما اجازه می‌دهد که به این هدف برسید.

و بعد، از اینجا، من می‌توانم پایین بروم و این عنصر navbar  را که تمام این موارد منو را در اختیار دارد هدف قرار دهم. بنابراین، روشی که ما آن را انجام می‌دهیم. ما به my Node  می‌گوییم و بعد به آن می‌رویم، و بعد به querySelector می‌رویم، و می‌خواهیم این مورد را با طبقه‌ای از navbar هدف قرار دهیم. و ما از روش classList برای جلو رفتن و تعویض یک کلاس که می خواهیم پنهان شود، استفاده کنیم.

اگر از CSS به یاد بیاوریم، یک کلاس به نام پنهان داریم.

هنگامی که ما با یک اندازه کوچک هستیم، این کلاس با استفاده از نمایش - هیچ پارامتر در اینجا، این عنصررا پنهان خواهد کرد. درست است، جلوتر می رویم و برخی نظرات را در اینجا اضافه می‌کنند. این فعال می‌شود. این یک بیانیه بازگشت است. و بعد، این تبدیل به همبرگر می‌شود. حالا که ما این را داریم، کاریکه ما می‌توانیم انجام دهیم، ایجاد یک متغیر است. و من می‌خواهم این متغیر topMenu را هدف قرار داده یا صدا کنم چون قرار است منو را صدر قرار دهد.

و من می‌خواهم بگویم که این متغیر جدید کپی جدیدی از همبرگر می‌شود. همبرگر روشی است که ما ایجادکردیم و ما انتظار داریم که آن را به عنوان یک عنصر هدف قرار دهیم. پس ما می‌خواهیم ان را در اینجاهدف قرار دهیم. و این به ما این منوی همبرگر را در اینجا خواهد داد. و بعد، کاری که ما می‌توانیم انجام دهیم این است که وقتی آن شی را داریم، می‌توانیم به topMenu می‌گوییم و روش فعال کردن ما برای آنtopMenu را فراخوانی کنیم. بریم جلو ‌روند ذخیره می‌شود. به نظر می‌رسد که هنوز کارمان تمام نشده،و می‌توانم ببینم که اشتباه کوچکی در اینجا مرتکب شده‌ام.

این nodeName باید در واقع در اینجا سرمایه‌گذاری شود. ما باید ثابت‌قدم باشیم. سعی می‌کنم از camelcase استفاده کنم، که به نوعی با کلمات متفاوت است کلمه اول با حروف بزرگ صحبت می‌شود.گاهی آشفته شدن آسان است. هم چنین این کلاس همبرگر در اینجا که من به دنبال آن هستم یک کودک در است، بنابراین من باید در آنجا فضایی داشته باشم. و، به جلو می‌روم و این را ذخیره می‌کننم، و این موضوع را بررسی می‌کنند. و به نظر می‌رسد که کار می‌کند.

بنابراین، چون ما تنها منوی همبرگر را هدف قرار می‌دهیم که در اینجا مورد استفاده قرار می‌گیرد، متوجه خواهید شد که یکی در پایین اصلا کار نمی‌کند. پس اگر ما می‌خواستیم آن را هم فعال کنیم، ما هم می‌توانیم همین کار را انجام دهیم، فقط به bottom Menu می‌گوییم. پس، bottom Menu. و هنگامی که این اتفاق می‌افتد، این یکی قابل جمع شدن خواهد بود. پس این خیلی جالب است زیرا ما می‌توانیم sort را بسازیم که به ما اجازه می‌دهد تا عناصر مختلف را هدف قرار دهیم، و هر عنصر محیط خودش را دارد.

علاوه بر استفاده از این روش فعال برای انجام کاری مانند راه‌اندازی منوی خود، می‌توانیم روش دیگری را ایجاد کنیم که کار دیگری را انجام دهد. جلوتر می‌رویم و یکی دیگر را به اینجا اضافه می‌کنیم، درست بعد از این روش فعال کردن. چون این یک هدف است، باید یک کاما اضافه کنیم. و، من فقط می‌خواهم همه اینها را کپی کنم، و مطمئن شوم که من از آن ویرگول در این ثانیه استفاده نمی‌کنم. آخرین عنصر در یک شی نباید آن کاما داشته باشد. این را باید پنهان کرد.

و من می‌خواهم نام این روش را حالا تغییر دهم. این یک تابع است. و در این مورد، من نیازی به اضافه کردن یک شنونده رویداد به این موضوع ندارم، بنابراین می‌توانم بخشی از رویداد را حذف کنم. و این تقریبا همان چیز خواهد بود. به دنبال عنصر والد بگردیم و سپس از ان که می‌خواهم در اینجا انجام دهید استفاده کنید و اگر این کار وجود نداشته باشد، کلاس پنهان را اضافه کنید. حالا من دو روش دارم، و یکی از آن‌ها به مااجازه می‌دهد تا یک آلمان را پنهان کنیم، و دیگری به ما اجازه خواهد داد تا عنصر را تغییر دهیم.

جلو می‌رویم و مطمئن می‌شویم که پایین یکی هست. به طور پیش‌فرض، این برنامه توددر تو نشان می‌دهد. و این یکی در حال حاضر نشان می‌دهد، اما شاید ما این یکی را در پایین می‌خواهیم که از بین برود. حالا دو روش متفاوت دارم. بنابراین می‌توانم بگویم که اینجا، و از روش مخفی من استفاده کنید تا قسمت زیرین آن به طور پیش‌فرض پنهان شود. به پایین توجه داشته باشید، پایینی نشانداده نمی‌شود؛ اگر به بالا نگاه کنم، شما می‌توانید قسمت بالای آن را ببینید؛ و اگر روی این کلیک کنم،خواهید دید که آن ظاهر خواهد شد و ناپدید خواهد شد.

اینها قابل پیکربندی هستند. نکته جالب در مورد این سازندگان متفاوت این است که، به دلیل بسته شدن،هر یک از این نمونه‌ها محیط خودش است، بنابراین ما می‌توانیم آن‌ها را به طور متفاوت کنترل کنیم، به دلیل این که چگونه بسته شدن امکان دسترسی به متغیرهای محلی اشیا مختلف را به شما می‌دهد. در حال حاضر یک لینک خوب روی ترفند CSS داشته باشید که در آن می‌توانید اطلاعات بیشتری در مورد سازندگان و همچنین برخی از دوره‌های مرتبط را که ممکن است بخواهید در نظر بگیرید، بدست آورید. اگر ایده‌هایی برای این مجموعه هفتگی دارید، یا شاید بخواهید مقداری از سوالاتی که از شما پرسیده شده یا در مصاحبه پرسیده شده، با من در LinkedIn یا درست در مورد هر شبکه اجتماعی - رسانه‌ای، مانند تویی‌تر یا GitHub،در سیاره وب ارتباط برقرار کنید.