Для чего нужны директивы?

Для чего нужны директивы

Краткий ответ: Директивы - это специальные инструкции или маркеры в коде, которые задают поведение, конфигурацию или дают указания компилятору/интерпретатору. В веб-разработке они используются в HTML, JavaScript и фреймворках для управления поведением элементов и логики.

Основные типы директив в веб-разработке

1. HTML Директивы (Meta Tags и специальные атрибуты)

<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'unsafe-inline'">

<!-- Метаданные для браузера -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- X-UA-Compatible для совместимости с IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- OpenGraph для социальных сетей -->
<meta property="og:title" content="My App">
<meta property="og:image" content="/image.jpg">

2. JavaScript Директивы (Compiler/Interpreter Hints)

// 'use strict' - включает строгий режим JavaScript
'use strict'

function strictFunction() {
  // Запрещены:
  // - undeclared variables
  // - octal syntax
  // - delete plain variables
  x = 3.14  // ERROR: x is not declared
}

// Переменные должны быть объявлены
let x = 3.14 // OK

// Triple-slash directives (TypeScript)
/// <reference path="path/to/module.ts" />
/// <reference types="node" />

// Импортирует типы Node.js для автодополнения
import * as fs from 'fs'

3. Vue.js Директивы (самые популярные в фреймворках)

<!-- v-if - условное отображение -->
<p v-if="isVisible">Видна только если isVisible = true</p>

<!-- v-for - циклы -->
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

<!-- v-on или @ - обработчики событий -->
<button v-on:click="handleClick" @click="count++">
  Click me
</button>

<!-- v-bind или : - привязка свойств -->
<img v-bind:src="imageSrc" :alt="description">

<!-- v-model - двусторонняя привязка -->
<input v-model="message" />

<!-- v-show - показать/скрыть через display:none -->
<div v-show="isVisible">Видна всегда, но может быть скрыта</div>

<!-- v-class - условные классы -->
<div v-bind:class="{ active: isActive, 'text-danger': hasError }">
  Content
</div>

<!-- v-slot - именованные слоты для компонентов -->
<template v-slot:header>
  <h1>Header</h1>
</template>

React эквиваленты (более явный подход)

// React НЕ использует директивы, всё через JavaScript

// v-if -> условный рендеринг
{isVisible && <p>Видна</p>}

// v-for -> map()
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

// v-on -> обработчик события
<button onClick={handleClick}>Click</button>

// v-bind -> JSX выражения
<img src={imageSrc} alt={description} />

// v-model -> управляемые компоненты
<input value={message} onChange={e => setMessage(e.target.value)} />

// v-show -> условное display
<div style={{ display: isVisible ? 'block' : 'none' }}>
  Content
</div>

4. Angular Директивы

// Встроенные структурные директивы
<ng-container *ngIf="isVisible">
  <p>Видна</p>
</ng-container>

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

// Атрибутные директивы
<div [ngClass]="{ active: isActive }">Content</div>
<div [ngStyle]="{ color: isActive ? 'red' : 'blue' }">Content</div>

// Кастомная директива
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow'
  }
}

<p appHighlight>Выделенный текст</p>

5. Directive-style разработка в React с Custom Hooks

// Кастомный хук - как директива для React
function useClickOutside(ref, callback) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        callback()
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [ref, callback])
}

// Использование
function Modal() {
  const ref = useRef()
  const [isOpen, setIsOpen] = useState(true)
  
  useClickOutside(ref, () => setIsOpen(false))
  
  return isOpen ? <div ref={ref}>Modal Content</div> : null
}

Практические примеры использования директив

Пример 1: Vue.js форма

<template>
  <form @submit.prevent="submitForm">
    <input 
      v-model="formData.name"
      @blur="validateName"
      placeholder="Имя"
    />
    
    <p v-if="errors.name" class="error">{{ errors.name }}</p>
    
    <select v-model="formData.category">
      <option v-for="cat in categories" :key="cat.id" :value="cat.id">
        {{ cat.name }}
      </option>
    </select>
    
    <button :disabled="!isFormValid">
      Отправить
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: { name: '', category: null },
      errors: {},
      categories: []
    }
  },
  methods: {
    submitForm() { /* ... */ },
    validateName() { /* ... */ }
  },
  computed: {
    isFormValid() {
      return this.formData.name && this.formData.category
    }
  }
}
</script>

Пример 2: Кастомная директива Vue

// Директива для автофокуса элемента
const vFocus = {
  mounted(el) {
    el.focus()
  }
}

// Использование
export default {
  directives: { focus: vFocus }
}

<template>
  <input v-focus type="text" />
  <!-- Инпут автоматически получит фокус при монтировании -->
</template>

Пример 3: Условный рендеринг с v-if vs v-show

<template>
  <!-- v-if - полностью удаляет из DOM -->
  <div v-if="isModalOpen">
    <h2>Modal</h2>
    <!-- Содержимое удалено из DOM, когда isModalOpen=false -->
  </div>

  <!-- v-show - только скрывает через CSS -->
  <div v-show="isDropdownOpen">
    <p>Dropdown content</p>
    <!-- Элемент всегда в DOM, но display:none когда закрыто -->
  </div>
</template>

<script>
// Разница в производительности:
// v-if лучше для редко переключаемых элементов (модальные окна)
// v-show лучше для часто переключаемых элементов (выпадающие меню)
</script>

Директивы для производительности

// Lazy loading изображений (встроенная директива браузера)
<img loading="lazy" src="/image.jpg" alt="Lazy loaded" />

// Debounce в Vue
<input 
  v-model.lazy="searchQuery"
  @input="searchQuery = $event.target.value"
/>

Почему директивы полезны

1. Читаемость - явное декларативное описание поведения
2. Краткость - меньше кода по сравнению с явными инструкциями
3. Переиспользование - можно создавать кастомные директивы
4. Производительность - фреймворк оптимизирует директивы
5. Мейнтейнабильность - код понятнее разработчикам

Когда использовать явный код вместо директив

// Сложная логика - лучше явно
if (condition1 && condition2 || condition3) {
  // много логики
}

// Вместо пытаться упихать в директиву
<div v-if="complexCondition">
  <!-- сложное выражение в шаблоне - плохая читаемость -->
</div>

// Правильно - вынести в вычисляемое свойство
computed: {
  shouldRender() {
    return condition1 && condition2 || condition3
  }
}

<div v-if="shouldRender">
  <!-- более читаемо -->
</div>

Вывод

Директивы - это мощный инструмент для:

• Декларативного программирования - описываем ЧТО нужно сделать, а не КАК
• Сокращения кода - особенно в Vue.js
• Читаемости - шаблоны становятся более понятными
• Производительности - фреймворк может оптимизировать директивы

Во Vue.js директивы (v-if, v-for, v-model, и т.д.) - это основной способ взаимодействия с шаблонами. В React подобное достигается через JavaScript (условные операторы, map(), хуки). Кастомные директивы/хуки - отличный способ расширять функциональность и повторно использовать логику.