turuncukafalikiz
New member
ES6 başlangıç bloklarındayken, ES7 için daha fazla katkı yolda. Bunlardan biri de sözde Dekoratörler tarafından yakın zamanda yayınlanan tekliftir. Yehuda Katz.
Dekoratörler, Java gibi dillerden veya o zamandan beri kullanımdan kaldırılan AtScript’ten bilinenler gibi ek açıklamalarla kabaca karşılaştırılabilir. Aşağıdaki makale bunların nasıl kullanılabileceğini göstermektedir. Bununla birlikte, her şeyden önce, dekoratörlerin şu anda yalnızca Babel derleyici ile çalıştığı söylenmelidir; bunun için, neyse ki, ES6 ve ES7’nin çeşitli özelliklerini herhangi bir kurulum çabası veya yapılandırması olmadan hızlı ve kolay bir şekilde test etmek için çevrimiçi bir seçenek vardır.
dekoratör prensibi
Dekoratörlerin ilkesi nispeten basit bir şekilde özetlenebilir: Ek açıklama sözdizimine benzer şekilde, dekoratörler bir sınıfın belirli yöntemlerini veya sınıfın kendisini işaretlemek için kullanılır. Sınıf daha sonra başlatılırsa, uygun şekilde ayarlanmış dekoratör önceden çağrılır. Bu, nihayetinde üç parametreli basit bir işlevdir: yöntemin tanımlandığı nesne (hedef), yöntem adı (Soyadı) ve özellik tanımlayıcısı (tanımlayıcı), çeşitli özellik niteliklerini içeren nesnedir.
Aşağıdaki listede basit bir örnek gösterilmektedir. Yukarıda dekoratörün tanımını görüyorsunuz, dediğim gibi, üç parametreli basit bir fonksiyon. yöntem hesaplaTopla() Hesap Makinesi sınıfı bu nedenle yaklaşık @dekoratörFonksiyonu bu işlevi sağlayan ödüllü dekoratör DekoratörFonksiyonu() sınıfı başlatmadan önce hesap makinesi kendisi çağrılır.
function decoratorFunction(target, name, descriptor) {
console.log(target); // im Beispiel: Calculator {}
console.log(name); // im Beispiel: calculateSum
console.log(descriptor); // im Beispiel: Object {value: function,
enumerable: false, configurable: true, writable: true}
}
class Calculator {
@decoratorFunction
calculateSum(x, y) {
return x + y;
}
}
var calcuator = new Calculator();
var result = calcuator.calculateSum(5,5);
console.log(result);
İsteğe bağlı olarak, bir dekoratör işlevi, bir özellik tanımlayıcısı döndürebilir. Örneğin, aşağıdaki örnek, bir yöntemin kullanılarak yeniden tanımlanmasını önleyen bir dekoratör işlevini gösterir. yazılabilirözellik tanımlayıcı özellik YANLIŞ ayarlandı.
function readonly(target, name, descriptor) {
descriptor.writable = false;
}
class User {
constructor(name, password) {
this.name = name;
this.password = password;
}
@readonly
toString() {
return '[Nutzername: ' + this.name + ']';
}
}
var user = new User('Max Mustermann', 'geheimesPasswort');
console.log(user.toString());
// Fehler: 'Uncaught TypeError: Cannot assign to read only property
// 'toString' of [object Object]'
User.prototype.toString = function() {
return '[Nutzername: ' + this.name + ', Passwort: ' + this.password + ']';
}
Bir sınıfta bir dekoratör işlevi kullanırsanız, yalnızca işlevin içindeki hedef nesneye erişebilirsiniz, bu durumda bu nesne karşılık gelen yapıcıdır:
@component
class User { }
function component(target, name, descriptor) {
console.log(target); // im Beispiel: function User() {...}
console.log(name); // undefined
console.log(descriptor); // undefined
target.isComponent = true;
}
console.log(User.isComponent); // true
Çözüm
Dekoratörler, kaynak kodun yeniden kullanılabilirliğini artırır ve ek bilgiler içeren sınıflar ve yöntemler sağlamanın ve özellik tanımlayıcısını etkilemenin kolay bir yolunu sunar. Bir GitHub web sitesi, not alma gibi daha karmaşık kavramların dekoratörlerle de uygulanabileceğini gösteriyor. Her durumda, konunun nasıl geliştiğini ve ES7’de yerini bulup bulmadığını görmek ilginç olacaktır.
()
Haberin Sonu
Dekoratörler, Java gibi dillerden veya o zamandan beri kullanımdan kaldırılan AtScript’ten bilinenler gibi ek açıklamalarla kabaca karşılaştırılabilir. Aşağıdaki makale bunların nasıl kullanılabileceğini göstermektedir. Bununla birlikte, her şeyden önce, dekoratörlerin şu anda yalnızca Babel derleyici ile çalıştığı söylenmelidir; bunun için, neyse ki, ES6 ve ES7’nin çeşitli özelliklerini herhangi bir kurulum çabası veya yapılandırması olmadan hızlı ve kolay bir şekilde test etmek için çevrimiçi bir seçenek vardır.
dekoratör prensibi
Dekoratörlerin ilkesi nispeten basit bir şekilde özetlenebilir: Ek açıklama sözdizimine benzer şekilde, dekoratörler bir sınıfın belirli yöntemlerini veya sınıfın kendisini işaretlemek için kullanılır. Sınıf daha sonra başlatılırsa, uygun şekilde ayarlanmış dekoratör önceden çağrılır. Bu, nihayetinde üç parametreli basit bir işlevdir: yöntemin tanımlandığı nesne (hedef), yöntem adı (Soyadı) ve özellik tanımlayıcısı (tanımlayıcı), çeşitli özellik niteliklerini içeren nesnedir.
Aşağıdaki listede basit bir örnek gösterilmektedir. Yukarıda dekoratörün tanımını görüyorsunuz, dediğim gibi, üç parametreli basit bir fonksiyon. yöntem hesaplaTopla() Hesap Makinesi sınıfı bu nedenle yaklaşık @dekoratörFonksiyonu bu işlevi sağlayan ödüllü dekoratör DekoratörFonksiyonu() sınıfı başlatmadan önce hesap makinesi kendisi çağrılır.
function decoratorFunction(target, name, descriptor) {
console.log(target); // im Beispiel: Calculator {}
console.log(name); // im Beispiel: calculateSum
console.log(descriptor); // im Beispiel: Object {value: function,
enumerable: false, configurable: true, writable: true}
}
class Calculator {
@decoratorFunction
calculateSum(x, y) {
return x + y;
}
}
var calcuator = new Calculator();
var result = calcuator.calculateSum(5,5);
console.log(result);
İsteğe bağlı olarak, bir dekoratör işlevi, bir özellik tanımlayıcısı döndürebilir. Örneğin, aşağıdaki örnek, bir yöntemin kullanılarak yeniden tanımlanmasını önleyen bir dekoratör işlevini gösterir. yazılabilirözellik tanımlayıcı özellik YANLIŞ ayarlandı.
function readonly(target, name, descriptor) {
descriptor.writable = false;
}
class User {
constructor(name, password) {
this.name = name;
this.password = password;
}
@readonly
toString() {
return '[Nutzername: ' + this.name + ']';
}
}
var user = new User('Max Mustermann', 'geheimesPasswort');
console.log(user.toString());
// Fehler: 'Uncaught TypeError: Cannot assign to read only property
// 'toString' of [object Object]'
User.prototype.toString = function() {
return '[Nutzername: ' + this.name + ', Passwort: ' + this.password + ']';
}
Bir sınıfta bir dekoratör işlevi kullanırsanız, yalnızca işlevin içindeki hedef nesneye erişebilirsiniz, bu durumda bu nesne karşılık gelen yapıcıdır:
@component
class User { }
function component(target, name, descriptor) {
console.log(target); // im Beispiel: function User() {...}
console.log(name); // undefined
console.log(descriptor); // undefined
target.isComponent = true;
}
console.log(User.isComponent); // true
Çözüm
Dekoratörler, kaynak kodun yeniden kullanılabilirliğini artırır ve ek bilgiler içeren sınıflar ve yöntemler sağlamanın ve özellik tanımlayıcısını etkilemenin kolay bir yolunu sunar. Bir GitHub web sitesi, not alma gibi daha karmaşık kavramların dekoratörlerle de uygulanabileceğini gösteriyor. Her durumda, konunun nasıl geliştiğini ve ES7’de yerini bulup bulmadığını görmek ilginç olacaktır.
()
Haberin Sonu