Alpine.js Nedir ve Nasıl Kullanırsınız?

Web geliştirme dünyası kaotiktir; çerçeveler aniden ortaya çıkar ve yok olur ve hem yeni hem de deneyimli geliştiriciler için her şey bunaltıcı olabilir.

Çoğu web geliştirme çerçevesinin aksine, Alpine.js mümkün olduğu kadar basit, ancak tepkisellik ve yan etkiler gibi kavramlarla başa çıkacak kadar güçlü olmayı amaçlar.

Alpine.js'ye Başlarken

Alpine.js'yi yüklemek oldukça basittir. Yalnızca aşağıdakileri eklemeniz gerekir senaryo HTML'nizdeki etiket:

<senaryoertelemekkaynak=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">senaryo>

Alternatif olarak, Alpine.js'yi Düğüm Paket Yöneticisi'ni kullanarak projenize yükleyebilirsiniz:

npm alpinejs'i kurun

Alpine.js'de tepkisellik

Oluşturduğunuz bir index.htm dosyasını açın ve aşağıdaki standart kodu ekleyin:

html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8">
<metahttp eşdeğeri="X-UA Uyumlu"içerik="IE=kenar">





instagram viewer


<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0">
<başlık>Alpine.jsbaşlık>
KAFA>
<vücut>
<senaryoertelemekkaynak=" https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js">senaryo>
vücut>
html>

bu ertelemek öznitelik senaryo etiketi, tarayıcıya komut dosyasını yalnızca belgeyi ayrıştırmayı bitirdikten sonra çalıştırmasını söyler.

Alpine.js, aşağıdakiler gibi çeşitli yönergeler sağlar: x-veri veri depolamak için kullandığı ve x-metin ayarlamak için kullandığı iç metin ekli bileşenin. Bu yönergeleri kullanmak için HTML'nize aşağıdaki kodu ekleyin.

<divx-veri="{name:'David Uzondu', kuruluş:'Kullanın'}">
 Benim ismim <güçlüx-metin="isim">güçlü>
 Ve <Benx-metin="organizasyon">Ben> harika
div>

x-data yönergesi, anahtarlarla birlikte bir nesne depolar isim Ve organizasyon. Daha sonra bu anahtarları x-text direktifine iletebilirsiniz. Kodu çalıştırdığınızda, Alpine.js değerleri dolduracaktır:

Alpine.js React ile Nasıl Karşılaştırılır?

Alpine.js, onu küçük projeler ve prototipler geliştirmeye uygun hale getiren hafif bir çerçevedir.

React gibi daha büyük çerçevelerde, gibi kancalar useEffect() bileşen yaşam döngüsündeki yan etkilerin üstesinden gelmek için. Bu kanca, bağımlılık dizisinin öğelerinden biri değiştiğinde bir geri arama işlevi çalıştırır:

içe aktarmak {useEffect} itibaren"Tepki";
işlevBileşenim() {
 useEffect(() => {
/* Geri çağırma işlevi buraya gelir */
 }, [ /* Bağımlılık dizisi isteğe bağlıdır */ ]);
}

Alpine.js'deki yan etkileri işlemek için x etkisi direktif. Örneğin, bir değişkeni izlemek ve her değiştiğinde değeri günlüğe kaydetmek istediğinizi varsayalım:

<divx-veri="{1 numara}"x etkisi="console.log (sayı)">
<h1x-metin="sayı">h1>
<düğme @tıklamak="sayı = sayı + 1">yeni numara ekledüğme>
div>

Fark edebileceğiniz ilk şey, bir bağımlılık belirtmeniz gerekmediğidir. Alpine, iletilen tüm değişkenlerdeki değişiklikleri dinleyecektir. x etkisi. bu @tıklamak yönerge sayı değişkenini 1 artırır.

Alpine.js'de Koşullu İşleme

Öğeleri koşullu olarak oluşturma React gibi çerçevelerde yapabileceğiniz bir şeydir. Alpine.js, öğeleri koşullu olarak oluşturmanıza da olanak tanır. sağlar x-eğer direktif ve özel şablon öğeleri koşullu olarak işlemek için kullanabileceğiniz öğe.

Başka bir tane yarat index.htm dosyasını açın ve öncekiyle aynı standart kodu ekleyin. Aşağıdaki kodu HTML'nin gövdesine ekleyin.

<divx-veri="{gösterilen: doğru}">
<düğme @tıklamak="gösterildi=!gösterildi"x-metin="gösterildi mi? 'Öğeyi Gizle': 'Öğeyi Göster'">Değiştirdüğme>
<şablonx-eğer="gösterildi">
<div>Hızlı kahverengi tilki köpeğin üzerinden atladı.div>
şablon>
div>

bu x-eğer direktifi gönderilir şablon eleman. Bu, Alpine.js'nin sayfaya eklenen veya sayfadan kaldırılan bir öğeyi takip etmesine izin verdiği için önemlidir. bu şablon element bir kök seviyesinde element içermelidir; aşağıdaki kod bu kuralı ihlal eder:

<şablonx-eğer="gösterildi">
<div>Bu öğe gayet iyi işlenecek.div>
<div>Bu öğe, Alpine.js tarafından göz ardı edilecekdiv>
şablon>

Alpine.js ile Yapılacaklar Uygulaması Oluşturma

Şimdiye kadar öğrendiğiniz her şeyi birleştirmenin ve yerel depolama desteğiyle basit bir yapılacaklar uygulaması oluşturmanın zamanı geldi. İlk olarak, bir klasör oluşturun ve onu bir index.htm dosya ve bir stil.css dosya. Standart kodu index.htm dosyasına ekleyin ve şuna bir başvuru ekleyin: stil.css dosya:

<bağlantırel="stil sayfası"href="stil.css">

Burada CSS için endişelenmeyin, sadece kopyalayın. stil.css bundan dosya projenin GitHub deposu.

Sayfa yeniden yüklendikten sonra verileri sürdürmek için Alpine.js'ye ihtiyacınız var devam etmek Eklenti. Bu eklentinin CDN derlemesini şu şekilde ekleyin: senaryo etiketi, çekirdek Alpine.js CDN yapısının hemen üzerinde:

<senaryoertelemekkaynak=" https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js">senaryo>

İçinde vücut bir tanımla div olan eleman x-veri direktif. Bu yönerge, adlı bir diziyi tutmalıdır. Tüm görevler. Ardından, bir ekleyin h1 "Yapılacak Uygulama" metnini içeren öğe.

<divx-veri="{allTasks:$persist([])}">
<h1>Yapılacak Uygulamah1>
div>

bu $ ısrar eklenti için bir sarmalayıcıdır JavaScript localStorage API. Tarayıcıya diziyi yerel depolamada saklamasını söyler, böylece sayfa yeniden yüklendikten sonra bile veriler bozulmadan kalır. Ekle biçim Birlikte göndermek varsayılan gönderme eylemini de engelleyen yönerge.

<biçim @gönder.önle="
 ($refs.task.value.trim().length && !allTasks.map (x=>x.task).includes($refs.task.value.trim()))
? allTasks = [{task: $refs.task.value.trim(), id: Date.now(), done: false}].concat (allTasks)
: $refs.task.value.trim()'' 
? alert('Giriş değeri boş olamaz')
: alert('Görev zaten eklendi.');
 $refs.task.value=''
">
biçim>

bu $refs yan tümcesi, "görev" ile DOM öğesine erişime izin verir x-ref direktif. Kod ayrıca bazı doğrulama işlemlerini de gerçekleştirir ve listeye boş dizeler veya yinelenen görevler eklememesini sağlar. Formu sonlandırmadan önce bir giriş olan eleman x-ref "görev" ve bir yer tutucu. Ardından bir düğme ekleyin ve türünü "gönder" olarak ayarlayın.

<giriştip="metin"x-ref="görev">
<düğmetip="göndermek">Görev ekledüğme>

Ardından, "items" sınıfıyla bir div tanımlayın. Bu div iki başka div içermelidir: biri x-veri "tamamlanmamış" bir diziye ve diğeri "tamamlanmış" bir diziye ayarlanır. Her iki div de bir x etkisi direktif ve dizi sarılmalıdır $ ısrar madde daha önce gösterildiği gibi.

<divsınıf="öğeler">
<divx-veri="{tamamlanmamış:$persist([])}"x etkisi="tamamlanmadı = allTasks.filter (x=>x.donefalse)">
div>

<divx-veri="{tamamlandı:$persist([])}"x etkisi="tamamlandı=allTasks.filter (y=>y.donetrue).reverse()">
div>
div>

İlk div'de bir ekleyin h3 "Tamamlanmadı" metniyle etiketleyin. Daha sonra her eleman için tamamlanmamış dizi, oluştur div "kontrolleri" ve görevin kendisini elinde tutan.

Kontroller, kullanıcının bir öğeyi silmesine veya tamamlandı olarak işaretlemesine izin verir:

<h3>tamamlanmamışh3>
<şablonx için="öğe tamamlanmadı":anahtar="element.id">
<divx-veri="{showControls: yanlış}" @fareyle üzerine gelindiğinde="showControls = doğru" @fareyle dışarı çıkma="showControls = yanlış"
 sınıf = "görev"
 >
<divsınıf="kontroller">
<divx gösterisi="kontrolleri göster" @tıklamak="element.done=true">[M]div>
<divx gösterisi="kontrolleri göster" @tıklamak="allTasks=allTasks.filter (x=>x.id!==element.id)">[R]div>
div>
<divx-metin="öğe. görev" >div>
div>
şablon>

kullanabilirsiniz x için bir dizi boyunca yineleme yapmak ve öğeleri oluşturmak için yönerge. Benzer v-için Vue'da ve dizi.map() dizi yöntemi React'te. "Kontroller" div'i, "[M]" ve "[R]" dizgisine sahip iki div içerir. Bu dizeler "Tamamlandı olarak işaretle" ve "Kaldır" anlamına gelir. Dilerseniz bunları uygun simgelerle değiştirebilirsiniz.

bu x gösterisi yönerge bir öğe ayarlar görüntülemek CSS özelliği hiçbiri yönergeye işaret eden değer yanlışsa. "items" div'deki ikinci div, birkaç dikkate değer istisna dışında birinciye benzer: h3 metin "Tamamlandı" olarak ayarlandıysa, "kontrol" div'inin ilk çocuğu "[M]" yerine "[U]" metnine sahiptir ve bu div'de @tıklamak direktif, eleman.bitti ayarlandı YANLIŞ.

<divx gösterisi="kontrolleri göster" @tıklamak="element.done=yanlış">[U]div>

İşte bu kadar, Alpine.js'nin temellerini gözden geçirdiniz ve öğrendiklerinizi temel bir yapılacaklar uygulaması oluşturmak için kullandınız.

Alpine.js Kodunu Yazmayı Kolaylaştırma

Alpine.js kodunu yazmaya başladığınızda, kafanızı karıştırmak zor olabilir. Şans eseri, Visual Studio Code gibi kod düzenleyiciler, geliştirmeyi kolaylaştıran çok çeşitli uzantılar sağlar.

Extensions Marketplace'te yönergelerle çalışmayı kolaylaştıran Alpine.js IntelliSense uzantısını edinebilirsiniz. Bu, projelerinizde Alpine.js kullanırken üretkenliğinizi artırmanıza yardımcı olabilir.