درود دوستان. توی قسمت هفتم از مجموعه پست‌های سوالات مصاحبه فرانت‌اند می‌خوایم سوالات زیر رو بررسی کنیم:

۶۱. المنت Template توی HTML برای چه کاری هست؟
۶۲. منظور از HOF توی جاوااسکریپت چیه و چه مزایایی داره؟
۶۳. URL و URI چه فرقی با هم دارن؟
۶۴. توی CSS چه زمانی Grid رو به Flexbox ترجیح بدیم؟
۶۵. از TDZ توی جاوااسکریپت چی می‌دونید؟
۶۶. چرا پیشنهاد میشه از حلقهٔ for...in جاوااسکریپت استفاده نکنیم؟
۶۷. چه زمانی از تگ section توی HTML استفاده نکنیم؟
۶۸. از Web Components چی می‌دونید؟
۶۹. توی CSS منظور از Specificity چیه و چه قوانینی داره؟
۷۰. چه زمانی از اتریبیوت‌های defer و async روی تگ script استفاده کنیم؟
 

مثل قسمت‌های قبل، می‌خوایم یادی کنیم از عزیز. امیدوارم روحش شاد و در آرامش باشه ✨💚

 

۶۱. المنت Template توی HTML برای چه کاری هست؟

<template> یک المنت خاص توی HTML برای نگهداری محتوایی هست که در حالت عادی و خودکار توسط مرورگر در زمان لود شدن صفحه رندر نمیشه و می‌تونه بعداً توسط جاوااسکریپت استفاده و رندر بشه. به بیان ساده‌تر، <template> مثل یک محفظه برای نگهداری یک محتوای HTML ـی هست که بعداً می‌تونه به صورت داینامیک توسط جاوااسکریپت به صفحه اضافه بشه:

<body>

  <template id="list-item-template">
    <li>
      <h2 class="title"></h2>
      <p class="description"></p>
    </li>
  </template>

  <ul></ul>

  <script>
    const template = document.querySelector('#list-item-template');
    const list = document.querySelector('ul');

    const item = template.content.cloneNode(true);
    item.querySelector('.title').innerText = "Hello world";

    list.appendChild(item);
  </script>
</body>

 

 

۶۲. منظور از HOF توی جاوااسکریپت چیه و چه مزایایی داره؟

HOF مخفف Higher-Order Function هست و به تابعی گفته میشه که می‌تونه یک تابع دیگه رو به عنوان ورودی بپذیره یا یک تابع رو به عنوان خروجی return کنه. در واقع HOF یک قابلیت مهم توی برنامه‌نویسی فانکشنال به حساب میاد. این قابلیت اجازه میده که با توابع مثل بقیه نوع‌های داده‌ای مثل رشته و آبجکت به عنوان First-class citizens رفتار کنیم و بتونیم اونها رو به متغیرها نسبت بدیم و یا به عنوان ورودی/خروجی توابع از اونها استفاده کنیم:

function higherOrderFunction(callback) {
  callback();
}

higherOrderFunction(
  () => alert("Hello World")
);

higherOrderFunction(
  () => console.log("Hello World")
);

از مزایای این قابلیت اینه که باعث میشه اجزای برنامهٔ ما Encapsulation و انعطاف‌پذیری بیشتری داشته باشن.

 

۶۳. URL و URI چه فرقی با هم دارن؟

URI یک مفهوم کلی‌تر نسبت به URL هست. به عبارت دیگه URL نوعی URI به حساب میاد. ولی نه بلعکس.

URI

این واژه مخفف Uniform Resource Identifier هست و هدف اون ارائه دادن یک راه جامع و پایدار برای دسترسی به ریسورس‌هاست. یک ریسورس می‌تونه هر چیزی مثل یک کتاب و یک وسیلهٔ فیزیکی، آدرس یک صفحهٔ وب و فایل و عکس و ویدئو باشه. برای مثال، آدرس زیر یک URI برای دسترسی به یک عکس روی یک کامپیوتر شخصی هست:

file:///C:/Users/YourUsername/Pictures/example.jpg

URI زیرمجموعه‌هایی مثل URL و URN داره که URL معروف‌ترین نوع URI هست.

 

URL

این واژه مخفف Uniform Resource Locator و نوعی URI هست که به طور اختصاصی برای آدرس‌دهی ریسورس‌ها (صفحات، فایل‌ها، تصاویر و ...) روی بستر اینترنت به کار میره. برای مثال آدرس‌های زیر همگی URL هستن:

https://www.example.com
https://www.example.com/index.html
https://www.example.com/search?q=apple&type=fruits

ftp://username:password@ftp.example.com/path/to/file

 

۶۴. توی CSS چه زمانی Grid رو به Flexbox ترجیح بدیم؟

هر دو ویژگی برای ساختن Layout ها توی صفحه استفاده میشن. اما Flexbox بیشتر برای Layout های ساده و یک‌بعدی استفاده میشه. در حالی که کاربرد Grid بیشتر برای ساختن Layout های پیچیده‌تر و دو بعدی هست. عکس زیر به خوبی کاربرد این دو ویژگی رو نشون میده:

 

 

۶۵. از TDZ توی جاوااسکریپت چی می‌دونید؟

TDZ مخفف Temporal Dead Zone هست و زمانی به دنیای جاوااسکریپت پا گذاشت که let و const معرفی شدن. TDZ به قسمتی از کد گفته میشه که یک متغیر به دلیل اینکه هنوز پیاده‌سازی نشده قابل استفاده نیست.

همونطور که می‌دونیم متغیرهایی با let و const ساخته میشن، قبل از پیاده‌سازی قابل استفاده نیستن:

// ReferenceError: can't access lexical declaration 'x' before initialization
alert(x);

let x = 10;

با اجرا شدن کد بالا خطا می‌گیریم که متغیر x با اینکه تعریف شده، نمی‌تونه استفاده بشه. بنابراین توی خط ۲ متغیر x توی TDZ قرار داره.

 

۶۶. چرا پیشنهاد میشه از حلقهٔ for...in جاوااسکریپت استفاده نکنیم؟

با استفاده از حلقه for...in می‌تونیم روی پراپرتی‌های یک آبجکت پیمایش انجام بدیم و به اونها دسترسی داشته باشیم. اگه با پروتوتایپ‌ها آشنایی دارید، باید بدونیم که این حلقه، پیمایش رو روی پراپرتی‌های پروتوتایپ‌ها هم انجام میده. برای مثال وقتی چنین کدی داشته باشیم:

const obj1 = { a: 1 };
const obj2 = { b: 1 };

Object.setPrototypeOf(obj1, obj2);

for (const key in obj1) {
  alert(key); // a, b
}

توی این کد obj2 رو به عنوان پروتوتایپ obj1 قرار دادیم و دیدیم که وقتی برای obj1 از حلقه for...in استفاده کردیم، تونستیم به پراپرتی‌های آبجکت obj2 هم دسترسی داشته باشیم. این یعنی پیمایش‌های ناخواسته و اضافی. پس باید بدونیم که ممکنه بهینگی و سرعت برنامه به این دلیل پایین بیاد. در کل پیشنهاد میشه جز برای تست و دیباگ برنامه از حلقه for...in استفاده نکینم. بجای اون بهتره از حلقه for...of استفاده کنیم.

 

۶۷. چه زمانی از تگ section توی HTML استفاده نکنیم؟

اگه توی صفحه المنت‌هایی مرتبط به هم داریم و قصد داریم اونها رو گروه‌بندی کنیم، از تگ <section> استفاده می‌کنیم. شاید این کار رو قبلاً با تگ <div> انجام می‌دادیم. اما <section> بر خلاف <div>، یک تگ Semantic هست و هدف اون ارائه دادن روشی معنادار برای گروه‌بندی کردن المنت‌هایی هست که از لحاظ محتوا و معنا به هم مرتبط هستن. پس اگه المنت‌هایی داریم که هیچ ارتباطی به هم ندارن و از لحاظ معنایی مفهوم خاصی رو منتقل نمی‌کنن، باید <div> رو به <section> ترجیح بدیم. به طور کلی نباید از <section> استفاده کنیم اگر:

  • اگه قصد گروه‌بندی المنت‌هایی داریم که هیچ ارتباطی به هم ندارن. مثلاً دو تصویر غیر مرتبط
  • اگه نمی‌تونیم برای <section> از المنت‌های Heading مثل h2 استفاده کنیم. چون طبق استانداردها، هر <section> باید توسط یک المنت Heading توصیف بشه
  • اگه از المنت مرتبط‌تری بجای <section> می‌تونیم استفاده کنیم. مثلاً از <footer> برای گروه‌بندی عناصر فوتر و <article> برای محتوای یک مقاله

 

۶۸. از Web Components چی می‌دونید؟

اگه از فریم‌ورک‌هایی مثل ری‌اکت و ویو استفاده کرده باشین، با مفهوم و مزایای کامپوننت‌ها آشنایی دارید. وب کامپوننت‌ها مجموعه‌ای از API های وب هستن که برای ساختن کامپوننت‌هایی اختصاصی، با قابلیت استفاده مجدد (Reusable) و کپسوله‌شده (Encapsulated) بدون نیاز به فریم‌ورک خاصی و با استفاده از HTML و جاوااسکریپت و CSS استفاده میشن.

منظور از Encapuslated بودن اینه که این کامپوننت‌ها خاصیتی دارن که اجازه میدن اجزایی مثل Modal و Dialog بسازیم به‌طوری که بقیه المنت‌های توی صفحه تحت تاثیر استایل‌ها و جاوااسکریپتی که توی اون استفاده شده قرار نگیرین که این قابلیت با استفاده از یک ویژگی به اسم Shadow DOM قابل انجام هست.

Shadow DOM در واقع یک نوع DOM با ویژگی‌های اختصاصی هست که محتوای اون مثل HTML و جاوااسکریپت‌ها و استایل‌ها ایزوله هستن و نمی‌تونن روی DOM اصلی تاثیر بذارن.

همونطور که گفتیم، یک وب کامپوننت رو می‌تونیم بدون نیاز به ابزار یا فریم‌ورک خاصی بسازیم. در واقع از همین کامپوننت‌ها می‌تونیم خیلی راحت توی فریم‌ورک‌ها به عنوان یک المنت مستقل استفاده کنیم. کد زیر یک نمونهٔ ساده از یک وب کامپوننت هست:

 

۶۹. توی CSS منظور از Specificity چیه و چه قوانینی داره؟

حتماً دیدین که Rule هایی که توی بعضی از سلکتورها می‌نویسیم، نسبت به بقیه Rule ها قدرت بیشتری دارن و در نتیجه روی المنت اعمال میشن. به این قضیه میگن CSS Specificity. هر چی Specificity یک سلکتور بالاتر باشه، قدرت بیشتری داره تا روی المنت اعمال بشه.

Specificity به مجموعه‌ای از قوانینی گفته میشه که مرورگر با استفاده از اونها می‌تونه تصمیم بگیره برای یک المنت کدوم استایل اولویت بالاتری داره و باید روی اون المنت اعمال بشه. برای مثال اگه چنین استایل‌هایی داریم:

div {
  background: red;
}

div.blue {
  background: blue;
}

مرورگر با استفاده از قوانین Specificity می‌تونه تصمیم بگیره کدوم background برای المنت div توی صفحه باید اعمال بشه. توی CSS هر Selector یک اولویت و به بیان فنی‌تر Specificity مشخصی داره:

۱. استایل‌های Inline (بالاترین اولویت):

<h1 style="color: #fff;">

۲. سلکتور ID

#navbar {
  color: green
}

۳. سلکتورهای class و اتریبیوت و pseudo-class ها

.green {
  color: green;
}

[href] {
  color: yellow;
}

div:hover {
  color: red;
}

۴. المنت‌ها و شبه‌المنت‌ها (پایین‌ترین اولویت)

button {
  color: blue;
}

a::before {
  color: green;
}

حتماً با دستور !important آشنایی دارید. اگه از این دستور برای پراپرتی CSS استفاده کنیم، اون پراپرتی با بالاترین Specificity روی المنت اعمال میشه و Selector دیگه‌ای با هر ارزش Specificity نادیده گرفته میشه.

 

۷۰. چه زمانی از اتریبیوت‌های defer و async روی تگ script استفاده کنیم؟

در حالت عادی اسکریپت‌هایی که به صفحه اضافه می‌کنیم، به قول معروف Render-blocking هستن و مرورگر تا زمانی که اونها رو دانلود نکنه، نمی‌تونه ادامهٔ پردازش صفحه و DOM رو انجام بده. اما راه‌هایی وجود داره که بتونیم از یک اسکریپت توی هر جایی از صفحه استفاده کنیم بدون اینکه نگران بلاک شدن پردازش‌های مرورگر باشیم. اون راه‌ها استفاده از اتریبیوت‌های defer و async هست.

defer به مرورگر میگه منتظر نباش تا من لود بشم. بنابراین پردازش صفحه متوقف نمیشه و مرورگر میره به ادامه پردازش صفحه می‌پردازه. اون اسکریپت توی بک‌گراند لود میشه و به محض اینکه DOM به‌طور کامل ساخته شد اجرا میشه. بنابراین defer باعث وقفه توی کار مرورگر نمیشه.

اسکریپت async هم توی بک‌گراند دانلود و بعد اجرا میشه. پردازش DOM و همچنین بقیه اسکریپت‌ها منتظر این اسکریپت نمی‌مونن و کاملاً مستقل از همدیگه به کارشون می‌پردازن. به بیان ساده‌تر، اسکریپت async به محض اینکه لود شد اجرا میشه؛ بدون توجه به اینکه آیا صفحه به طور کامل لود شده یا نه.

به طور کلی defer و async رو به تگ‌های script ـی اضافه می‌کنیم که قراره یک اسکریپت خارجی رو دانلود و اجرا کنن. این دو اتریبیوت باعث میشن که اسکریپت‌ها به صورت مستقل دانلود بشن تا وقفه‌ای توی پردازش صفحه ایجاد نشه. توی defer یک اسکریپت زمانی اجرا میشه که DOM کاملاً توسط مرورگر پردازش شده باشه. اما async به این توجه نمی‌کنه که آیا DOM لود شده یا نه و یا مرورگر هنوز مشغول پردازش صفحه هست یا نه.

برای آشنایی بیشتر می‌تونید این پست رو ببینید:

 

خب دوستان امیدوارم از نکاتی که توی این قسمت بررسی کردیم هم استفاده کرده باشین. منتظر قسمت آخر باشین. روزتون خوش 😉✌️

https://blog.webdevsimplified.com/2020-06/template-tag/