3

Artikel ini dikaji semula oleh Chris Perry dan Ritesh Kumar. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik boleh!

Dalam artikel ini kita akan memberikan gambaran keseluruhan templat dalam JavaScript. Kami akan terlebih dahulu membincangkan templat JavaScript, apabila kita harus menggunakannya dan bagaimana kita melaksanakannya, sebelum pergi ke sedikit lebih terperinci mengenai beberapa enjin templating yang popular di luar sana. Kami akan memberi tumpuan kepada misai, hendal dan template jQuery.

Takeaways Key

Templat JavaScript menawarkan kaedah memisahkan struktur HTML dari kandungan, meningkatkan pemeliharaan asas kod. Mereka sangat bermanfaat untuk aplikasi web masa nyata dan pengantarabangsaan, yang sering memerlukan kandungan yang berbeza untuk dipaparkan menggunakan format yang sama.

Mustache.js adalah sistem templating yang tidak berbilang bahasa dan logik yang sesuai untuk projek-projek kecil dan prototaip cepat. Ia mudah, tidak mempunyai kebergantungan, dan tidak memerlukan template precompiled. Selain itu, projek -projek boleh dengan mudah menaik taraf ke handlebars.js kemudian kerana templat kebanyakannya sama.

handlebars.js, dibina di atas misai, menyokong ekspresi blok dan templat precompiled, meningkatkan prestasi dengan ketara. Ia sesuai untuk projek -projek di mana prestasi adalah penting dan menambah 18kb ke berat halaman tidak menjadi kebimbangan. Untuk melihat manfaat prestasi dan saiz fail yang dikurangkan, templat precompiled mesti digunakan.

• template jQuery, walaupun tidak begitu popular seperti mistache.js atau handlebars.js, tidak boleh diabaikan. Ia memerlukan jQuery dan menggunakan atribut data untuk menunjukkan di mana data harus dimasukkan dalam serpihan HTML. Ia sesuai untuk projek -projek yang sudah termasuk jQuery kerana saiz failnya yang kecil. Walau bagaimanapun, ia tidak disyorkan untuk projek yang tidak menggunakan jQuery memandangkan jumlah saiz fail.
Apakah templat JavaScript?
templat JavaScript adalah kaedah memisahkan struktur HTML dari kandungan yang terkandung di dalamnya. Sistem templating umumnya memperkenalkan beberapa sintaks baru tetapi biasanya sangat mudah untuk bekerja dengan, terutamanya jika kami telah menggunakan sistem templating di tempat lain sebelum ini (contohnya ranting dalam PHP). Titik yang menyeronokkan untuk diperhatikan ialah penggantian token biasanya dilambangkan oleh kurungan keriting berganda ({{...}}), yang kumis dan hendal memperoleh nama mereka dari (petunjuk: putar mereka ke sisi untuk melihat persamaan).

• Bilakah kita harus menggunakan templat JavaScript?

  Sebaik sahaja kita mendapati diri kita termasuk HTML di dalam rentetan JavaScript kita harus mula memikirkan tentang apa manfaat JavaScript Templates dapat memberi kita. Pemisahan kebimbangan adalah sangat penting apabila membina pangkalan kod yang boleh dipelihara, jadi apa -apa yang dapat membantu kita mencapai ini harus diterokai. Dalam perkembangan web front-end ini, ini disambungkan apabila memisahkan HTML dari JavaScript (ini berfungsi dengan baik di mana kita tidak boleh memasukkan JavaScript dalam HTML).

  Beberapa senario biasa yang boleh mendapat manfaat daripada templat JavaScript adalah aplikasi web masa nyata (contohnya aplikasi streaming langsung untuk ulasan acara), atau pengantarabangsaan (i18n), yang sering memerlukan kandungan yang berbeza dipaparkan menggunakan pemformatan yang sama .

  Bagaimana kita melaksanakan templat JavaScript?

  Kami akan lebih terperinci mengenai ini dengan contoh perpustakaan tertentu, tetapi pada dasarnya ia semudah termasuk perpustakaan yang kami pilih, mengambil templat kami dan menjadikannya bersama beberapa data.

  Kebanyakan perpustakaan menyokong kedua -dua templat dalam talian dan luaran. Templat sebaris sangat bagus untuk apabila kami mempunyai sedikit templat atau kami tahu bahawa kami akan menggunakan templat yang disertakan pada setiap beban halaman, tetapi secara amnya templat kami harus luaran. Templat luaran membawa banyak faedah, terutamanya bahawa templat tidak akan dimuat turun kepada pelanggan melainkan jika ia diperlukan oleh halaman.
  mistache.js
  kumis adalah sistem templating yang tidak berbilang bahasa, logik. Pelaksanaan mistache.js hanyalah salah satu daripada banyak. Jadi apabila kita digunakan untuk sintaks (sangat mudah), kita boleh menggunakannya dalam pelbagai bahasa pengaturcaraan.
  mata utama
  saiz fail 9kb (kecil)
  mudah
  tiada kebergantungan
  tiada logik
  Tiada template precompiled
  Pengaturcaraan Bahasa Agnostik
  Contoh

  <span><span><span><script</span> id<span>="template"</span> type<span>="x-tmpl-mustache"</span>></span><span>
  </span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
  </span></span></span><span><span></span><span><span></script</span>></span>
  </span>

  //Grab the inline template
  var template = document.getElementById('template').innerHTML;
  
  //Parse it (optional, only necessary if template is to be used again)
  Mustache.parse(template);
  
  //Render the data into the template
  var rendered = Mustache.render(template, {name: "Luke", power: "force"});
  
  //Overwrite the contents of #target with the rendered HTML
  document.getElementById('target').innerHTML = rendered;
  

  lihat contoh pena mistache.js oleh sitepoint (@sitePoint) pada codepen.
  Seperti yang anda lihat dalam contoh ini, fungsi misai. Dalam kes ini kita menggantikan nama dan pembolehubah kuasa dengan rentetan mudah, tetapi mungkin untuk melakukan lebih banyak lagi. Sebagai contoh gelung di atas array, atau gunakan fungsi rendering khas yang menggunakan pandangan semasa sebagai hujah pandangannya.
  Mustache.js adalah sempurna untuk projek -projek kecil dan prototaip cepat di mana kerumitan templat adalah minimum. Perkara penting yang perlu diperhatikan ialah kita boleh memulakan projek dengan mistache.js dan kemudian dengan mudah menaik taraf ke handlebars.js kemudian sebagai templat (kebanyakannya) sama.
  Jika anda ingin membaca lebih lanjut mengenai misai, lihat: Membuat templat HTML dengan mistache.js.

  handlebars.js

  handlebars.js dibina di atas misai dan kebanyakannya serasi dengan template misai. Ringkasnya, ia menyediakan segala -galanya mistache.js menyediakan, ditambah ia menyokong ekspresi blok dan templat precompiled. Templat precompiled adalah masalah besar kerana mereka meningkatkan prestasi dengan margin yang besar (dalam ujian prestasi kasar, templat handals.js precompiled yang diberikan pada kira -kira separuh masa template misai). Ekspresi blok membolehkan anda memasukkan lebih banyak logik dalam templat anda; Salah satu contoh yang lebih biasa adalah pengetua maju - contohnya. Buat A

  senarai Iterator yang membungkus setiap item dalam
  • . Anda boleh membaca lebih lanjut mengenai ekspresi blok di sini.

    mata utama

    • saiz fail 86kb (besar), atau 18kb jika menggunakan templat precompiled
    • Ekspresi blok (pembantu)
    • templat precompiled
    • tiada kebergantungan

    Contoh

    <span><span><span><script</span> id<span>="template"</span> type<span>="x-tmpl-mustache"</span>></span><span>
    </span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
    </span></span></span><span><span></span><span><span></script</span>></span>
    </span>

    //Grab the inline template
    var template = document.getElementById('template').innerHTML;
    
    //Parse it (optional, only necessary if template is to be used again)
    Mustache.parse(template);
    
    //Render the data into the template
    var rendered = Mustache.render(template, {name: "Luke", power: "force"});
    
    //Overwrite the contents of #target with the rendered HTML
    document.getElementById('target').innerHTML = rendered;
    

    lihat contoh pena pena oleh sitepoint (@sitePoint) pada codepen

    handlebars.js sangat sesuai untuk projek -projek di mana prestasi adalah penting dan kami tidak bimbang untuk menambah 18kb ke berat halaman. Ia juga cara untuk pergi jika kita mahu menggunakan ekspresi blok.

    Perhatikan bahawa untuk melihat manfaat prestasi handlebars.js (dan saiz fail yang sangat dikurangkan) kita mesti menggunakan templat precompiled. Untuk berbuat demikian dengan cekap, kita harus menambah kompilasi template handlebars.js ke dalam proses binaan kami (Grunt mempunyai pemalam yang hebat untuk ini).

    Jika anda ingin mengetahui lebih lanjut mengenai hendal, lihat: Panduan Pemula untuk Hendal.

    template jQuery

    template jQuery tidak begitu popular seperti mistache.js atau handlebars.js tetapi kita tidak boleh mengabaikannya. Templat adalah berbeza dengan template misai kerana ia hanya HTML biasa tanpa sintaks baru. Daripada teknik penggantian token ia menggunakan atribut data untuk menunjukkan di mana data harus dimasukkan dalam serpihan HTML.

    mata utama

    • saiz fail 7kb (kecil)
    • memerlukan jQuery (82kb)
    • mudah, tetapi berbeza dengan cara kumis dan handlebars.js berfungsi
    • Tiada template precompiled

    Contoh

    <span><span><span><script</span> id<span>="template"</span> type<span>="text/x-handlebars-template"</span>></span><span>
    </span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
    </span></span></span><span><span></span><span><span></script</span>></span></span>

    //Grab the inline template
    var template = document.getElementById('template').innerHTML;
    
    //Compile the template
    var compiled_template = Handlebars.compile(template);
    
    //Render the data into the template
    var rendered = compiled_template({name: "Luke", power: "force"});
    
    //Overwrite the contents of #target with the renderer HTML
    document.getElementById('target').innerHTML = rendered;
    

    Lihat contoh template pena jQuery oleh sitepoint (@sitePoint) pada codepen.

    template jQuery sangat sesuai untuk projek -projek yang sudah termasuk jQuery kerana saiz failnya sangat kecil. Walau bagaimanapun, jika projek anda tidak akan menggunakan jQuery maka sukar untuk mengesyorkan memandangkan jumlah saiz fail.

    Pilihan lain

    Sudah tentu banyak penyelesaian lain untuk masalah ini yang tidak akan kita sampaikan secara terperinci dalam artikel ini. Berikut adalah gambaran yang sangat cepat mengenai beberapa pilihan popular yang lain;

    underscore.js

    Underscore adalah perpustakaan JavaScript yang popular yang menyediakan fungsi templat di antara pelbagai ciri lain. Secara lalai ia tidak menggunakan sintaks pendakap keriting berganda yang digunakan oleh misai, sebaliknya memilih pembatas gaya ERB ().

    Templat JS Terbenam (EJS)

    Seperti underscore.js, templat JS tertanam menggunakan sintaks gaya ERB untuk templat. Satu perkara yang perlu diperhatikan dengan EJS ialah templat yang mestilah fail luaran - mereka tidak boleh sebaris.

    Catatan penutup

    Jadi mana yang terbaik? Seperti kebanyakan masalah pembangunan, tidak ada peluru perak. Ia bergantung pada banyak perkara;

    • adakah anda sudah menggunakan jQuery dalam projek anda?
    • sistem templating mana yang anda mempunyai pengalaman sebelumnya?
    • Adakah anda ingin menyimpan logik dari templat?
    • Betapa bimbang anda mengenai saiz fail halaman keseluruhan?
    • Betapa bimbang anda mengenai prestasi/adakah laman web anda perlu menyokong peranti kuasa rendah?

    Sebaik sahaja kita berfikir tentang faktor -faktor ini kita boleh membuat pilihan yang berpendidikan dari senarai di atas. Walau bagaimanapun, seperti yang dinyatakan secara ringkas sebelum ini, strategi fleksibel yang baik adalah untuk melaksanakan misaiche.js terlebih dahulu dan kemudian bertukar ke handlebars.js kemudian jika fungsi tambahan atau manfaat prestasi diperlukan.

    mahu berbunyi? Sila tinggalkan komen di bawah!

    soalan yang sering ditanya mengenai enjin templating JavaScript

    Apakah perbezaan utama antara enjin templating JavaScript? Sebagai contoh, EJS terkenal dengan kesederhanaan dan kemudahan penggunaannya, manakala handlebars.js menawarkan templat kurang logik yang kuat. Mustache.js adalah satu lagi pilihan popular kerana keserasian silang bahasa. Penting untuk memilih enjin templating yang sesuai dengan keperluan projek dan gaya pengekodan anda. Untuk membuat laman web dinamik. Mereka membenarkan pemaju untuk memisahkan struktur HTML dari data, yang membawa kepada kod yang lebih bersih dan lebih diselenggara. Enjin templating juga menyokong komponen yang boleh diguna semula, yang dapat mengurangkan masa pembangunan dengan ketara. projek, ia umumnya tidak disyorkan. Menggunakan enjin berganda boleh membawa kepada ketidakkonsistenan kod dan peningkatan kerumitan. Adalah lebih baik untuk memilih satu enjin templat yang sesuai dengan keperluan anda dan melekatinya sepanjang projek.

    Bagaimanakah enjin templating JavaScript berfungsi dengan Express.js?

    Express.js, rangka kerja aplikasi web yang popular untuk node.js, menyokong pelbagai enjin templating. Sebaik sahaja anda telah memilih enjin templat, anda boleh menetapkannya sebagai enjin lalai di Express.js. Ini membolehkan anda membuat pandangan menggunakan enjin yang anda pilih, memudahkan proses menghasilkan HTML dinamik. Ciri dalam JavaScript yang membolehkan interpolasi rentetan dan rentetan pelbagai baris. Walaupun mereka boleh digunakan untuk menjana HTML, mereka tidak mempunyai banyak ciri yang disediakan oleh enjin templat, seperti sokongan untuk komponen yang boleh diguna semula dan pemisahan kebimbangan. Walau bagaimanapun, mereka boleh berguna untuk kes penggunaan mudah di mana enjin templating penuh tidak diperlukan. Enjin bergantung kepada keperluan projek anda dan keutamaan peribadi. Pertimbangkan faktor -faktor seperti kerumitan projek anda, lengkung pembelajaran enjin, dan ciri -ciri yang ditawarkannya. Ia juga merupakan idea yang baik untuk melihat komuniti dan sokongan di sekitar enjin. . Sesetengah enjin lebih cepat dalam menyusun templat, manakala yang lain unggul pada rendering. Walau bagaimanapun, bagi kebanyakan aplikasi web, perbezaan ini tidak mungkin mempunyai kesan yang ketara terhadap prestasi. , walaupun secara amnya tidak disyorkan melainkan jika anda mempunyai keperluan khusus yang tidak dipenuhi oleh enjin yang ada. Membuat enjin templating memerlukan pemahaman yang mendalam tentang JavaScript dan boleh memakan masa. kerana kesilapan sering berlaku semasa runtime. Walau bagaimanapun, kebanyakan enjin memberikan mesej ralat yang berguna yang boleh membimbing anda ke arah sumber masalah. Ia juga merupakan idea yang baik untuk menggunakan linter untuk menangkap kesilapan sintaks. digunakan dalam konteks lain. Sebagai contoh, mereka boleh digunakan untuk menjana e-mel, PDF, atau apa-apa jenis kandungan berasaskan teks. Kelebihan utama enjin templat adalah keupayaan mereka untuk memisahkan data dari persembahan, yang boleh berguna dalam pelbagai aplikasi.

Atas ialah kandungan terperinci Gambaran keseluruhan enjin templat JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!