Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Pengantar YUI

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Afrahcute (you can also view the original English article)

Dengan jQuery mendominasi lanskap kerangka kerja JavaScript, banyak pendatang baru yang tidak terpapar kerangka kerja JavaScript lain. Yang benar adalah bahwa ada sejumlah besar kerangka kerja JavaScript yang tersedia, seperti MooTools, Prototype, Ext JS, dan ... YUI! Meskipun tidak terlalu dikenal sebagai beberapa perpustakaan lain, YUI menyediakan banyak alat untuk pengembang web. Hari ini, kita akan melakukan tur singkat dari beberapa fitur-fiturnya.


Apa yang dimaksud dengan YUI?

YUI (kependekan dari Yahoo User Interface dan diucapkan Y-U-I) adalah perpustakaan JavaScript dan CSS open source yang dikembangkan terutama oleh Yahoo.com. YUI termasuk utilitas JavaScript, kerangka kerja CSS (reset, kisi, dan font), widget JavaScript, dan alat untuk membantu menyertakan dan mengelola modul Anda.

Saat ini ada dua versi yang didukung dari YUI. YUI 2, yang diluncurkan pada tahun 2006, berisi porsi YUI widget. YUI 3 dirilis pada 2009 dan memiliki syntax yang benar-benar baru, sangat meningkatkan kemudahan penggunaan (terutama dalam penanganan event dan DOM traversal).


Mengapa YUI?

Jadi Anda mungkin bertanya-tanya, mengapa saya harus mempertimbangkan untuk mempelajari kerangka kerja JavaScript lain? Setiap kerangka kerja memiliki kekuatannya sendiri, sehingga kerangka kerja yang Anda pilih akan tergantung pada kebutuhan Anda. Inilah beberapa hal yang benar-benar dilakukan YUI:

  • Perpustakaan besar widget, termasuk salah satu fitur paling lengkap datatables diluar sana.
  • Dokumentasi bintang - setiap komponen dan widget memiliki rinci petunjuk, contoh, dan dokumentasi api.
  • Alat-alat pengembangan - YUI memiliki sejumlah alat-alat pengembangan dingin termasuk profiler, in-browser console, dan kerangka pengujian.
  • Penanganan acara fleksibel dengan dukungan internal untuk acara sentuh dan bahkan isyarat.

OK, sekarang bahwa Anda telah mendengar sedikit tentang YUI, mari kita mulai melihat beberapa kode!


Termasuk Perpustakaan

YUI memungkinkan untuk banyak fleksibilitas ketika datang untuk memuat Perpustakaan; Mari kita lihat beberapa cara Anda dapat melakukannya.

Metode 1: YUI 3 Benih File

File benih adalah pilihan cara untuk mendapatkan YUI pada halaman Anda. Hanya menyertakan file benih YUI (hanya ~ 6KB), kemudian termasuk modul-modul yang Anda inginkan melalui JavaScript. Mari kita lihat sebuah contoh:

YUI.use () akan membuat permintaan untuk mendapatkan modul yang diperlukan, dan akan memberikan Anda contoh YUI dalam panggilan balik yang memiliki semua modul yang diperluka. Komponen YUI 2 juga dapat dimasukkan dengan memasukkan nama modul, yang diawali dengan yui2-. Jika Anda menyertakan komponen YUI 2, maka Anda dapat mengakses instance YUI 2 melalui Y.YUI2

Metode 2: YUI 3 Configurator

Alat berbasis web ini memungkinkan Anda untuk memilih modul yang Anda butuhkan dan memungkinkan Anda untuk mengunduh atau menautkan ke file yang diperkecil dengan semua dependensi tersebut (ini mirip dengan alat jQuery UI). Ini juga menyediakan statistik tentang bagaimana file akan mempengaruhi pemuatan halaman.

Metode 3: SimpleYUI

SimpleYUI adalah alat yang baru-baru ini dirilis yang menyederhanakan inklusi YUI bagi mereka yang terbiasa dengan hanya menyertakan perpustakaan JavaScript dan memiliki akses ke semuanya. Cukup sertakan file SimpleYUI dan Anda akan mendapatkan instance YUI global yang dipetakan ke variabel Y dengan manipulasi DOM, AJAX, dan modul efek UI tersedia.

Dengan SimpleYUI Anda masih dapat menggunakan semua modul YUI lainnya secara dinamis dengan memuatnya dengan YUI.use.methode.

SimpleYUI memiliki potensi untuk benar-benar membantu adopsi YUI karena membuatnya jauh lebih mudah diakses dan akrab bagi programmer yang berasal dari perpustakaan seperti jQuery.


Manipulasi DOM

Manipulasi DOM sangat mudah di YUI 3 dan sintaksis seharusnya cukup familiar jika Anda pernah menggunakan jQuery di masa lalu.

YUI menyediakan dua metode untuk mendapatkan node DOM, melalui modul Node-nya.

  1. Y.one ('selecter') - mengembalikan Node YUI mewakili Node DOM.
  2. Y.all ('selecter') - mengembalikan NUIList YUI dari semua pertandingan

Ini sebuah contoh.

YUI juga menyediakan metode 'tes' untuk melihat apakah suatu elemen cocok dengan pemilih

YUI juga menyediakan metode get dan set untuk memanipulasi atribut Node, dan fungsi kenyamanan seperti addClass dan removeClass.


Acara

Acara dilampirkan menggunakan YUI's on method. Anda dapat memanggil metode ini pada Node atau pada instance YUI. Sebagai contoh:

Salah satu fitur menarik dari YUI adalah bahwa jika Anda menggunakan metode dari contoh pertama, pemilih tidak perlu segera memiliki kecocokan. YUI akan terus melakukan jajak pendapat untuk pertandingan hingga 15 detik setelah halaman selesai dimuat, yang berarti Anda tidak perlu menunggu dokumen dimuat untuk menggunakannya (Anda tidak harus membungkus penangan acara Anda dalam fungsi document.load).

Perhatikan juga bahwa kami menambahkan jenis acara dengan string opsional yang memberi nama pada acara tersebut. Anda dapat menggunakan ini untuk melepaskan acara nanti jika diinginkan.

Anda juga dapat mensimulasikan peristiwa...

... dan nyalakan acara khusus.

YUI 3 juga mendukung touch events yang memungkinkan Anda menambahkan dukungan ke aplikasi JavaScript untuk perangkat seluler. Salah satu potensi gotcha adalah Anda harus menyertakan modul "event-touch" menggunakan YUI.on agar touch events berfungsi.


AJAX

Permintaan AJAX ditangani melalui IO module YUI 3.Panggilan AJAX dilakukan menggunakan fungsi io, seperti yang ditunjukkan di bawah ini.

Metode IO menerima URL dan objek konfigurasi sebagai parameter. Objek konfigurasi sangat dapat dikonfigurasi, tetapi saya telah menyertakan beberapa opsi paling umum dalam contoh di atas.

  1. metode - metode HTTP apa yang digunakan
  2. form - jika opsi ini ditentukan, formulir dengan id yang diberikan akan diserialisasi dan diteruskan dengan permintaan.
  3. pada - objek ini mengatur penangan acara untuk berbagai tahap dalam siklus hidup permintaan.

Modul io YUI juga memungkinkan Anda untuk mengirim permintaan lintas domain menggunakan file berbasis Flash yang disediakan oleh Yahoo. Namun ada beberapa peringatan. Pertama, Anda harus memiliki salinan file flash YUI di server Anda untuk benar-benar membuat permintaan, dan kedua, domain yang Anda akses harus memiliki file kebijakan lintas-domain yang memberikan Anda akses.

JSONP juga didukung, tetapi melalui modul YUI JSONP, bukan modul IO.

Satu lagi modul yang cukup berguna dalam hubungannya dengan AJAX adalah modul JSON. Ini memungkinkan Anda untuk dengan mudah mem-parsing permintaan AJAX yang mengembalikan JSON. JSON dapat diuraikan menggunakan metode JSON.parse


Animasi

YUI 3 berisi modul animasi yang dapat digunakan untuk melakukan hampir semua jenis animasi. Sintaksnya sedikit berbeda dari jQuery, jadi mari kita lihat.

Animasi terjadi dalam beberapa langkah di YUI. Pertama, Anda mengatur objek animasi baru yang menggambarkan animasi Anda, kemudian Anda jalankan.

Semua properti dapat diubah menggunakan .get() dan .set() pada objek animasi, memungkinkan Anda untuk mengubah animasi atau elemen DOM untuk menghidupkan. Animasi juga memunculkan acara yang dapat didengarkan juga.

Secara bersamaan, objek animasi YUI dapat digunakan untuk membuat semua jenis animasi di aplikasi Anda.


Widget

Salah satu fitur terbaik YUI adalah widgetnya. YUI 3 saat ini memiliki serangkaian widget terbatas (tab, slider, dan overlay untuk beberapa nama), tetapi menyediakan kerangka kerja yang kuat untuk membuat widget YUI 3 Anda sendiri. YUI 2, di sisi lain, memiliki perpustakaan besar widget. Berikut adalah beberapa:

  • DataTable - widget tabel data lengkap dengan pemuatan dan pagasi ajax, dukungan sel yang dapat diedit, kolom yang dapat diubah ukurannya, dan peningkatan progresif.
  • ImageCropper - widget yang membantu memotong gambar.
  • LayoutManager - widget untuk complex layouts melalui JavaScript.
  • Kalender - sebuah widget kalender popup.

Ada banyak widget yang dapat Anda gunakan, dan Anda dapat menemukan mereka semua pada situs pengembang YUI 2

.


CSS Perpustakaan

Komponen terakhir yang akan kita segera lihat yaitu pustaka YUI CSS. YUI 3 menyediakan empat sumber daya CSS.

  • Reset CSS - aturan dasar pengaturan ulang CSS. Setiap orang memiliki ide sendiri tentang apa yang harus dilakukan oleh file reset, jadi Anda mungkin atau mungkin tidak suka yang ini.
  • Basis CSS - gaya ini dibangun di atas Rese style untuk memberikan rendering yang konsisten di semua browser yang didukung. File ini menyediakan hal-hal seperti gaya input, ukuran header, dan gaya tabel.
  • CSS Fronts - menormalkan ukuran font di semua file yang didukung. Setelah stylesheet ini diterapkan, ukuran font diubah menggunakan persentase berdasarkan tabel yang disediakan YUI. Sumber daya YUI CSS Fonts digunakan oleh HTML5Boilerplate yang populer.
  • CSS Grids - CSS grid kerangka kerja untuk membantu dengan tata letak. Aku tidak penggemar grid pada umumnya, tetapi jika Anda ingin mempelajari lebih lanjut, Andrew Burgess memiliki writeup yang bagus dari satu ini di Nettuts +.

Kesimpulan

Ini hanya sekilas melihat beberapa komponen dan modul yang ditawarkan YUI. Jika artikel ini telah menarik minat Anda, saya sarankan Anda menuju ke dokumentasi YUI developer dan menemukan apa lagi yang ditawarkan YUI. Apa kesan Anda? Jika Anda pernah menggunakan YUI di masa lalu, bagaimana menurut Anda?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.