Mithril.js Vnodes Nedir?

Bileşenler, kullanıcı arayüzünü ayrıştırarak birbirinden bağımsız ve tekrar kullanılabilen parçalar oluşturmanızı sağlar. Bu sayede her bir parçayı, birbirinden izole bir şekilde düşünerek kodlayabilirsiniz.

Kavramsal olarak bileşenler, JavaScript nesneleri gibidir. Bileşenler, "vnodes" adındaki girdileri opsiyonel olarak alırlar ve ekranda görüntülenecek Mithril.js elementlerini geri döndürürler.

Virtual DOM Nedir?

Sanal bir DOM ağacı, bir DOM ağacını tanımlayan bir JavaScript veri yapısıdır. Vnodes olarak da bilinen iç içe sanal DOM düğümlerinden oluşur.

Sanal bir DOM ağacı ilk kez işlendiğinde, yapısıyla eşleşen bir DOM ağacı oluşturmak için plan olarak kullanılır.

Genellikle, sanal DOM ağaçları daha sonra normal olarak olay işleyicilere veya veri değişikliklerine yanıt olarak ortaya çıkan her oluşturma döngüsünde yeniden oluşturulur. Mithril bir vnode ağacını önceki sürümüne göre farklılaştırır ve yalnızca değişikliklerin olduğu noktalardaki DOM öğelerini değiştirir.

Vnodes'u bu kadar sık ​​yeniden oluşturmak çok zararlı görünebilir, ancak ortaya çıktığı gibi, modern JavaScript motorları bir milisaniyeden daha kısa sürede yüz binlerce nesne oluşturabilir. Öte yandan, DOM’u değiştirmek, vnodes oluşturmaktan daha pahalı birkaç emirdir.

Bu nedenle, Mithril, DOM güncellemelerinin miktarını en aza indirmek için sofistike ve son derece optimize edilmiş bir sanal DOM fark algoritması kullanır. Mithril ayrıca , yerel veri yapılarına yakın erişim performansı için JavaScript motorları tarafından derlenen özenle hazırlanmış vnode veri yapıları oluşturur. Ek olarak, Mithril, vnode'ları oluşturan işlevi de agresif bir şekilde optimize eder.

Mithril'in tüm sanal DOM ağacını her oluşturma işleminde yeniden oluşturan bir oluşturma modelini desteklemek için bu kadar uzun sürmesinin nedeni , kullanıcı arabirimi karmaşıklığını yönetmeyi oldukça kolaylaştıran bir oluşturma stili olan bildirimsel bir acil durum modu API sağlamaktır.

Acil modun neden bu kadar önemli olduğunu göstermek için DOM API ve HTML'yi göz önünde bulundurun. DOM API, zorunlu tutulan mod API'sidir.

• DOM ağacını prosedürel olarak monte etmek için tam talimatlar yazmayı.
• Bu ağacı güncellemek için başka talimatlar yazmayı gerektirir.

DOM API’nin zorunlu niteliği, kodunuzu mikro optimize etmek için birçok fırsata sahip olduğunuz anlamına gelir, ancak aynı zamanda kodun anlaşılmasını zorlaştırmak için daha fazla hata tanıma ve daha fazla şansa sahip olacağınız anlamına gelir.

Buna karşılık, HTML bir anlık mod oluşturma sistemine daha yakındır. HTML ile, bir DOM ağacını çok daha doğal ve okunaklı bir şekilde yazabilir, bir çocuğu bir ebeveyne eklemeyi unutmadan, aşırı derin ağaçlar oluştururken yığın taşmalarına girmekten vb. Endişelenmeden yazabilirsiniz.

Sanal DOM , kullanıcı arabirimini rastgele veri değişiklikleriyle verimli bir şekilde senkronize etmek için birden çok DOM API çağrısını el ile yazmak zorunda kalmadan dinamik DOM ağaçları yazmanıza izin vererek HTML'den bir adım öteye gider.

Temeller

Sanal DOM düğümleri veya vnodes , DOM öğelerini (veya DOM bölümlerini) temsil eden JavaScript nesneleridir. Mithril'in sanal DOM motoru, bir DOM ağacı üretmek için bir vnode ağacı kullanıyor.

Vnodes, m() hyperscript yardımcı programı aracılığıyla oluşturulur:

m("div", {id: "test"}, "hello")

Bileşenlere attribute gönderme

Bileşenlere m.render() methoduyla attribute gönderebilir.

var root= document.body;

// Bir bieşen oluşturma
var Deneme = {
    view: function(vnode) {
        return m("div", vnode.attrs, ["Hello ", vnode.children])
    }
}

// Bileşene attribute gönderme
m.render(root, m(Deneme, {style: "color:blue;"}, "world"));

// html çıktı:
// <div style="color:red;">Hello world</div>

ÇIKTI:

Bileşenlere Veri Aktarma

Bileşenlere dışarıdan veri gönderilebilir. Bir attrs nesneyi, hyperscript işlevinde ikinci parametre olarak geçirerek veri, bileşenlere gönderilebilir:

m(Example, {name: "Ahmet"})

Bu verilere, bileşenin görünümünde veya yaşam döngüsü yöntemlerinde şu yollarla erişilebilir vnode.attrs:

var Example = {
    view: function (vnode) {
        return m("h1", "Hello, " + vnode.attrs.name)
    }
}

m.render(document.body,m(Example, {name: "Ahmet"}));

Bileşenlerden Kompozisyon Oluşturulması

Bileşenler, çıktılarında diğer bileşenleri gösterebilir. Bu sayede soyutlanan bir bileşen, herhangi bir ayrıntı düzeyinde tekrar kullanılabilir. Butonlar, formlar, diyaloglar, ekranlar ve daha nicesi Mithril.js uygulamalarında yaygın bir şekilde bileşen olarak ifade edilebilirler.

var root = document.body;

var Hello= {
   view: function(vnode) {
    
  return m('h1', 'Merhaba ' + vnode.children);

 }
}

var App ={
 view: function() {
 
  return [  
  m(Hello,"Ahmet"),
  m(Hello,"Mehmet"),
  m(Hello,"Serdar")
  ]  
 }
}

m.mount(root,App);

ÇIKTI: