Backbone password validation view

backbone.js

const PasswordView = Backbone.View.extend({
  // Выносим требования в константу для переиспользования
  requirements: [
    { id: 'len8', label: '8+ characters', test: (pwd: string) => pwd.length >= 8 },
    { id: 'len12', label: '12+ characters', test: (pwd: string) => pwd.length >= 12 },
    { id: 'lower', label: 'Lowercase letter', test: (pwd: string) => /[a-z]/.test(pwd) },
    { id: 'upper', label: 'Uppercase letter', test: (pwd: string) => /[A-Z]/.test(pwd) },
    { id: 'digit', label: 'Number', test: (pwd: string) => /\d/.test(pwd) },
    { id: 'special', label: 'Special character', test: (pwd: string) => /[^a-zA-Z0-9]/.test(pwd) }
  ],

  events: {
    'input input': 'updatePassword'
  },

  initialize() {
    // Кэшируем элементы после рендера
    this._requirementElements = null;
  },

  updatePassword(e: Event) {
    const pwd = (e.target as HTMLInputElement).value;
    
    // Обновляем только классы и контент, не пересоздаем DOM
    this.requirements.forEach((req, idx) => {
      const met = req.test(pwd);
      const el = this._requirementElements[idx];
      const icon = el.querySelector('.req-icon');
      const text = el.querySelector('.req-text');
      
      // Batch DOM updates
      icon.className = `req-icon w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold ${
        met ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-400'
      }`;
      icon.textContent = met ? '✓' : '';
      
      text.className = `req-text text-sm ${
        met ? 'text-green-600 font-medium' : 'text-gray-500'
      }`;
    });
  },

  render() {
    // Создаем DOM только один раз
    this.$el.html(`
      <div class="w-80 p-6 bg-white rounded-xl shadow-lg space-y-4">
        <input type="password" placeholder="Enter password"
          class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2">
        <div class="space-y-2" data-requirements>
          ${this.requirements.map(req => `
            <div class="flex items-center gap-2" data-req="${req.id}">
              <div class="req-icon w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold bg-gray-200 text-gray-400"></div>
              <span class="req-text text-sm text-gray-500">${req.label}</span>
            </div>
          `).join('')}
        </div>
      </div>
    `);
    
    // Кэшируем элементы требований для быстрого доступа
    this._requirementElements = this.$('[data-req]').toArray();
    
    return this;
  }
});

$(() => {
  new PasswordView({ el: '#backbone-root' }).render();
});