مصاحبه کاری برنامه نویسان حرفه ای وب بخش یک

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

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

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

یک مساله ساده شما دارید، یک آرایه با چندین آبجکت درون آن قرار دارد، شما می خواهید آنها را به صورت لیستی از المان ها درون HTML نمایش دهید.لازم نیست که بصورت لیست ul li باشد. من می خواهم که لینک های مربوطه را با یک ّID هدف گذاری کنید. خوب به شما چند ثانیه ای وقت می دهم تا ویدیو را نگه داشته و با استفاده از چیزی مثل وب سایت jsbin سعی کنید که این مساله ساده را با راه حل خودتان حل کنید. سپس ما درباره اینکه چگونه مساله را حل کردم صحبت خواهیم کرد. واگر در کدتان از آن نکات استفاده کنید، سوال هایی که درباره کد پرسیده می شوند را به شما بیان می کنم.

بسیارخوب، راه حل بسیار ساده من، اینجاست، و من تنها قسمت HTML را نمایش خواهم داد. من اینجا در واقع لینک هایی از یک ID دارم. شما هم ممکن چیزی مثل این کد را نوشته باشید و من از CSS استفاده نکردم. واقعا هیچ علاقه ای برای استفاده از آن در این پروژه ندارم. در قسمت جاوا اسکریپت یک راه حل بسیار ساده دارم. دقت کنید که خروجی کار اصلا چشم نواز نیست.به استایل کار خیلی توجه ندارم و همانطور که گفتم لازم نیست که خروجی به صورت لیست ul li باشد. من بیشتر به نحوه حل مساله شما تمرکز دارم و اینکه از کدام متد برای حل آن استفاده کرده اید.

اولین چیزی که توجه من را درباره اینکه چگونه این مساله را حل کردم جلب می کند، استفاده از Query Selector است، این یک روش مشخص برای انتخاب المان ها از DOM است که کمی مدرن تر است و من ترجیح می دهم که این را ببینم به جای استفاده از Get Element By ID که کمی روش قدیمی تری است. من می پرسم که چرا سلکتور Query Selector را برای انتخاب المنت از DOM استفاده کرده اید و یا چرا از Get Element By Id را استفاده کردید.

منظورم این نیست که می خواهم بکوبم، اما میخواهم برنامه نویس ها فرق بین query Selector و Get Element By Id را بدانند و شاید درباره Query Selector All که به شما یک کامپوننت از نوع لیست می دهد،‌به جای یک المان منحصر بفرد مثل این یکی. پس این اولین چیزی خواهد بود که من بدان توجه خواهم کرد. چطور آنها از درون یک document انتخاب را انجام دادند؟ و سپس به طور مشخص می خواهم به اینکه از چه نوع تکرار کننده یا چرخه ( iterator) برای حل مساله استفاده کرده است.

حال، این می تواند خیلی پیچیده شود و شما می توانید با استفاده از چرخه تکرار for یا foreach استفاده کنید. یا شاید چیزی مانند Map که به وضوح چیزهای زیادی درباره شما بیان خواهد کرد. نه تنها درباره برنامه نویس بلکه بیشتر درباره شرکت که میخواهد مساله را به این روش حل کنید بیان خواهد کرد. خوب اگر شما برای ForEach چیز خاصی می بینید من می توانم بگویم که می توانستم از for لوپ هم استفاده کنم، اما واقعا از ForEach خوشم می آید، بخاطر اینکه روش بسیار ساده ای برای پیمایش درون المان ها دارد.

همینطور می خواهم توجه کنید که من از روش arrow function استفاده نمی کنم. بعضی ها ممکن است که بپرسند چرا تو از آن برای حل مساله استفاده نکردی. دفاعیه من برای این مساله این است که کدی که می نویسم می خواهم برای من واضح باشد. پس ترجیح می دهم از function یا call-back اینجا استفاده کنم. arrow function کمی خواندن کد را سخت تر می کند. اما من می فهمم که چطور کدی مثل این را تبدیل به arrow function کنم، کاری که انجام باید بدهید این است که کلمه function را حذف کنید و حالا که یک آیتم برای پاس کردن داریم شما میتوانید پارانتز ها را هم حذف کنید، اینطوری شما می توانید از arrow function استفاده کنید.

من واقعا arrow function را دوست ندارم. کار مفیدی انجام نمی دهد و در این مورد خاص فکر می کنم از همان ساختار نوشتاری call-back استفاده خواهم کرد که کاملا قابل قبول است. اگر فکر می کردم که من قصد استفاده مجدد از آن را خواهم داشت. شاید چیزی شبیه به کپسول سازی در کد خود را با جدا کردن فانکشن به نمایش در می آوردم. اما در این مساله خاص من تنها درون یک سری از المان ها میخواهم بچرخم و سپس المان های درون dom را با آنچه اینجا پیدا کرده ام، جایگذاری می کنم. بنابراین این یک نمونه نیست که من نیاز داشته باشم که یک تابع خاص برای آن بسازم بخاطر همین من از call-back استفاده می کنم. این چیزنی نیست که بخواهم دوباره و دوباره آنرا انجام دهم و تنها یک نمونه خاص از تغییر دادن المان های یک dom است. یا ممکن است یک فانکشن برای مدیریت هریک از نمونه ها بسازم.

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

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

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

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

مطلب بالا ترجمه transcript مربوط به درس زیر است.

https://www.lynda.com/Web-Development-tutorials/Create-list-URLs-from-links/580663/740645-4.html