WiréJS | Değişken değil, kablo kullanın !
Açıklama
WiréS, ReactJS kütüphanesinin useState ve watch kancalarından ilham alınarak browser ortamı için tekrar yazılmış bir kütüphanedir. Verileri getter/setter fonksiyonlarıyla sararak gerçek değişikleri algılayan özelliği sayesinde gereksiz güncellemeleri göz ardı eder.
Veri ilişkilerini önceden belirleyerek değişiklik olduğunda okunacak ve yazılacak verileri koşullara bağlayabilir, okuma ve yazma öncesi ara katmanlar ekleyebilirsiniz
Kullanım örneği
Kablo okuma ve değiştirme
Bir değişkeni get ile okuyabilir, set ile değiştirebilirsiniz. get fonksiyonu veriyi olduğu gibi döner. set fonksiyonuna bir fonksiyon verirseniz hemen çalıştıracak ve return edilen veriyi kabul edecektir
// Yeni kablo oluşturun
let currency = é(+0.00);
// Değerini okuyun
currency.get(); // --> 0
// Değerini değiştirin
currency.set(5);
currency.get(); // --> 5
// Değerini fonksiyon ile değiştirin
currency.set(oldValue => {
// Eski verinin üzerine 20 ekle
return oldValue + 20;
});
currency.get(); // --> 25Değişimler
Bir kablonun değerinin değiştiğini watch özelliğiyle dinleyebilirsiniz veya birden fazla kablonun değişimini aynı anda dinlemek için é.watch fonksiyonunu kullanabilirsiniz
let a = é(0);
let b = é(0);
a.watch(()=>{
// a kablosu değiştiğinde burası çalışacak
})
b.watch(()=>{
// b kablosu değiştiğinde burası çalışacak
})
é.watch(()=>{
// a veya b değiştiğinde burası çalışacak
},[a, b])Örnek
let toplayan = é(0);
let toplanan = é(0);
let sonuc = é(0);
é.watch(()=>{
sonuc.set( toplayan.get() + toplanan.get() )
},[toplayan, toplanan])
toplayan.watch(()=>{
console.log("Toplayan: ",toplayan.get())
})
toplanan.watch(()=>{
console.log("Toplanan: ",toplanan.get())
})
sonuc.watch(()=>{
console.log("Değişen Sonuç: ",sonuc.get())
})
toplayan.set(7);
toplanan.set(2);
console.log("Sonuç",sonuc.get())Konsol çıktısı aşağıdaki gibi olacaktır
Toplayan: 0
Toplanan: 0
Değişen Sonuç: 0
Toplayan: 7
Değişen Sonuç: 7
Toplanan: 2
Değişen Sonuç: 9
Sonuç: 9
Ara katmanlar
Okuma ara katmanı
Bazen orjinal değişkeni değiştirmeden her seferinde daha gelişmiş bir veri tipiyle okumak istersiniz
// Yeni kablo oluşturun
let user = é({
name: "John",
surname: "Wattson"
});
// Normalde okuma katmanı eklemezseniz veri düz bir şekilde verecektir
user.get(); // --> {"name":"John",surname:"Wattson"}
// Verinin nasıl okunacağını belirleyin
user.readLayer((value, update)=>{
// value: orjinal veridir
// değiştirmek istediğinizde update fonksiyonunda verirsiniz
update(
`İsim: ${value.name}, soyisim: ${value.surname}`
)
})
// `get` fonksiyonu veriyi nasıl okuyacağını readLayer fonksiyonunda öğrenecektir
user.get(); // --> "İsim: John, soyisim: Wattson"Yazma ara katmanı
Bazen orjinal değişkeni değiştirmeden her seferinde daha gelişmiş bir veri tipiyle okumak istersiniz
// Yeni kablo oluşturun
let user = é([2,4,6,8,10]);
user.writeLayer((value, update)=>{
// Sadece çift sayıları alıyoruz
update(
value.filter(e => e % 2 == 0)
)
})
user.writeLayer((value, update)=>{
// Verinin sadece ilk 5 öğesini alıyoruz
update(
value.slice(0, 5)
)
})
// Orjinal veri
user.get(); // --> [2,4,6,8,10]
// set fonksiyonumuz gerçek veriyi değiştirmeden önce yukarıdaki iki yazma katmanını çalıştırıyorlar
// set fonksiyonumuz artık sadece ilk 5 çift sayıyı kaydediyor
user.set([10,11,12,13,14,15,16,17,18,19,20,21,22,23])
user.get(); // --> [10,12,14,16,18]Fark bulma algoritması
WiréS eşitlenmek istenen değeri zaten var olan değer ile karşılaştırarak farklı olup olmadığını algılayan özel bir algoritmaya sahiptir. Bu şekilde tekrarlı eşitlemelerde veya bellekte aynı şekilde tutulan veriler için yazma işlemi gerçekleştirmez
Basit değişkenler
let variable = é(0);
variable.set(false); // --> Değişecek
variable.set(7); // --> Değişecek
variable.set(7); // --> Değişmeyecek
variable.set(7 + 0); // --> Değişmeyecek
variable.set(-7); // --> DeğişecekObjeler ve listeler
let variable = é([1,2,3]);
variable.set([1,2,3,4]) // --> Değişecek
variable.set([1,2,3,4]) // --> Değişmeyecek
variable.set([1,0,3,4]) // --> Değişecek
variable.set() // --> Değişecek (undefined olarak)
variable.set(null) // --> Değişmeyecek
let variable = é({
name: null,
surname: "Wattson",
numbers: [1,2,3,4]
});
// İsmini null iken John olarak değiştiği için değişecek
variable.set(oldValue => {
return {
name: "John",
surname: "Wattson",
numbers: [1,2,3,4]
}
})
// isim ve soyisim bir öncekiyle aynı olduğu için hiç bir şey yapılmaz
variable.set({
name: "John",
surname: "Wattson",
numbers: [1,2,3,4]
})
// Ayrıca fark bulmak algoritması sonsuz derinlikte tarama yapıp farkı anlayabilir
variable.set({
name: "John",
surname: "Wattson",
numbers: [1,2,3,4,"Hello !"]
})Sonsuz derinlikteki objeler
Javascriptte bir objenin içindeki bir değer yine kendisini işaret ediyor olabilir, böyle bir durumda objenin içini tarayan algoritma aynı objeyi defalarca taramaması için (Maximum call stack hatası) önlem koyulmuştur
let infinite = {
one: 1,
two: 2,
three: 3,
onetwothree: undefined
};
// Objenin içine yine kendisini yerleştiriyoruz
infinite.onetwothree = infinite;
let variable = é(infinite);
/**
* Aşağıdaki kodda WiréJS neyin değiştiğini anlamak için infinite
* objesinin içine girdiğinde, içine girdiği objeleri bellekte
* tutarak aynı objeyi tekrar taramasını engelleyen yapıya
* sahip olur
**/
// Sonsuz döngüde dönerek [Maximum call stack] hatası vereceğine three değerini başarılı bir şekilde değiştirir
variable.set(oldValue => {
// sadece three değerini 3 ile çarpıyoruz
return {
...oldValue,
three: oldValue.three * 3
}
});