Friendly Open Space JS: Rendering Sisi-Klien dan Pembuatan Wrapper

Friendly Open Space adalah kerangka kerja yang sangat muda, tetapi sudah tahu cara menjalankan :-)

Pada artikel ini tentang pengembangan "Friendly Open Space", kami akan menguasai rendering template di browser dan meluncurkan aplikasi pada file database lokal.

Inti dari kerangka kerja mendukung dua jenis perakitan template pada klien:

1. Render sisi klien lengkap
2. Permintaan dibuat untuk membuat templat ke server, diikuti dengan hasilnya di jendela browser.

Mode pertama memiliki satu fitur, data yang diperlukan untuk rendering templat diminta dari server, mis. klien mengeksekusi permintaan FSQL. Tidak ada bahaya khusus dalam hal ini jika Anda menggunakan pembatasan akses dan modul fosAccess, tetapi ada kemungkinan membongkar data mentah dengan menyalin pasteur. Namun, pendekatan ini secara signifikan mengurangi beban di server.

Jenis rendering kedua sudah tanpa fitur ini. Klien mengirim parameter template dan menerima sudah dari server HTML. Ya, beban di server pasti akan meningkat, tetapi metode ini lebih cocok untuk solusi Internet terbuka.

Mempersiapkan aplikasi dan menyiapkannya

Maka, kita dihadapkan dengan tugas membuat aplikasi satu halaman yang akan membuat 2 templat (windows) di sisi klien. Mengingat tugas yang cukup sederhana, kami akan melakukannya tanpa database dan proyeksi MySQL, jadi kami akan mengarahkan semua pekerjaan FSQL ke file, mis. kami akan menggunakan database pada file untuk bekerja dengan mekanisme internal kerangka kerja. Baiklah, mari kita mulai.

Buat direktori:

template - direktori template
css - direktori file css
fos - unduh beta friendlyopenspace.site/en/download beta terbaru
Tempatkan favicon.ico yang mengganggu di direktori root aplikasi: favicon.ico

Selain itu, kami segera menempatkan file gaya di direktori css: window.css dan styles.css

Selanjutnya, buat file aplikasi application.js itu sendiri:

var fos = require("./fos/fos"); fos.module({ name: "application.js", dependencies: [ "fos:NServer/Application.js", ], module: function(application) { application.setSettings({ port: 3001, packages: [], dynamicLoading: true, clientRenderingMode: "client", dataClient: { defaultConnection: "default", connections: { default: { type: "file", file: "data.fosdb" } }, }, onInitialize: function(a_event) { if (!a_event.error) { application.run(); } else { console.error(a_event.error); } } }); application.getRouter().add([ { route: "", controller: "fos:NServer/NControllers/Tmpl.js", source: "templates/page.tmpl", }, { route: "/css/*", controller: "fos:NServer/NControllers/File.js", source: "css", }, { route: "/templates/*", controller: "fos:NServer/NControllers/File.js", source: "templates", }, { route: "favicon.ico", controller: "fos:NServer/NControllers/File.js", source: "favicon.ico", }, ]); application.initialize(); } }); 

Sekarang mari kita lihat isi file application.js

Kami menonaktifkan semua paket, karena tidak diperlukan (parameter paket dari metode setSettings):

  ... application.setSettings({ port: 3001, packages: [], dynamicLoading: true, clientRenderingMode: "client", ... 

Parameter aplikasi clientRenderingMode, baru bagi kami, bertanggung jawab untuk jenis rendering pada klien dan memiliki dua nilai:

"Klien" - rendering dilakukan sepenuhnya oleh browser. Klien secara mandiri memuat dependensi dan mengeksekusi permintaan FSQL ke server, setelah itu mengumpulkan HTML itu sendiri

"Server" - klien membuat permintaan ke server untuk merender template dan menerima HTML siap sebagai tanggapan

  ... packages: [], dynamicLoading: true, clientRenderingMode: "client", dataClient: { defaultConnection: "default", ... 

Dan inovasi terakhir bagi kami adalah menghubungkan database pada file. Kerangka kerja tidak dapat sepenuhnya bekerja tanpa kemampuan untuk memproses variabel konfigurasi yang memiliki struktur tabel. Karena itu, alih-alih MYSQL, kami akan menggunakan file biasa.

 ... defaultConnection: "default", connections: { default: { type: "file", file: "data.fosdb" } }, }, ... 

Seperti dapat dilihat dari kutipan di atas, dalam hal ini tipe database (tipe parameter) adalah "file", dan satu-satunya parameter koneksi file harus berisi path ke file data. Jika file hilang, aplikasi akan membuatnya sendiri.

Buat Template Halaman

Sekarang saatnya membuat templat file templat halaman aplikasi / page.tmpl, yang telah kami daftarkan di rute URL root.

 //~OPTIONS { args:{ fosInclude: ["css/styles.css"], } } //~BLOCK main default <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> %{{ render.renderHTMLHeader(); }}% <script> function onClientSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, args: { title: "Client side rendering", context: "Simple example of client side rendering" }, onResult: function(a_error, a_template){ } }); } function onServerSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, renderMode: "server", args: { title: "Server side rendering", context: "Simple example of server side rendering" }, onResult: function(a_error, a_template){ } }); } </script> </head> <body> <div class="mainwrapper"> <div class="header markup"> Client Side Rendering </div> <div class="body-wrapper markup"> <div class="body markup"> <p class="example-link--container"><a onclick="onClientSideRendering(event);">Client side rendering</a></p> <p class="example-link--container"><a onclick="onServerSideRendering(event);">Server side rendering</a></p> </div> <div class="clear-body"></div> </div> </div> </body> </html> 

Templat halaman memiliki dua tautan, "rendering sisi Klien" & "rendering sisi Server". Mengklik yang akan menampilkan jendela yang belum tersedia. Tetapi ada kode untuk memanggil mereka. Jadi mari kita berurusan dengan kode templat.

Ketika kami mengklik tautan "Render sisi klien", kami memanggil fungsi onClientSideRendering (), yang merender template "templates / window.tmpl". Sepenuhnya di sisi klien, seperti dalam pengaturan aplikasi, parameter clientRenderingMode diatur ke "client". Terlepas dari kenyataan bahwa ini adalah nilai default :-).

 function onClientSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, args: { title: "Client side rendering", context: "Simple example of client side rendering" }, onResult: function(a_error, a_template){ } }); } 

Metode render sebenarnya membuat jendela kita dan menempatkannya di badan halaman, sebagaimana ditentukan dalam properti argumen pemilik. Kami melewati 2 argumen ke templat jendela: judul & konteks, sebenarnya yang akan ditampilkan di jendela yang ditampilkan. Untuk informasi lebih lanjut tentang metode ini, lihat fos :: NClient :: Application :: render

Tautan kedua memanggil fungsi onServerSideRendering (), yang juga membuat templat yang sama, tetapi di sisi server, dan klien menerima HTML yang sudah jadi. Mode ini diatur dalam properti argumen renderMode dari metode render dengan nilai "server".

 function onServerSideRendering(a_event){ a_event.preventDefault(); fos.application.render({ template: "templates/window.tmpl", owner: document.body, renderMode: "server", args: { title: "Server side rendering", context: "Simple example of server side rendering" }, onResult: function(a_error, a_template){ } }); } 

Membuat template pop-up dan menulis template wrapper

Template jendela popup itu sendiri sangat sederhana. Buat file templates / window.tmpl. Berikut ini isinya.

 //~OPTIONS { args:{ fosWrapper: true, fosClass: "window", fosInclude: ["css/window.css"], title: "", context: "", } } //~BLOCK main default <div class="window-container"> <div class="window-close" name="close">x</div> <div class="window-title">${{args.title}}$</div> <div class="window-context">${{args.context}}$</div> </div> 

Di sini untuk Anda ada dua parameter baru fosWrapper dan fosClass.

Mari kita mulai dengan fosWrapper. Jika flag ini disetel ke true, maka templat HTML ditempatkan dalam wadah span dan objek wrapper fos :: NRender :: Wrapper dibuat untuk itu.

Luncurkan aplikasi, buka localhost : 3001 dan klik tautan "rendering sisi klien". Jendela sembul adalah templat kami. Jendela popup sepenuhnya diimplementasikan oleh css (file css / window.css) - Saya baru saja menyebutkan bahwa Anda tidak akan mencari JS tersembunyi :-).

Buka browser DevTools (Ctrl + Alt + i), buka tab Elemen dan tinjau struktur jendela kita.



Garis biru pada gambar menandai wadah pembungkus span kami yang terhubung dengan objek fos :: NRender :: Wrapper.

Argumen sistem selanjutnya untuk templat adalah fosClass. Itu hanya menambahkan kelas CSS ke wadah rentang pembungkus.

Jadi, semuanya dilakukan dengan baik, tetapi jika kami mencoba menutup pop-up kami, tidak ada yang akan terjadi. Ya, kami belum menulis operasi penutupan!

Seperti yang kami katakan sebelumnya, jika argumen sistem fosWrapper benar, maka objek wrapper fos :: NRender :: Wrapper dibuat untuk templat. Ini menyediakan antarmuka standar untuk berinteraksi dengan templat pada klien. Untuk mendefinisikan ulang pembungkus standar untuk templat, cukup membuat modul dengan nama yang sesuai dengan format berikut [NAMA POLA] .wrapper.js, dan modul harus diwarisi dari kelas fos :: NRender :: Wrapper.

Sekarang buat file wrapper untuk template / window.tmpl template. Kelas baru harus menutup jendela pop-up kami, ketika Anda mengklik simbol "x".

Templat file / window.wrapper.js:

 fos.module({ name: "templates/window.wrapper.js", dependencies: ["fos:NRender/Wrapper.js"], module: function(Wrapper){ return function(a_initializeOptions) { var self = this; Wrapper.call(this, a_initializeOptions); var parentAttach = this._attach; this._attach = function(a_cb) { parentAttach.call(this, function(){ fos.addDomListener(fos.select(self.getDomElement(), "[name=close]")[0], "click", function(){ self.getDomElement().classList.add("window-hide"); setTimeout(function() { self.destroy(); }, 2000); }); a_cb(); }); } } } }); 

Mari kita menganalisis isi modul kita. Pertama, kita menghubungkan kelas dasar fos :: NRender :: Wrapper dan mewarisinya melalui metode panggilan.

 fos.module({ name: "templates/window.wrapper.js", dependencies: ["fos:NRender/Wrapper.js"], module: function(Wrapper){ return function(a_initializeOptions) { var self = this; Wrapper.call(this, a_initializeOptions); ... 

Setelah kita mendefinisikan kembali metode fos :: NRender :: Wrapper :: _, yang dipanggil ketika templat dikaitkan dengan objek. Dalam metode ini, kita akan menghubungkan acara mengklik tautan untuk menutup jendela. Overriding dilakukan hanya dengan mendeklarasikan metode, tetapi pada awalnya kita harus menyimpan referensi untuk implementasi induk. Metode ini memiliki "sifat asinkron", jadi kami menempatkan implementasi tindakan kami dalam fungsi callback dari implementasi induk.

  ... var parentAttach = this._attach; this._attach = function(a_cb) { parentAttach.call(this, function(){ fos.addDomListener(fos.select(self.getDomElement(), "[name=close]")[0], "click", function(){ self.getDomElement().classList.add("window-hide"); setTimeout(function() { self.destroy(); }, 2000); }); a_cb(); }); } ... 

Menghubungkan ke acara mengklik simbol "x" yang kami lakukan dengan memanggil fos :: addDomListener, yang tidak mengatur ulang acara yang terhubung saat mengubah induk elemen DOM.

Di pengendali acara, kami menutup jendela. Pertama, kami dengan baik menghapus jendela dari layar dengan menambahkan kelas CSS "window-hide". Setelah animasi selesai, kita memanggil metode fos :: NRender :: Wrapper :: destroy, yang menghapus template dan objek wrapper.

SEMUA APLIKASI TERTULIS, DILUNCURKAN, DAN DIBACA !!!

 node application.js 

Situs pengembangan resmi

Tautan ke sebuah contoh