Cara menggunakan template html css js

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Mungkin Anda tidak membutuhkan mereka untuk aplikasi web sederhana, tetapi tidak mengambil terlalu banyak kompleksitas sebelum merangkul JavaScript template menjadi keputusan yang baik. Seperti alat atau lain teknik, ada beberapa praktek terbaik bahwa Anda harus selalu diingat, apabila menggunakan template. Kita akan mengambil melihat beberapa praktek ini dalam tutorial ini.

1. garis bawah untuk sederhana, setang untuk kompleks

Jika Anda membutuhkan sesuatu dengan sedikit lebih semangat, mungkin saya sarankan setang?

Hal pertama yang pertama: kecuali Anda John Resig, kemungkinan besar Anda ingin memilih sebuah perpustakaan yang diuji dengan baik untuk menawarkan fungsi template Anda. Sementara pilihannya hampir tak ada habisnya, ada dua pilihan yang benar-benar baik, tergantung pada kompleksitas proyek Anda.

Jika proyek relatif sederhana, Anda dapat menggunakan Underscore.js. Untuk sebagian besar, Perpustakaan ini menawarkan utilitas pemrograman fungsional, tetapi memiliki metode _.template yang tidak bisa membuat segalanya lebih mudah. Secara default, menggunakan ERB-esque < % = %> pembatas, tetapi yang dapat dengan mudah dimodifikasi. Keindahan solusi ini adalah bahwa setiap proyek yang membutuhkan template akan memiliki Underscore dimuat sudah, hanya karena kegunaannya semata-mata umum. Untuk mempelajari lebih lanjut tentang garis bawah, memeriksa Siddharth's komprehensif tutorial di sini di Nettuts +.

Jika Anda membutuhkan sesuatu dengan sedikit lebih semangat, mungkin saya sarankan setang? Dengan banyak ungkapan berguna blok (seperti #each untuk mengulang dan #if untuk conditional) dan kemampuan untuk mendaftarkan fungsi penolong Anda sendiri, setang akan memberikan semua yang Anda butuhkan untuk membuat bahkan yang paling kompleks dari template.

Jika Anda tidak akrab dengan setang, Gabriel Manricks punya Anda tertutup dalam tutorial ini.

Tentu saja, ada Perpustakaan template lain di luar sana; Jangan ragu untuk memeriksa mereka keluar! Saya hanya merekomendasikan ini dua karena saya menikmati dan menggunakan mereka sendiri. Mereka juga cenderung menjadi persembahan yang paling populer di masyarakat.

2. membuat fungsi pembantu Template

Kebanyakan template Perpustakaan akan membuat data objek bahwa Anda lulus ke fungsi template konteks.

Akan ada waktu, ketika data yang Anda memasukkan ke dalam template tidak akan cukup diformat dengan cara yang Anda suka. Dalam situasi ini, Anda akan perlu untuk membuat fungsi kustom untuk format. Jika Anda menggunakan sesuatu seperti setang, Anda dapat dengan mudah mendaftarkan fungsi pembantu; tapi solusi lain, seperti garis bawah, tidak menawarkan fungsionalitas itu. Anda akan memiliki untuk roll Anda sendiri.

Alasan mengapa hal ini tidak sesederhana mungkin terdengar adalah karena kebanyakan template Perpustakaan akan membuat data objek bahwa Anda lulus ke fungsi template konteks, atau nilai ini. Oleh karena itu, fungsi perlu menjadi bagian dari objek ini. Ada beberapa cara untuk melakukan ini. Cara utama adalah untuk menambahkan fungsi ke objek data sebelum lewat ke fungsi template. Berikut adalah contoh:

// assume data object and template function

data.formatPrice = function (priceInCents) {
    return "$" + (priceInCents / 100).toFixed(2);
}

var html = template(data);

Ini sangat bagus untuk satu kali situasi, tetapi sangat mungkin bahwa Anda akan memiliki beberapa set template, masing-masing yang perlu menetapkan sendiri fungsi pembantu. Apa yang saya ingin lakukan dalam kasus ini adalah membungkus fungsi template dalam fungsi lain yang akan berlaku pembantu untuk objek data.

var productTemplate = function (data) {
    var template = _.template("the template string");
    data.helperFunction1 = function () { return "whatever" };
    return template(data);
};

Ada beberapa cara untuk memperbaiki hal ini (Anda mungkin mulai dengan cache fungsi template "mentah" di luar fungsi ini, mungkin melalui penutupan), tapi itu ide dasar. Sekarang, Anda dapat melewatkan data Anda ke productTemplate itu dan memiliki akses ke fungsi penolong Anda.

3. Simpan template di File mereka sendiri

Ada beberapa alternatif solusi yang mungkin lebih baik, terutama dalam skenario yang lebih kompleks.

Semua template JavaScript jelas mulai sebagai teks. Tempat yang paling populer (dan alam) untuk menyimpan mereka adalah dalam dokumen HTML Anda - biasanya dalam tag script dengan atribut alternatif jenis, sehingga browser tidak berusaha untuk mengeksekusi mereka. Hal ini cukup mudah untuk mengambil atribut innerHTML tag script dan menyebarkannya ke fungsi template-menciptakan, saat Anda siap.

Namun, ini bukanlah satu-satunya cara untuk melakukannya; pada kenyataannya, tidak mungkin merupakan cara yang optimal. Ada beberapa alternatif solusi yang mungkin lebih baik, terutama dalam skenario yang lebih kompleks.

Alternatif pertama adalah untuk menyimpan mereka semua dalam JavaScript file. Tentu saja, ini berarti bahwa template Anda akan disimpan sebagai string bukan HTML indentasi yang lebih mudah dibaca, tapi tetap dengan saya untuk kedua! Pertama, untuk template yang lebih lama daripada satu baris (kebanyakan template), Anda tidak perlu menggunakan berat, membungkus tali. Sebaliknya, mencoba sesuatu seperti ini:

Templates = {};

Templates.contactEntry = [
    "<h2> {{fullName}} </h2>",
    "<ul>",
        "<li> Email: {{email}} </li>",
        "<li> Phone: {{tel}} </li>",
    "</ul>"
].join("\n");

Menyimpan template dalam array seperti ini membuatnya lebih mudah untuk menangani. Menggunakan sintaks seperti ini, Anda dapat dengan mudah menyimpan semua template di file JavaScript mereka sendiri, dan memiliki file yang dimuat ke halaman sebelum Anda membutuhkan template. Dan tentu saja, Anda tidak memiliki untuk menjaga mereka semua dalam satu Template objek, tapi itu membuat hal-hal yang terorganisir. Objek template bisa bahkan menjadi sebuah properti pada objek global aplikasi Anda (yaitu, MyApp.Templates).

Tapi tunggu, ada lebih banyak (untuk koin frase). Anda dapat mengkonversi semua template ke fungsi template masing-masing mereka dalam sebuah loop tunggal:

for (var tmpl in Templates) {
    if (Templates.hasOwnProperty(tmpl) {
        Templates[t] = _.template(Templates[t]); // Underscore example
    }
}

Jika Anda menggunakan AMD dalam aplikasi Anda, metode ini akan tetap bekerja; hanya meletakkan bahwa dalam modul template yang mengembalikan objek template. Namun, banyak solusi AMD memiliki sebuah teks plugin yang memungkinkan Anda memuat file teks biasa; bukan objek modul normal, Anda akan mendapatkan string kembali. Jika Anda menggunakan perpustakaan RequireJS, Anda harus menyertakan text.js plugin di direktori yang sama seperti require.js file. Kemudian, Anda dapat melakukan sesuatu di sepanjang baris:

require(["text!templates/document.html"], function (documentTemplate) {

});

DocumentTemplate parameter akan adalah string yang berisi isi apapun di file templates/document.html yang. Ketika melakukannya dengan cara ini, Anda tidak akan mampu menempatkan beberapa template ke dalam satu file, kecuali jika Anda ingin untuk memanipulasi string.

4. precompile template Anda

Jika menggunakan pipa aset di Rails app, mengambil keuntungan dari Sprockets menyusun pra-fungsi template.

Jika Anda berpikir tentang hal itu untuk kedua, ada beberapa pekerjaan tambahan yang dilakukan oleh peramban setiap kali Anda membuat template. Biasanya, template itu mulai sebagai string yang Anda melewati ke fungsi template-menciptakan. Fungsi yang mengembalikan fungsi yang lain, yang dapat Anda lulus data dan menerima HTML dari. Pekerjaan tambahan adalah bagian "menciptakan-the-template-fungsi"; tidak ada alasan mengapa hal ini tidak dilakukan sebelum JavaScript dikirim ke klien. Sebaiknya, Anda dapat menempatkan pekerjaan ini menambah proses build Anda, bersama dengan minifying CSS Anda dan menggabungkan JS Anda.

Sayangnya, pra-kompilasi template JavaScript tidak cukup sederhana seperti minifying atau menggabungkan... setidaknya, tidak sekarang, mungkin karena banyak cara untuk membuat template. Jika Anda menggunakan kasar atau Yeoman, Anda dapat melihat plugin (seperti ini satu) situs web kasar. Jika Anda menggunakan pipa aset di Rails app, Anda dapat mengambil keuntungan dari Sprockets menyusun pra-fungsi template Anda.

Oh, dan jika Anda suka berpetualang (dan pelanggan Tuts + Premium), Anda dapat bergabung dengan saya sebagai saya precompile template dari awal saya maju Backbone pola dan teknik kursus.

5. tidak evaluasi dalam template

Tidak ada evaluasi dalam template.

Tidak terlalu lama yang lalu, sementara meneliti untuk proyek lain, saya menemukan ide menarik mengenai JavaScript template di buku hebat resep dengan tulang punggung. Sejak itu telah menjadi praktik terbaik dalam masyarakat: tidak evaluasi dalam template. Tentu saja, interpolasi variabel adalah tegasnya, evaluasi, tapi apa yang saya maksudkan lain di sini adalah kode logika. Anda dapat menaruh apa pun yang Anda ingin dalam delimiting JavaScript tag, tapi itu dengan mudah bisa keluar dari tangan. Kita semua tahu bahwa itu telah dianggap sebagai penerapan terbaik untuk menjaga HTML, CSS, dan JavaScript terpisah; Hal ini membuat lebih mudah untuk melacak kode dan tempat kesalahan, bila diperlukan. Hal yang sama berlaku untuk template: mereka harus tempat interpolasi nilai hanya. Transformasi logika atau data apapun harus dilakukan di luar template.

Tentu saja, seberapa jauh Anda pergi dengan ide ini adalah terserah Anda. Anda mungkin memutuskan bahwa perulangan di dalam template Anda baik-baik saja; Anda mungkin memiliki template seperti ini:

<h2> My List </h2>
<ul id="myList">
    <% list.forEach(function (item) { %>
        <li> <%= item.name %> </li>
    <% }); %>
</ul>

Atau, Anda mungkin malah memilih untuk loop di luar template Anda dengan membuat template pembungkus, kemudian mengulang melalui item, render template sub, dan memasukkan mereka ke dalam template pembungkus. Anda mungkin berakhir dengan dua template seperti ini:

Pembungkus template:

<h2> My List </h2>
<ul id="myList">
</ul>

Template sub:

<li> <%= name %> </li>

Tentu saja, metode ini dipisahkan membuat untuk lebih sedikit kode, tapi Anda akan menemukannya bermanfaat dalam jangka panjang.

Sepanjang jalur tersebut, ini adalah praktik yang baik mengikuti memimpin kerangka atau perpustakaan yang Anda gunakan. Sebagai contoh, saya telah menemukan bahwa, bila menggunakan tulang punggung dengan garis bawah template, itu mudah digunakan di luar loop dan sub template: Underscore's minimal template fungsi tidak menawarkan setiap perulangan sintaks, dan tulang punggung di render metode adalah tempat yang tepat untuk melakukannya perulangan dan memasukkan template sub. Namun, bila menggunakan Meteor, yang membangun di setang template, itu jauh lebih mudah untuk loop dalam template dengan sebuah blok #each; (dan menggunakan sub template, juga, jika Anda ingin).

6. mengikat Data ke template

Pelajari lebih lanjut tentang Backbone.stickit di Tuts + Premium.

Ini tidak selalu akan berlaku, tapi, dalam beberapa kasus, hal ini dapat benar-benar membantu untuk membuat template Anda memperbarui secara otomatis, ketika data mereka menampilkan perubahan. Aku suka ide ini banyak, karena memungkinkan bahkan UI aplikasi Anda harus benar-benar data-driven: ketika atribut model update, UI pembaruan dengan itu. Ini adalah prinsip dasar di balik alat-alat, seperti babak.

Meskipun Anda mungkin bisa roll fungsi ini pada Anda sendiri tanpa terlalu banyak kesulitan, Semua kerangka yang populer memiliki itu dibangun di. Sebagai contoh, pada jaringan Backbone, fungsi menginisialisasi template mungkin termasuk beberapa pendengar acara adat, seperti:

this.model.on('change', this.render, this);

Dengan cara ini, setiap kali perubahan atribut model, template render fungsi akan dipanggil dan template kembali diberikan. Atau, Anda dapat menggunakan plugin, seperti backbone.stickit, yang akan mengelola binding untuk Anda. Jika Anda bekerja dengan Meteor dan menggunakan salah satu sumber data yang reaktif, Anda akan mendapatkan ini mengikat gratis - tanpa tambahan bekerja diperlukan. Saya tidak cukup akrab dengan setiap kerangka untuk mengetahui persis bagaimana mereka melakukannya, tetapi setiap kerangka patut menggunakan harus memiliki fitur serupa.

7. menyederhanakan template Anda

Sangat cepat, template Anda bisa keluar dari tangan dan menjadi berat.

Jika Anda tidak hati-hati, sangat cepat, template Anda bisa keluar dari tangan dan menjadi berat. Inilah mengapa selalu ide yang baik untuk membatasi template Anda untuk ukuran yang wajar. Jika Anda membuat mereka terlalu besar, mereka akan lebih sulit untuk memperbarui, dan tidak akan memungkinkan untuk pemisahan baik kode. Di sisi lain, jika mereka terlalu kecil, mereka akan biaya terlalu banyak untuk apa yang mereka bawa, dan kemudian akan memperlambat aplikasi Anda.

Inilah sebabnya mengapa penting untuk menemukan happy medium. Pendekatan template Anda dengan cara yang sama bahwa Anda menulis kode JavaScript atau CSS: membuatnya modular. Ya, setiap UI "potongan" atau widget harus memiliki template itu sendiri, tapi jangan lupa tentang sub template. They're berguna, ketika unit yang lebih kecil widget memiliki layout yang kompleks atau negara, serta ketika mereka memiliki beberapa acara, tapi ingat bahwa mereka dapat menjadi pedang bermata dua. Tidak menggunakannya kecuali jika Anda memiliki alasan yang baik untuk.

8. Jangan menggunakan mereka jika Anda tidak perlu 'em

Akhirnya, mengingat bahwa JavaScript template adalah hanya salah satu alat lain dalam kotak; dan, kadang-kadang, ini hanya tidak orang yang tepat untuk pekerjaan itu. Jangan gunakan template di mana Anda tidak membutuhkannya. Menggunakan kepala Anda: mungkin ada situasi yang lain, ketika template tidak alat terbaik.

Kesimpulan

Kami akan, mereka adalah terbaik saya tips untuk menggunakan JavaScript template, tapi mungkin Anda bisa memikirkan beberapa lagi! Jika demikian, silakan berbagi di komentar di bawah ini, sehingga kita dapat melanjutkan diskusi.

Langkah langkah membuat web menggunakan HTML dan CSS?

Bagaimana HTML bisa membuat situs?

Apa itu Template WP?

Bagaimana cara membuat template WordPress?