Как можно применять proxy в Frontend?

Использование Proxy в Frontend разработке

JavaScript Proxy — это встроенный объект, который позволяет перехватывать и переопределять операции над объектами. На фронтенде это полезно для валидации, логирования, реактивности и отслеживания изменений.

Что такое Proxy

Proxy создаёт переченку для другого объекта, позволяя перехватывать операции доступа и изменения:

const target = { name: 'John', age: 30 }

const proxy = new Proxy(target, {
  get(target, prop) {
    console.log(`Доступ к свойству: ${prop}`)
    return target[prop]
  },
  set(target, prop, value) {
    console.log(`Установка ${prop} = ${value}`)
    target[prop] = value
    return true
  }
})

proxy.name
proxy.age = 31

Способ 1: Валидация данных через Proxy

Можно использовать Proxy для валидации при установке свойств:

const userProxy = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && !Number.isInteger(value)) {
      throw new TypeError('Age должен быть числом')
    }
    
    if (prop === 'email' && !value.includes('@')) {
      throw new TypeError('Неверный email')
    }
    
    target[prop] = value
    return true
  }
})

userProxy.age = 25
userProxy.email = 'john@example.com'

Способ 2: Логирование доступа к свойствам

Отслеживай доступ к свойствам объекта:

const user = { name: 'John', secret: 'password123' }

const auditProxy = new Proxy(user, {
  get(target, prop) {
    console.log(`[AUDIT] Доступ к ${prop} в ${new Date().toISOString()}`)
    return target[prop]
  }
})

auditProxy.name
auditProxy.secret

Способ 3: Реактивность как в Vue

Можно создать простую систему реактивности:

function reactive(target) {
  return new Proxy(target, {
    get(target, prop) {
      console.log(`Getting ${prop}`)
      return target[prop]
    },
    
    set(target, prop, value) {
      if (target[prop] === value) {
        return true
      }
      
      console.log(`${prop} changed from ${target[prop]} to ${value}`)
      target[prop] = value
      updateUI()
      return true
    }
  })
}

const data = reactive({ count: 0, name: 'John' })
data.count = 1
data.name = 'Jane'

Способ 4: Ленивая инициализация

Инициализируй данные только при первом доступе:

const lazyProxy = new Proxy({}, {
  get(target, prop) {
    if (!(prop in target)) {
      console.log(`Инициализация ${prop}...`)
      
      if (prop === 'heavyData') {
        target[prop] = fetchHeavyData()
      } else {
        target[prop] = computeData(prop)
      }
    }
    
    return target[prop]
  }
})

lazyProxy.heavyData

Способ 5: Приватные свойства

Запрети доступ к определённым свойствам:

const user = {
  name: 'John',
  _password: 'secret123',
  _token: 'abc123'
}

const secureProxy = new Proxy(user, {
  get(target, prop) {
    if (prop.startsWith('_')) {
      throw new Error(`Доступ к ${prop} запрещён`)
    }
    return target[prop]
  },
  
  set(target, prop, value) {
    if (prop.startsWith('_')) {
      throw new Error(`Установка ${prop} запрещена`)
    }
    target[prop] = value
    return true
  }
})

secureProxy.name

Способ 6: Интеграция с REST API

Используй Proxy для автоматизации API запросов:

const apiProxy = new Proxy({}, {
  get(target, resource) {
    return new Proxy({}, {
      get(target, action) {
        return function(id) {
          const url = `/api/${resource}/${id}`
          
          if (action === 'fetch') {
            return fetch(url).then(r => r.json())
          } else if (action === 'delete') {
            return fetch(url, { method: 'DELETE' })
          }
        }
      }
    })
  }
})

apiProxy.users.fetch(1)
apiProxy.posts.delete(5)

Способ 7: Обработка undefined свойств

Верни дефолтное значение для неопределённых свойств:

const defaultValueProxy = new Proxy({}, {
  get(target, prop) {
    return target[prop] ?? 'default value'
  }
})

defaultValueProxy.foo
defaultValueProxy.anything

Способ 8: Отслеживание изменений

Отследи и отправь только изменённые свойства:

let changed = new Set()

const trackedProxy = new Proxy({}, {
  set(target, prop, value) {
    if (target[prop] !== value) {
      changed.add(prop)
    }
    target[prop] = value
    return true
  }
})

trackedProxy.name = 'John'
trackedProxy.age = 25

console.log([...changed])

Ключевые моменты

• Валидация — перехватывай set для проверки данных
• Логирование — отслеживай доступ с помощью get и set
• Реактивность — создавай системы отслеживания изменений
• Ленивая загрузка — инициализируй данные при первом доступе
• Безопасность — запрещай доступ к приватным свойствам
• API интеграция — автоматизируй запросы к серверу
• Отслеживание изменений — выявляй и отправляй только изменённые данные

Proxy — это мощный инструмент для создания более гибких и функциональных приложений на фронтенде.