Ne öğreneceğiz

Bir Moon.js projesini nasıl iskele edeceğinizi, Moon.js'de temel bir proje, Görünümler, Veriler, girdi ve çıktı olaylarının nasıl kurulacağını öğreneceğiz, temel olarak yeni framework'e başlamak için ihtiyacınız olan her şeyi öğreneceğiz.

Moon.js, hızlı ve işlevsel kullanıcı arayüzü oluşturmak için minimalist bir JavaScript kitaplığıdır. Uygulamalara küçük bir ayak izi ve son derece hızlı performans sağlayan nispeten küçük bir dosya boyutuna sahiptir.

Moon.js, bileşen odaklı tasarım yaklaşımını bünyesinde barındırır ve bileşenleri oluşturmak için şablonları kullanır. Vue'ye oldukça benzer.

Moon.js kullanmanın avantajları

  • Moon.js, React, Angular vb. Büyük adamlardan daha küçük bir dosya boyutuna (2 kb küçültülmüş + gzip) sahiptir.
  • Moon.js son derece hızlı bir görünüm oluşturma performansına sahiptir.
  • Moon.js tamamen işlevseldir ve sürücü tabanlı bir tasarıma sahiptir.

İpucu: Yeniden kullanılabilir bileşenlerinizi Bit ( Github ) kullanarak projeler arasında paylaşın. Bit, herhangi bir projeden bağımsız bileşenleri paylaşmayı, belgelemeyi ve düzenlemeyi kolaylaştırır.

Kodun yeniden kullanımını en üst düzeye çıkarmak, bağımsız bileşenler üzerinde işbirliği yapmak ve ölçeklenen uygulamalar oluşturmak için bunu kullanın.

Bit; Node, TypeScript, React, Vue, Angular ve daha fazlasını destekler.

Kurulum

Moon, doğrudan tarayıcıdan veya NPM aracılığıyla kullanılabilir.

NPM

NPM aracılığıyla Moon'u kullanmak için, biz onun CLI aracı kuracaktır: moon-cli.

$ npm i moon-cli -g

moon-cli, sistemimize global olarak kurulur ve herhangi bir dizinden kullanılabilir.

Bir moon projesi oluşturmak için aşağıdaki komutu çalıştırıyoruz:

$ moon create moon-prj

Bu, moon-prj klasörde bir Moon projesi oluşturacaktır .

Bununla, bir sonraki milyar kullanıcı uygulamanızı Moonjs ile oluşturmaya hazırsınız.

Tarayıcı

Moon'u tarayıcımıza komut dosyası etiketine de yerleştirebiliriz. Moon'un moon-browsertarayıcıdan moon görünümü dilini kullanmamızı sağlayan bir modülü var.

Moon tarayıcı kullanımını etkinleştirmek için HTML’imize iki betik etiketi eklemeliyiz.

<script src = "https://unpkg.com/moon"> </script> 
<script src = "https://unpkg.com/moon-browser"> </script>

Komut dosyaları, Unskg CDN'sinden alınmıştır. İlk komut dosyası etiketi Moon ana kütüphanesini içe aktarır ve ikinci komut dosyası Moon Browser kütüphanesini içe aktarır, tarayıcı için Moon görünümü sözdizimi derleyicisidir, tarayıcıda Ay görünümleri yazmamızı sağlayan şeydir.

Şimdi, tarayıcıda Moon görünümü dilini yazarken, kesinlikle script etiketini kullanmalı ve script'i type"text / moon" olarak eklemeliyiz .

<!-- As an external script -->
<script src="./main-script.js" type="text/moon"></script>
<!-- As an inline script -->
<script type="text/moon">
    ...
</script>

Uygulama

Tıpkı diğer SPA'lar gibi, bir Moon uygulaması da tek bir öğeye monte edilir. Genellikle div elementi kullanırız.

<div id = "root"> </div>

Tüm Moon uygulaması div # kök öğesine yerleştirilecek / monte edilecektir. Bu div # öğesi, uygulamanın varsayılan / indeks HTML sayfası olacak bir index.html'ye yerleştirilir.

Bir Moon uygulamasını div # köküne monte etmek için görünüm sürücüsünü kullanıyoruz (endişelenmeyin, sürücüler hakkında daha fazla bilgi alacağız)

Moon.use ({ 
    view: Moon.view.driver ("#root") 
})

Bu, Moon'a uygulamamızı div # kök düğümüne bağlamasını söyler. Kök düğüme başvurmak için DOM API'lerini kullanabiliriz.

Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})

Aşağıdaki bölümlerde verileri işleme ve Moon.js'de görünümlerin nasıl monte edileceğini öğreneceğiz.

Moon View

Bu, Moon'da görünümler oluşturmak / oluşturmak için kullanılan JSX gibi bir DSL dilidir.

<script type="text/moon">
    function aView(data) {
        return (
            <div>Moon'dan Dünya'ya Merhaba!</div>
        )
    }
</script>

Görmek? HTML benzeri bir sözdizimi yapısına sahiptir. JavaScript'e benzer Ay Görünümü Dilidir. Bu böyle çalıştırılmaz, Moon derleyicisi onu çalıştırmadan önce JavaScript'e derler.