Sebagai perpustakaan UI, saya tidak berencana untuk membiarkan semua orang mempelajari inti kit saya dan menghafal API saya. Metode pembelajaran tindak lanjut semacam ini tidak memiliki arti sama sekali. Hari ini, jQuery populer, semua orang belajar JQ, dan besok Seajs akan menjadi populer, dan semua orang akan menyanyikan Seajs. Jadi di KITJS, saya secara khusus menyiapkan gula sintaks (Suger.js) untuk pengguna JQ, yang sepenuhnya mensimulasikan JQ API. Selain implementasi, antarmuka adalah sama, yang juga nyaman bagi semua orang untuk secara langsung mengubah komponen kit. Tentu saja, sebagai penggemar teknis murni, jauh lebih menarik untuk memahami secara mendalam bagaimana suatu teknologi diimplementasikan daripada menggunakannya untuk ideologi. Tentu saja, jika Anda secara langsung menjiplak kode komponen kit untuk pertimbangan KPI atau bonus proyek bos untuk menyelesaikan KPI Anda, saya tidak keberatan dengan perilaku seperti itu. Selama Anda minum air dan jangan lupa untuk menggali sumur, dan dapat mempromosikan KitJ saat meniup air dengan rekan kerja, saya sangat berterima kasih kepada Anda. Pada saat yang sama, Kit juga merupakan perpustakaan yang sangat muda. Karena pengembangan yang berkelanjutan, ada beberapa masalah kompatibilitas bug dan browser, yang tidak dapat dihindari. Saya sendirian dan memiliki energi terbatas. Di era perang di ujung depan ini, teman-teman yang lebih berpikiran sama dipersilakan untuk membuatnya lebih besar dan membuat kemajuan bersama.
Pada saat yang sama, komponen dialog KITJS dirilis hari ini, dengan alamat demo adalah http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(I) Format Direktori Kit
Kembali ke topik, di KITJS, kit.js adalah keberadaan file inti inti. Ini berisi beberapa DOM dan objek yang paling umum digunakan, operasi yang diwariskan, dan batch string.js, Math.js, dll. Diperluas sesuai dengan pembagian fungsi di direktori level yang sama. Setiap file JS independen berisi konstruktor kelas dan contoh objek global.
Mengambil kit.js sebagai contoh, itu termasuk kelas $ kit dan $ kit instance $ kit (dimulai dengan $ adalah untuk menghindari konflik dengan variabel yang umum digunakan).
Semua jenis lain digantung pada $ kit dan instance $ kit instance dengan cara tautan, seperti Math.js, yang mencakup $ kit. Kelas dan $ kit. Contoh, sehingga hanya ada dua polutan dalam ruang lingkup global. Pada saat yang sama, di Kit.js, kami mendefinisikan namespace yang disebut $ kit.ui. Dalam direktori fisik, kami menggunakan direktori widget dengan tingkat yang sama dengan kit.js, dan direktori dengan beberapa huruf awal diatur secara berturut -turut.
Semua direktori di bawah direktori widget adalah direktori komponen KITJS. Setiap file JS independen hanya berisi konstruktor kelas untuk komponen independen (non-instance). Ini juga dapat kompatibel dengan mode modul CommonJs (dapat memenuhi modul/1.1 Spesifikasi CommonJ dan transformasi AMD. Metode transformasi spesifik akan disebutkan secara rinci nanti)
(Ii) Templat kode default komponen kit, anotasi sesuai dengan spesifikasi JSDOC
Mari kita ambil komponen dialog sebagai contoh, setiap komponen mirip dengan yang berikut ini
Pertama -tama, komentar JSDOC, kelas apa @class Declaration, @require xxx.js, komponen apa yang dinyatakan tergantung pada tergantung pada
(Iii) Metode konstruktor dan inisialisasi
Setiap kelas mendefinisikan konstruktor dalam fungsi standar (config) {} cara. Perlu dicatat di sini bahwa konstruktor dari setiap komponen KITJS menyimpan parameter konfigurasi secara default sebagai input untuk konfigurasi yang dipersonalisasi.
Pada saat yang sama, di konstruktor kelas, ada anggota statis, objek DefaultConfig, yang digunakan untuk menyimpan konfigurasi default komponen KITJS
Saat menggunakan komponen KITJS, hal pertama yang perlu Anda lakukan adalah menginisialisasi objek instance baru melalui instance baru. Ini hanya untuk menginisialisasi objek komponen JS. Belum ada HTML. Anda perlu menjalankan metode init, membuat html, dan menambahkannya ke Doc, yang setara dengan menuangkan daging dan darah pada jiwa ^_ ^.
Beberapa siswa mungkin bertanya, mengapa tidak menempatkan metode init secara langsung di konstruktor dan melepaskannya secara terpisah?
1. Karena kelas induk perlu dipakai selama warisan. Ketika kelas anak mewarisi dari kelas induk, objek prototipe kelas anak akan diatur ke instance baru kelas induk. Jika metode inisialisasi init ditempatkan di konstruktor, HTML dari kelas induk akan dieksekusi secara langsung dan kode sampah akan dihasilkan.
2 Karena pemuatan malas, kode HTML perlu dieksekusi pada waktu yang tepat, daripada segera ketika inisialisasi diinisialisasi
Jadi cara default untuk menggunakan komponen KITJS adalah
Setelah instantiasi, jalankan metode init (metode init akan mengembalikan objek komponen saat ini, dengan kode pengembalian 7)
Seperti yang ditunjukkan pada gambar di atas, semua metode API dalam dialog digantung pada prototipe, dan warisan dan lewat ke objek instan melalui ekstensi prototipe.
Amati kode konstruktor dari komponen $ kit.ui.dialog.yesorno,
(Iv) Warisan KITJS
Dia menyatakan hubungan warisan dengan objek $ kit.UI.Dialog melalui metode $ kit.initit. Di sini, akan ada teman sekelas yang ingin bertanya, mengapa dia harus mewarisi di konstruktor alih -alih menulisnya langsung di luar?
Alasannya adalah:
1.Kitjs adalah hubungan warisan berbasis prototipe
2. Untuk menggunakan komponen KITJS, Anda harus membuat instantiasi objek komponen. Setiap komponen dibuat melalui konstruktor melalui instance baru.
Jadi saya menempatkan eksekusi hubungan warisan dalam konstruktor kode, sehingga ketika instantiasi komponen baru, saya akan mewarisi anggota dan metode kelas induknya langkah demi langkah sesuai dengan metode warisan konstruktor komponen saat ini.
Ketika kelas anak perlu memodifikasi metode kelas induk, Anda hanya perlu mendefinisikan metode dengan nama yang sama dalam prototipe kelas anak untuk mengesampingkan metode warisan kelas induk.
Dalam hal penamaan, KITJ mengikuti, dan subclass melanjutkan nama kelas induk sebagai namespace dan menyimpan rantai, seperti yang ditunjukkan pada gambar di atas $ kit.ui.dialog, $ kit.ui.dialog.yesorno
Implementasi warisan KITJS juga sangat sederhana
Instantiate Objek kelas induk, salin semua anggota instance kelas induk ke prototipe subkelas, lalu atur ulang konstruktor prototipe subclass sebagai konstruktor subkelas, lalu gantung tautan ke konstruktor subkelas dan arahkan ke kelas induk. Melalui metode $ kit.initit, dalam proses instantiasi subclass $ kit.ui.dialog.yesorno, Anda dapat mewarisi semua anggota kelas induk $ kit.ui.dialog yang tidak ada, dan menyadari waris yang mirip dengan bahasa statis.
(V) Parameter konfigurasi , kopling pembongkaran/penghapusan kulit HTML dan CSS?
Konstruktor komponen kit terbiasa lulus dalam parameter tipe peta, dan selalu mempersonalisasikan komponen. Ketika komponen kit diinisialisasi, itu akan secara otomatis menimpa default DefaultConfig dengan pengguna yang dikirimkan parameter konfigurasi dan memulai inisialisasi.
Untuk komponen apa pun, tidak mungkin untuk menghilangkan perubahan struktur HTML dan perubahan gaya CSS
Kit mendekomposisi kopling ini ke dalam konfigurasi parameter konfigurasi.
Pertama -tama, gunakan teknologi HTML Template. Advokat Kit Menggunakan metode $ kit.newhtml untuk secara langsung root html string, menghasilkan html dom dan memasukkan aliran dokumen,
Jadi kami mengekstrak perkiraan konten HTML dari komponen, merangkumnya ke dalam template string HTML, dan menyimpannya di DefaultConfig komponen. Jika pengguna perlu memodifikasi template HTML, gunakan konfigurasi khusus saat menginisialisasi, dan ganti bidang template di default DefaultConfig.
Dalam kopling dan dekomposisi templat HTML dan CSS, Kit menggunakan trik untuk menguraikan nama class menggunakan template JS.
Ganti html di konfigurasi dalam bentuk $ {xxx} oleh $ kit.tpl dalam metode init
Pada saat yang sama, semua gaya diatur dalam CSS.
Jika ada beberapa set kulit yang perlu diaktifkan, Anda dapat memilih untuk memodifikasi className dari template dengan menentukan className aktual yang sesuai dengan $ {cls} selama inisialisasi untuk mencapai efek penggantian kulit.
(Vi) Ringkasan
Pada dasarnya, melalui analisis kode komponen $ kit.ui.dialog.yesorno, kami memiliki pemahaman kasar tentang struktur implementasi komponen KITJS. Bahkan, tidak sulit untuk merancang komponen halaman, tetapi merancang komponen halaman yang dapat beradaptasi dengan berbagai persyaratan dan dapat dengan cepat merusak dan beradaptasi dengan pengembangan dalam berbagai kesempatan. Kit membagi templat html dan css, menyesuaikan parameter konfigurasi dan defaultConfig, dan subclass memperoleh properti dan metode kelas induk melalui pewarisan, dan pada saat yang sama refactor kode yang relevan sesuai dengan kebutuhan bisnis yang berbeda, yang pada dasarnya dapat memenuhi kebutuhan komponen UI bisnis dari berbagai tingkatan dan lingkungan secara fleksibel.
KITJS termasuk perpustakaan dasar dan perpustakaan UI.
Perpustakaan Dasar: Fungsi Pemilih, Fungsi Operasi DOM, Fungsi Animasi, Meningkatkan Peristiwa DOM, Meningkatkan Struktur Data Hashtree, Fungsi IO, Fungsi Penyimpanan Lokal, Multithreading, Range, dll.
Ada juga suger.js yang mensimulasikan format operasi jQuery
Perpustakaan UI meliputi: elemen bentuk yang ditingkatkan, lapisan pop-up, pemutar media, kerangka kerja verifikasi, aliran air terjun, tautan, tayangan slide, kalender, komponen unggah, mesin templat, dll.