0Pricing
JavaScript Academy · Ders

Proxy'nin Pratik Kullanım Alanları

Doğrulama, günlük kaydı ve tepkisel nesneler oluşturun.

Proxy'nin Pratik Kullanım Alanları, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Vekiller Uygulamada

Şimdi gerçek sorunları çözmek için vekilleri ve Reflect'i birleştireceksiniz: doğrulama, günlükleme, varsayılan değerler ve daha fazlası. Her örüntü, düz bir nesneyi değiştirmeden sarar.

Doğrulama Sarmalayıcısı

Bir şemayı zorunlu kılın: bir kuralı karşılamayan her yazma işlemini reddedin. Hatalı veriler hiç yerleşmediği için target temiz kalır.

function validated(obj, rules) {
  return new Proxy(obj, {
    set(target, prop, value, receiver) {
      const rule = rules[prop];
      if (rule && !rule(value)) {
        throw new TypeError('invalid value for ' + prop);
      }
      return Reflect.set(target, prop, value, receiver);
    }
  });
}

const user = validated({}, { age: v => v >= 0 });
user.age = 25;
console.log(user.age);
try { user.age = -1; } catch (e) { console.log(e.message); }

Günlükleme Sarmalayıcısı

Hata ayıklama amacıyla her okumayı ve yazmayı, günlükledikten sonra Reflect üzerinden ileterek izleyin.

function logged(obj) {
  return new Proxy(obj, {
    get(t, p, r) { console.log('GET ' + p); return Reflect.get(t, p, r); },
    set(t, p, v, r) { console.log('SET ' + p + '=' + v); return Reflect.set(t, p, v, r); }
  });
}

const data = logged({ count: 0 });
data.count = 5;
console.log(data.count);

Varsayılan Değerler

Eksik her özellik için bir geri dönüş değeri döndürün; böylece okumalar hiçbir zaman undefined üretmez.

function withDefault(obj, fallback) {
  return new Proxy(obj, {
    get(t, p, r) {
      return p in t ? Reflect.get(t, p, r) : fallback;
    }
  });
}

const scores = withDefault({ ada: 90 }, 0);
console.log(scores.ada);
console.log(scores.unknown);

Negatif Dizi İndeksleme

Bir get tuzağında indeksleri dönüştürerek dizilerin Python tarzı negatif indeksleri desteklemesini sağlayın.

function negIndex(arr) {
  return new Proxy(arr, {
    get(t, p, r) {
      const i = Number(p);
      if (Number.isInteger(i) && i < 0) {
        return Reflect.get(t, t.length + i, r);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const list = negIndex(['a', 'b', 'c']);
console.log(list[-1]);
console.log(list[0]);

Salt Okunur Görünüm

Okunabilen ancak hiçbir zaman yazılamayan bir nesne sunun; bu, paylaşılan config'i korumak için kullanışlıdır.

function readonly(obj) {
  return new Proxy(obj, {
    set() { console.log('blocked write'); return false; },
    deleteProperty() { console.log('blocked delete'); return false; }
  });
}

const config = readonly({ apiUrl: '/api' });
config.apiUrl = '/hacked';
console.log(config.apiUrl);

Erişimleri Sayma

Her özelliğin kaç kez okunduğunu, counts değerlerini target'ın dışında saklayarak izleyin.

function counted(obj) {
  const counts = {};
  const proxy = new Proxy(obj, {
    get(t, p, r) {
      counts[p] = (counts[p] || 0) + 1;
      return Reflect.get(t, p, r);
    }
  });
  return { proxy, counts };
}

const { proxy, counts } = counted({ x: 1 });
proxy.x; proxy.x; proxy.x;
console.log(counts.x);

Hesaplanan Sanal Özellikler

Saklanmayan, her okumada yeniden hesaplanan türetilmiş değerleri sunun.

const rect = new Proxy({ width: 4, height: 3 }, {
  get(t, p, r) {
    if (p === 'area') return t.width * t.height;
    return Reflect.get(t, p, r);
  }
});

console.log(rect.area);
rect.width = 10;
console.log(rect.area);

Bilinmeyen Okumalarda Hata Fırlatma

Var olmayan bir özelliği okuyan kod çalıştığında hata fırlatarak yazım hatalarını erkenden yakalayın.

function strict(obj) {
  return new Proxy(obj, {
    get(t, p, r) {
      if (typeof p === 'string' && !(p in t)) {
        throw new ReferenceError('unknown property: ' + p);
      }
      return Reflect.get(t, p, r);
    }
  });
}

const o = strict({ name: 'Ada' });
console.log(o.name);
try { console.log(o.naem); } catch (e) { console.log(e.message); }

Kaygıları Birleştirme

Gerçek sarmalayıcılar çoğu zaman doğrulama ve günlüklemeyi tek bir işleyicide birleştirir; her tuzak işlemi Reflect'e iletir.

const account = new Proxy({ balance: 0 }, {
  set(t, p, v, r) {
    if (p === 'balance' && v < 0) throw new RangeError('no overdraft');
    console.log(p + ' set to ' + v);
    return Reflect.set(t, p, v, r);
  }
});

account.balance = 100;
console.log(account.balance);
try { account.balance = -50; } catch (e) { console.log(e.message); }

Bu Örüntüler Neden Önemli

Vekiller, özgün nesneyi veya onu çağıranları kirletmeden çapraz davranış, doğrulama, günlükleme, varsayılanlar ve erişim denetimi ekler. Tepkisel çerçeveler durum değişikliklerini tam olarak böyle gözlemler. Şeffaf bir araya girme işlemine ihtiyaç duyduğunuzda bunları kullanın.

const observed = new Proxy({ n: 0 }, {
  set(t, p, v, r) {
    const ok = Reflect.set(t, p, v, r);
    console.log(p + ' is now ' + t[p]);
    return ok;
  }
});
observed.n = 1;
observed.n = 2;

Kısa Kontrol

Geçersiz değerleri saklanmadan önce reddetmek için hangi vekil tuzağını kullanırsınız?

Özet: Pratik Vekil Kullanım Alanları

Vekilleri gerçek sorunlara uyguladınız:

  • Doğrulama, set tuzağında hatalı verileri reddeder.
  • Günlükleme, okumaları ve yazmaları Reflect aracılığıyla izler.
  • Varsayılanlar ve sanal özellikler get tuzağında bulunur.
  • Salt okunur görünümler, erişim sayımı ve katı yazım hatası denetimi nesneleri şeffaf biçimde sarar.

Sıkça Sorulan Sorular

“Proxy'nin Pratik Kullanım Alanları” dersi ücretsiz mi?

Evet — “Proxy'nin Pratik Kullanım Alanları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Proxy'nin Pratik Kullanım Alanları” dersinde ne öğreneceğim?

Doğrulama, günlük kaydı ve tepkisel nesneler oluşturun. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Proxy'nin Pratik Kullanım Alanları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Proxy Oluşturma
  2. get ve set Tuzakları
  3. Reflect API'si
  4. Proxy'nin Pratik Kullanım Alanları
← JavaScript Academy Sayfasına Dön