turuncukafalikiz
New member
Günün özellikleri: ES7 Observer
Artık ES6 standardına girmeyen, ancak artık taslak statüsüne sahip olan ve bu nedenle ES7’ye dahil edilmek üzere oldukça iyi konumlandırılmış görünen bir özellik, yöntemdir. nesne.gözlemle().
Bu yöntemin yardımıyla, sözde gözlemcileri ilgili nesnedeki değişiklikler hakkında bilgilendirilmek üzere nesnelere kaydetmek mümkündür. Bu makale nasıl çalıştığını gösterir.
Giriş
yöntem Obect.observe() iki parametre alır: “gözlemlenecek” nesne ve nesnede bir şey değiştiğinde çağrılan bir geri çağırma işlevi (deyim yerindeyse gözlemci bileşeni). Prensip olarak şöyle görünür:
Object.observe(person, function(changes) { /* Zugriff auf die Änderungen */});
Öte yandan, bir ok işlevi kullanıldığında notasyon şu şekildedir:
Object.observe(person, changes => { /* Zugriff auf die Änderungen */});
Veya aşağıdaki örnekte (ve tüm diğerlerinde) gösterildiği gibi işlevi tamamen ezberleyebilirsiniz:
function observer(changes) { /* Zugriff auf die Änderungen */}
Object.observe(person, observer);
Geri arama işlevi içinde, nesnede yapılan değişikliklere erişebilirsiniz (değişiklikler). Bu, her biri bir değişikliği temsil eden bir nesne dizisidir. Sırayla her değişikliğin dört özelliği vardır: Özellik Tür değişikliğin türünü gösterir. Burada bir özelliği güncellemek için “güncelle”, eklemek için “ekle”, silmek için “sil” ve özellik tanımlayıcının özellikleri değiştirilirse “yeniden yapılandırma” ve “uzantıları önleme” arasında bir ayrım yapılır, örn. nesne.freeze(). Özellikler Soyadı Öte yandan, etkilenen özelliğin adını içerir, eskiDeğer eski değerleri e nesneler nihayet gözlemlenen nesne.
Aşağıdaki listeler, neyin öne çıktığını eylemde görmenizi sağlar. Örneğin, bkz. Özellik değerini değiştirme ilk adıbu, yeni bir özellik ekleyerek “güncelleme” türünün değiştirilmesini içerir (Soyadı) “ekle” gibi bir değişikliğe neden olur ve bu böyle devam eder. Bu, toplam altı nesne değişikliğini kaydeder. Not: nesneler-Mülkiyet değiştirmek-object her zaman geçerli nesnenin değerini içerir (karşılık gelen değişiklik sırasındaki değer yerine). Bu nedenle örnekte, nesne her zaman şu değere sahiptir: {ilkAdı: ‘Moritz’}yani tüm değişikliklerden sonraki durum.
'use strict'
let person = {
firstName: 'Max'
};
function observer(changes) {
console.log(changes.length); // Ausgabe: 6 (siehe unten)
changes.forEach(function(change) {
console.log(
change.type, // Typ der Änderung
change.name, // Name der geänderten Eigenschaft
change.oldValue, // Alter Wert
change.object // Objekt
)
});
}
Object.observe(person, observer);
person.firstName = 'Moritz;' // Ausgabe: "update firstName Max {
// firstName: 'Moritz;' }"
person.lastName = 'Patternman'; // Ausgabe: "add lastName undefined {
// firstName: 'Moritz;' }"
person.lastName = 'Mustermann'; // Ausgabe: "update lastName
// Patternman { firstName: 'Moritz;'
// }"
delete person.lastName; // Ausgabe: "delete lastName
// Mustermann { firstName: 'Moritz;'
// }"
Object.freeze(person); // Ausgabe: "reconfigure firstName
// undefined { firstName: 'Moritz;' }
// preventExtensions undefined
// undefined { firstName: 'Moritz;'
// }"
seçici gözlem
Her türlü değişikliği dinlemek istemiyorsanız, gözlemci içinde buna uygun olarak seçici bir özellik uygulayabilirsiniz. Alternatif olarak, yöntem nesne.gözlemle() ancak, tepki vermek istediğiniz değişiklik türlerini (“güncelleme”, “ekleme”, “silme”, ”yeniden yapılandırma” ve “uzantıları önleme”) içeren üçüncü bir parametre olarak bir dizi de iletebilirsiniz. Örneğin, yalnızca “güncelleme” türündeki değişikliklerle ilgileniyorsanız, nesne.gözlemle() aşağıdaki gibi:
'use strict'
let person = {
firstName: 'Max'
};
function observer(changes) {
console.log(changes.length);
changes.forEach(change => {
console.log(
change.type, // Typ der Änderung
change.name, // Name der geänderten Eigenschaft
change.oldValue, // Alter Wert
change.object // Objekt
)
});
}
Object.observe(person, observer, ['update']);
person.firstName = 'Moritz;' // Ausgabe: "update firstName Max {
// firstName: 'Moritz;' }"
person.lastName = 'Patternman'; // Keine Ausgabe
person.lastName = 'Mustermann'; // Ausgabe: "update lastName
// Patternman { firstName: 'Moritz;'
// }"
delete person.lastName; // Keine Ausgabe
Object.freeze(person); // Keine Ausgabe
bakmayı bırak
Yönteme benzer nesne.gözlemle() yöntem nesne.unooobserve() bir gözlemcinin bir nesneden tekrar ayrılabilmesini sağlar. Aşağıdaki kod örneği, nasıl kullanılacağını gösterir. Nesnede yapılan sonraki değişikliklerin artık gözlemci tarafından günlüğe kaydedilmediğini (ve dolayısıyla örnekte konsola geri gönderilmediğini) görebilirsiniz.
'use strict'
let person = {
firstName: 'Max'
};
function observer(changes) {
changes.forEach(function(change) {
console.log(
change.type, // Typ der Änderung
change.name, // Name der geänderten Eigenschaft
change.oldValue, // Alter Wert
change.object // Objekt
)
});
}
Object.observe(person, observer);
person.firstName = 'Moritz;' // Ausgabe: "update firstName Max {
// firstName: 'Moritz;' }"
person.lastName = 'Patternman'; // Ausgabe: "add lastName undefined {
// firstName: 'Moritz;' }"
person.lastName = 'Mustermann'; // Ausgabe: "update lastName
// Patternman { firstName: 'Moritz;'
// }"
delete person.lastName; // Ausgabe: "delete lastName
// Mustermann { firstName: 'Moritz;'
// }"
Object.unobserve(person, observer);
person.firstName = 'Moritz;' // Keine Ausgabe
person.lastName = 'Patternman'; // Keine Ausgabe
person.lastName = 'Mustermann'; // Keine Ausgabe
delete person.lastName; // Keine Ausgabe
tetikleyen olaylar
Yukarıdaki olaylardan herhangi birini kendiniz tetiklemek istiyorsanız, bunu aşağıdaki listedeki kod yardımı ile yapabilirsiniz. Object.getNotifier(nesne).notify() (hangisinde nesneler örnekte gözlemlenecek karşılık gelen nesnedir Bu). Tipik bir kullanım durumu, alıcıyı manuel olarak geçersiz kılmak olacaktır (almak) veya ayarlayıcılar (kurmak). Bu nedenle, varsayılan olarak olayların hiçbiri ortaya çıkmaz ve uygulamanızda ilgili olayı tetiklemek sizin sorumluluğunuzdadır.
'use strict'
let person = {
firstName: 'Max'
};
let _lastName = 4711;
Object.defineProperty(person, 'lastName', {
get: function() {
return _lastName;
},
set: function(lastName) {
Object.getNotifier(this).notify({
type: 'update',
name: 'lastName',
oldValue: _lastName
});
_lastName = lastName;
}
});
function observer(changes) {
changes.forEach(function(change) {
console.log(
change.type, // Typ der Änderung
change.name, // Name der geänderten Eigenschaft
change.oldValue, // Alter Wert
change.object // Objekt
)
});
}
Object.observe(person, observer);
person.lastName = 'Patternman'; // Ausgabe: update lastName 4711 {
// firstName: 'Max' }
person.lastName = 'Mustermann'; // Ausgabe: update lastName Patternman
// { firstName: 'Max' }
dizilere bak
Nesneler için işe yarayan, diziler için de işe yarar. Yöntemler buna göre duruyor dizi.gözlemle() Ve Dizi.unobserve() hazır. Prensip olarak, az önce nesneler için gösterilen şekilde çalışır. Ancak, burada da aşağıdakiler geçerlidir: konuyu değiştir her zaman geçerli diziyi içerir, yani tüm değişiklikler yapıldıktan sonra dizi durumundadır. Dizi her zaman değeri içerdiğinden listede açıkça görebilirsiniz. [ ‘Max’, ‘Moritz’, ‘Peter’ ] vardır.
'use strict'
let names = ['Moritz', 'Max'];
function observer(changes) {
changes.forEach(function(change) {
console.log(
change.type, // Typ der Änderung
change.name, // Name der geänderten Eigenschaft
change.oldValue, // Alter Wert
change.object // Array
)
});
}
Array.observe(names, observer);
names[0] = 'Max'; // Ausgabe: update 0 Moritz [ 'Max', 'Moritz',
// 'Peter' ]
names[1] = 'Moritz'; // Ausgabe: update 1 Max [ 'Max', 'Moritz',
// 'Peter' ]
names.push('Peter'); // splice undefined undefined [ 'Max', 'Moritz',
// 'Peter' ]
Çözüm
nesne.gözlemle() Bahsedildiği gibi, taslak statüsüne sahiptir ve büyük olasılıkla ES7 standardına girecektir. anlık olmak nesne.gözlemle() ve şu anda bu açıdan aktarıcılardan bile üstün olan diğer ilgili Chrome yöntemlerini, Node.js ve io.js’yi uygular: Örneğin, Traceur ve Babel, yeni özelliği henüz uygulamamaktadır. olduğu bir alan nesne.gözlemle() daha büyük bir etkiye sahip olabilecek veri bağlamadır. Bu temelde basitleştirilebilir (anahtar kelime: kirli kontrol). Gelecek gösterecek.
()
Haberin Sonu