Kitjs, (http://xueduany.github.com/kitjs), adalah satu set perpustakaan widget front-end html5 yang saya buat pada akhir 2011 setelah meninggalkan taobao ued. Tujuan aslinya adalah untuk fokus pada penggunaan komponen interaktif halaman HTML pada ponsel. Sama seperti Kit secara harfiah, visinya adalah menjadi mungil dan praktis, yang dapat digunakan secara langsung, dan juga bisa sangat nyaman untuk melakukan komponen dua-berkembang. Kemudian, ketika proyek tumbuh lebih besar dan lebih besar dan jumlah komponen diperluas, dukungan browser PC (IE6+, FF, seri inti Chrome, dll.) Juga ditambahkan, dan itu tidak lagi terbatas pada bidang pengembangan ponsel asli, dan mulai secara resmi bergerak ke platform penuh. Jadi baru -baru ini, semua modul asli telah diperbarui sesuai dengan spesifikasi JSDOC dan secara bertahap open source untuk digunakan semua orang.
Mari kita taruh silsilah kitjs terlebih dahulu sehingga setiap orang dapat memiliki pemahaman dasar tentang kit
Bagaimana dengan itu? Apakah Anda merasa sedikit pusing saat melihatnya? Sebenarnya, saya merasa pusing ketika saya melihatnya^_^. Sederhananya, kitj dan dojo mirip satu sama lain, dan dibagi menjadi
1. Modul alat JS dengan kit.js sebagai inti, yang diperluas di sekitar kit, mirip dengan dojo
2. Modul Komponen Di Bawah Kit.UI Namespace, Mirip dengan Dijit
3. Ada juga proyek laboratorium seperti Dojox, yang tidak ditentukan di sini.
Dalam komponen KITJS, ada beberapa komponen bagus yang telah saya posting di blog saya sebelumnya, seperti
Pemain Audio
Tab untuk efek iPhone
ComboBox
Album foto 3D
kalender
Lightbox
dll.
Ada juga beberapa komponen yang lebih baik yang masih digunakan atau secara bertahap dirilis untuk digunakan semua orang. Semua komponen KITJ memenuhi visi berikut
1. Lebih dekat dengan pengalaman pengguna pengguna Cina
2. Lebih dekat dengan komentar dan dokumen pengembang Cina
3. Pastikan untuk menyediakan komponen yang ada di pasaran yang tidak disediakan, tetapi semua orang membutuhkan.
4. Modul berbutir yang cukup halus untuk memfasilitasi perakitan dan bergabung menjadi widget yang lebih besar
Dalam modul alat KITJS, semua kode didasarkan pada ekstensi prototipe kelas, dan objek global yang dipakai disediakan untuk digunakan pengembang. Semua nama kelas dikapitalisasi dalam huruf pertama, dan semua objek contoh adalah huruf kecil dalam huruf pertama. Kit dimulai dengan karakter $ untuk memfasilitasi perbedaan dari perpustakaan kelas lainnya. Pada saat yang sama, dalam modul alat, semua metode ditulis dalam gaya pemrograman fungsi, yang sama dengan Kissy. Pada saat yang sama, Kit diberikan kepada siswa yang terbiasa berkembang dengan jQuery. Memuat Suger.js dapat menggunakan KITJS untuk menulis kode seperti menggunakan jQuery. Metode nama dan metode penggunaan persis sama dengan jQuery. Berikut adalah contoh acara siap dom
Salinan kode adalah sebagai berikut:
$ kit. $ (function ($) {
$ ('. item', $ ('#galeri')). masing -masing (fungsi () {
$ (ini) .css ({
Atas: $ kit.math.rand ($ ('#galeri'). InnerHeight ()) + 'px',
Kiri: $ kit.math.rand ($ ('#galeri'). InnerWidth ()) + 'px',
'-webkit-transform': 'rotate (' + $ kit.math.rand (-40, 40) + 'deg)'
});
}). Pushstack ('a.kitlightbox'). masing -masing (fungsi () {
$ kit.ui.lightbox baru ({
EL: Ini
}). init ();
});
});
$ kit. $ adalah acara dom Ready Kitjs. Parameter $ dari metode anonim diteruskan ke penutupan internal. Dengan cara ini, $ dapat digunakan langsung dalam penutupan internal alih -alih $ kit. $ (Setara dengan $ pemilih jQuery). Dengan cara ini, semua kode dalam penutupan tidak berbeda dengan jQuery. Ini juga memfasilitasi porting kode jQuery dan kode KITJS.
Artikel ini adalah artikel pertama dalam seri Panduan Penggunaan Kerangka KITJS. Ini hanya memperkenalkan KITJS secara singkat. Kami akan belajar lebih banyak tentang kerangka UI front-end yang sangat baik ini di masa depan.