konsep
Mode Penampilan (Mode Fasad) adalah mode yang relatif sederhana dan ada di mana -mana. Mode Penampilan menyediakan antarmuka tingkat tinggi, yang membuatnya lebih mudah untuk menelepon klien atau subsistem.
Mode penampilan bukan mode adaptor, mode adaptor adalah pembungkus untuk mengadaptasi antarmuka untuk menggunakannya dalam sistem yang tidak kompatibel. Membuat elemen penampilan adalah kenyamanan. Ini tidak digunakan untuk berurusan dengan sistem pelanggan yang membutuhkan antarmuka tertentu, tetapi untuk menyediakan antarmuka yang disederhanakan.
Contoh Kode JavaScript
Gunakan sepotong kode sederhana untuk mengekspresikannya
var getName = function () {return '' svenzeng "} var getsex = function () {return 'man'}Jika Anda perlu memanggil fungsi GetName dan GetSex masing-masing, Anda dapat menggunakan antarmuka tingkat lebih tinggi GetUserInfo untuk menyebutnya.
var getUserInfo = function () {var info = a () + b (); kembalikan info;}Mungkin Anda akan bertanya mengapa Anda tidak menulis kode getName dan getsex bersama -sama di awal, misalnya
var getNeAndsex = function () {return 'svenzeng " +" man ";}Jawabannya jelas. Koki yang memasak kantin tidak akan mengaduk dua hidangan ini dalam panci yang sama hanya karena Anda memesan bebek panggang dan kubis. Dia lebih suka memberi Anda makan nasi bebek panggang. Juga dalam pemrograman, kita perlu memastikan bahwa fungsi atau objek berada pada granularitas yang wajar sebanyak mungkin. Lagi pula, tidak semua orang suka makan bebek panggang dan juga suka makan kol.
Keuntungan lain dari mode penampilan adalah dapat menyembunyikan detail implementasi nyata dari pengguna, dan pengguna hanya peduli dengan antarmuka level tertinggi. Misalnya, dalam kisah makan nasi bebek panggang, Anda tidak peduli apakah master membuat bebek panggang terlebih dahulu atau kubis tumis terlebih dahulu, dan Anda tidak peduli di mana bebek tumbuh.
Akhirnya, saya menulis contoh pola penampilan yang kami semua gunakan
var stopEvent = function (e) {// blok event perilaku default dan gelembung pada saat yang sama e.stoppropagation (); e.preventdefault ();}Saya tahu bahwa konsep pola penampilan mudah dikuasai, dan Anda mungkin tidak perlu membutuhkan contoh kode JavaScript, tetapi beberapa orang selalu lebih peduli tentang kode dan akan berpikir bahwa itu akan lebih mudah dipahami. Terlebih lagi, artikel JavaScript tanpa sampel kode tidak meyakinkan sama sekali, sehingga mereka harus dihapus dari internet. Mari kita mulai dengan contoh sederhana dari pendengar acara. Semua orang tahu bahwa menambahkan pendengar acara tidak mudah kecuali Anda hanya ingin kode berjalan pada beberapa browser. Anda harus menguji banyak cara untuk memastikan bahwa kode untuk browser yang berbeda berfungsi dengan baik. Dalam contoh kode ini kami hanya menambahkan deteksi fitur ke metode ini:
fungsi addEvent (elemen, type, func) {if (window.addeventListener) {element.addeventListener (type, func, false); } else if (window.attachevent) {element.attachevent ('on'+type, func); } else {element ['on'+type] = func; }}Sederhana! Saya benar -benar berharap saya tidak bisa menulis kode yang tidak perlu, membuatnya lebih sederhana semakin baik, tetapi jika itu masalahnya, itu tidak ada artinya dan Anda tidak ingin membacanya, bukan? Jadi saya rasa tidak, saya pikir saya ingin menunjukkan sesuatu yang lebih rumit. Saya hanya ingin mengatakan bahwa kode Anda akan terlihat seperti ini:
var foo = document.geteLementById ('foo'); foo.style.color = 'merah'; foo.style.width = '150px'; var bar = document.geteLementById ('bar'); bar.style.color = 'merah'; bar.style.width = '150px'; var baz = document.geteLementById ('baz'); baz.style.color = 'merah'; baz.style.width = '150px'; var baz = document.geteLementById ('baz'); baz.style.color = 'merah'; baz.style.width = '150px';Terlalu timpang! Anda melakukan hal yang persis sama untuk setiap elemen! Saya pikir kita bisa membuatnya sedikit lebih mudah:
function setstyle (elemen, properti, nilai) {untuk (var i = 0, panjang = elemen.length; i <panjang; i ++) {document.geteLementById (elemen [i]). style [properti] = value; }} // Sekarang Anda dapat menulis dengan cara ini: setstyle (['foo', 'bar', 'baz'], 'color', 'red'); setstyle (['foo', 'bar', 'baz'], 'width', '150px');Apakah menurut Anda NB kami rusak? Anda melupakannya! Kami adalah programmer JavaScript! Bisakah Anda menggunakan beberapa otak untuk mendapatkan beberapa hal nyata? Mungkin kita bisa mengatur semua gaya sekali saja. Lihat ini:
function setstyles (elemen, styles) {for (var i = 0, length = elemen.length; i <panjang; i ++) {var element = document.geteLementById (elemen [i]); untuk (properti var dalam gaya) {element.style [properti] = styles [properti]; }}} // Sekarang Anda hanya perlu menulis dengan cara ini: setstyles (['foo', 'bar', 'baz'], {warna: 'merah', lebar: '150px'});Jika kita memiliki banyak elemen yang ingin mengatur gaya yang sama, maka kode ini benar -benar menghemat banyak waktu.
Keuntungan dari Mode Penampilan:
Tujuan menggunakan mode penampilan adalah untuk memudahkan pemrogram untuk menulis kode kombo sekali dan kemudian menggunakannya berulang kali, yang membantu menghemat waktu dan upaya. Berikan antarmuka yang disederhanakan untuk beberapa masalah kompleks.
Metode penampilannya nyaman bagi pengembang. Bin telah menyediakan fungsi-fungsi tingkat tinggi, mengurangi ketergantungan pada kode eksternal, dan menambahkan beberapa fleksibilitas tambahan untuk pengembangan sistem aplikasi. Dengan menggunakan mode penampilan, kopling ketat ke subsistem yang mendasarinya dapat dihindari. Dengan cara ini, sistem dapat dimodifikasi tanpa mempengaruhi kode klien.
Kekurangan Mode Penampilan:
Terkadang elemen penampilan juga dapat membawa beberapa beban ekstra yang tidak perlu. Sebelum menerapkan beberapa rutinitas, Anda harus hati -hati mempertimbangkan kepraktisannya. Terkadang dibandingkan dengan fungsi penampilan yang kompleks, fungsi komposisinya lebih menarik dalam hal kekuatan. Ini karena fungsi penampilan sering kali melakukan tugas yang tidak Anda butuhkan.
Untuk situs web pribadi yang sederhana atau sejumlah kecil halaman pemasaran, mungkin tidak bijaksana untuk mengimpor perpustakaan JavaScript ini untuk sedikit perilaku yang ditingkatkan seperti tooltips dan pop-up. Pertimbangkan hanya menggunakan beberapa elemen penampilan sederhana saat ini alih -alih perpustakaan yang penuh dengan hal -hal ini.
Fungsi penampilan menyediakan antarmuka sederhana untuk melakukan berbagai tugas kompleks, yang membuat kode lebih mudah untuk dipelihara dan dipahami. Mereka juga dapat melemahkan kopling antara subsistem dan kode klien. Kombinasikan fungsi umum yang sering muncul bersama. Mode ini sangat umum digunakan dalam skrip DOM, yang membutuhkan antarmuka browser yang tidak konsisten.