Express.js'de Gidonlu şablonlar kullanın

Şablonların kullanımı web uygulamaları dünyasında bir zorunluluk haline geldi, çünkü programlama mantığını sunumundan ayırmamıza yardımcı oluyor. Bütün bu ayrılık ve bu gelişme tarzının kabul edilmesinin yükselişi, çok sayıda çerçeveler şablonları yönetme sorumluluğunu taşımamıza yardımcı olan pazarda.
Bu durumuda ifade etmek, bu, yerel olarak adında bir şablonlama motoruyla birlikte gelir. yeşim taşıBununla birlikte, birçok geliştirici zaten diğerlerinde bir geçmişe sahiptir ve yeni bir motora tekrar uyum sağlamak zorunda kalmaları adil olmaz, bu kötü değil ama herkesin zevkine göre değil.
bu yüzden ifade etmek gibi farklı şablon motorlarıyla çalışabilmemiz için çerçeveyi yapılandırmamıza olanak tanır. gidon hangisinin bir uzantısı bıyık.js ve temel aldığı için çok popüler bir şablonlama motorudur. JavaScript ve hem sunucu tarafında hem de istemcide kullanabiliriz.
GereksinimlerBurada gösterilen bazı örneklere uymak için, yüklememiz ve erişmemiz gerekir. Node.js, ve daha önce yüklemiş ifade etmek. Bir metin editörü ve bir uygulama ifade etmek öğreticide açıklanan kavramları dahil edebilmeleri için arzu edilirler.
Şablon motoru kullanmamanın dezavantajlarıBir şablon motorunun kullanılmaması, uygulama geliştirme hızımızı etkileyebilecek bir dizi dezavantajı beraberinde getirir, bu dezavantajları listeleyeceğiz, böylece şablon motoruna ihtiyacımız olmadığını düşündüğümüzde bunun tersini göreceğiz.
Hatalı HTML oluşturma riski çok daha yüksektir, bu nedenle kodumuz için sertifika almak zor olabilir.
Ortaya çıkan kodun belgelenmesi ve diğer geliştiricilerle paylaşılması zor olabilir.
HTML oluşturmak için kod kullanırsak, özel karakterlerle çalışmak her zaman rahatsız edici olacaktır.
Uygulama mantığını sunumdan ayırmama eğilimi vardır.
Görüldüğü gibi ciddi olmamasına ve uygulamamızın daha verimli olma olasılığını azaltıyorsa çalışmamasına yol açmayan birçok dezavantaj var.
Şablon motoru kullanmanın avantajlarıŞimdi Express ile uygulamalarımızda Gidon gibi çözümleri uygulayarak neler kazanacağımıza bakalım:
Ortaya çıkan kod daha düzenlidir ve hatalı biçimlendirilmiş HTML olmayacağı garanti edilir.
Back-End'de geliştirme yapmaya gerek kalmadan kullanıcı arayüzleri çalıştırarak ekibimizi ikiye ayırabiliriz.
Şablon motorları, kod bölümlerini yeniden kullanmamıza izin vererek projemizi optimize etmeye yardımcı olur.
Uygulamalarımızın görsel kısmıyla daha iyi etkileşim sağlamamıza yardımcı olan birçok yardımcı program vardır.
Şablon motorlarının bize sunduklarını nasıl gördüğümüz, kodumuzu ayırabilmek, optimize edebilmek ve organize edebilmektir, bu doğrudan bir sonuç olarak geliştirme ekibimizdeki etkinlik, verimlilik ve genel üretkenlikteki iyileşmeyi getirir.
Eğitimin başında bundan bahsetmiştik yeşim taşı varsayılan motordu, öyleyse neden başka bir motor arıyoruz? Cevap çok basit, çalışma şekli yeşim taşı miktarını azaltmaya çalışıyor. HTML yazıyoruz, bu biraz kafa karıştırıcı olabilir, çünkü bizim için yeni bir dil biçimini pratik olarak öğrenmemiz gerekiyor. Başlangıç ​​aşaması.
Aşağıdaki resimde bir şablon kodu göreceğiz yeşim taşı böylece sözdiziminin bir örneğini görebiliriz:

Kod ile farkı görebiliriz HTML Standart berbattır ve kod daha az olmasına rağmen, ilgili düşünce miktarı biraz daha fazladır.
gidon bundan farklı bir hikaye yeşim taşı, çalışma şekli aşağıdaki gibi diğer motorlara benzer Jinja2 veya sallamak, etiket yazmamıza izin verdiği için HTML ve sonra kendi motor kodumuzla, bağlamdan ne yazdırdığını ve nasıl yaptığını tanımlayabiliriz.
Örneğin, bir kullanıcının yazdığı bir şeyi yazdıracağımızı biliyorsak, özel karakterlerden otomatik olarak kaçabilir ve böylece kod enjeksiyonunu önleyebiliriz, ancak bunun kendi kodumuz olduğunu bilirsek, o zaman onu ifade edebiliriz. gidon bu metinden kaçmaz.
Sunucu veya İstemciBir başka yönü gidon sunucu tarafında veya istemci tarafında olmak üzere iki şekilde çalışabilmesidir. Bu çok yönlülük, uygulamalarımızı nasıl yürütmek istediğimize daha iyi karar verebileceğimiz anlamına gelir, çünkü SPA o Tek sayfa uygulaması, belki istemci tarafı yaklaşımı daha basit ve daha kullanışlıdır, ancak bir web sitesi istiyorsak belki de her şeyi sunucuda oluşturmak daha kullanışlıdır.
Kurulum için gidon sunucu tarafında çok kolay, sadece kullanmamız gerekiyor npm konsolumuzda ve böylece gerekli paketleri elde edeceğiz, bakalım ne yazmamız gerekiyor:

 npm kurulumu -- ekspres gidonları kaydedin

Bununla npm Bu motoru projemize dahil edebilmemiz için gerekli tüm bileşenleri indirecek, sonunda konsolumuzda aşağıdakine benzer bir sonuç almalıyız:

Daha sonra uygulamamıza başladığımız dosyamızda ifade etmek Bunu şablon motoru olarak kullanmasını söylemeliyiz, bunun için aşağıdaki kodu yazmamız yeterli:

 var gidon = require ('express-gidon') .create ({defaultLayout: 'main'}); app.engine ('gidon', gidon.engine); app.set ('motoru görüntüle', 'gidon');

Dosyamızda kalanlar şunlar olacaktır:

Gidon temel sözdizimigidon Şablona biraz görünüm mantığı eklememize izin veren kendi çok temiz sözdizimine sahiptir, yorumları dahil edebilir, listeler ve bloklar üzerinde yineleyebilir, metin bölümlerinden kaçabilir veya kaçmaabiliriz. Bu yüzden fikirlerimizi daha rahat ifade edebilmemiz ve böylece bundan en iyi şekilde yararlanabilmemiz için en temel olanları bilmek önemlidir, aşağıda motorun en temeline bakalım.
Sonuç olarak, görünümümüz kullanıcıya göstermemiz gereken verileri üretir, bu verileri bağlam aracılığıyla şablonumuza aktarırız ve burada yazdırırız. Bunu yazdırmak için, değişkeni veya öğeyi aşağıdaki gibi çift parantez içine almamız yeterlidir:

 {{İsim}}

Bu, içeriği görmemize yol açar. "İsim" Bizim görüşümüze göre tanımladığımız bu çift kaşlı ayraçlar, geliştiricinin varsayılan olarak izin verilmeyen kodun yazdırılmasına neden olmayacak şekilde otomatik olarak karakterlerden kaçar.
Şimdi, kaçmadan bir metin yazdırmak istiyorsak, üçlü parantez kullanmalıyız, bu şunu söyler: gidon hiçbir şeyin kaçmaması gerektiğini, örneği görelim:

 {{{İsimler}}}

Bu, kodu yazdırmamıza izin veriyorsa HTML, özel karakterler ve hatta JavaScript motorumuzdan müdahale olmadan.
NS yorumlar bölümleri tanımlamamıza, önemli bilgiler eklememize ve uygulamamızı belgelememize izin verdikleri için şablonda çok önemlidir. Direkt yorum yaparsak HTML şeklinde: bu, sayfamızın kodunu inceleyen herkes tarafından görünür hale gelir, bu nedenle belgelenmiş olarak bırakabileceğimiz şeylerde bizi sınırlar.
Ama eğer yorumları kullanırsak gidon, onları her zaman kaynak kodunda görebiliriz, ancak kullanıcının gördüklerini oluştururken motor onu atlar ve ardından web veya uygulamanın kodunu incelediğimizde hiçbir şey görmeyeceğiz. Yorum yazmak için gidon şunları yapmalıyız:

 {{! bizim yorumumuz}}

Bu, yorum içeriğinin hiçbir zaman kullanıcılarımız tarafından görülebilen sonuçta oluşturulmadığı ve yazdıklarımızı geliştirme ekibimizin dışındakiler için bir sır haline getirdiği anlamına gelir.
Unutmamamız gereken bir şey de, kendimizi evrende olanlarla sınırlamak zorunda olmadığımızdır. ana akım, her kişinin gelişim tarzı için daha iyi olabilecek birçok seçenek vardır, bu nedenle araştırma yapmak ve yeni şeyler denemekten korkmamak hayati önem taşır.
Bununla bu öğreticiyi bitirdik, şablon kullanımının ne anlama geldiğine ve yeni bir motorun nasıl dahil edileceğine dair küçük ama oldukça zenginleştirici bir giriş yaptık. ifade etmek.
Evet tamam gidon çok daha kapsamlıdır, ancak bu temel kavramlar ve uygulamamız ile ifade etmek kısa sürede çok ilginç şeyler başarabileceğiz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.