1. Analisis pembukaan
Hai, semuanya! Dalam dua artikel pertama, kami terutama berbicara tentang cara mengembangkan plug-in di "JQuery's Way", dan cara merancang plug-in dengan menggabungkan desain proses dengan desain berpikir yang berorientasi objek. Kedua metode memiliki pro dan kontra untuk belajar dari kekuatan dan kelemahan mereka. Hehehe, mari kita bicara lebih sedikit omong kosong, dan sampai ke intinya. Langsung pada rendering yang sebenarnya:
Anda bisa melihatnya. Ini adalah plug-in menu drop-down. Dalam pengembangan harian kita, sistem ini kadang -kadang dapat membuat kita merasa bahwa itu tidak terlalu indah dan memiliki fungsi yang terbatas, menyebabkan pengguna
Bentuk pengalaman dan interaktivitas pengguna tidak terlalu baik, jadi hari ini saya mensimulasikan hehehehehe. Mari kita analisis secara rinci di bawah ini.
(Ii), analisis kasus
(1) Pertama, tentukan apa yang dilakukan plugin ini. Mari kita lihat metode panggilan plug-in dan deskripsi parameter konfigurasi. Kode berikut:
Salinan kode adalah sebagai berikut:
$ (function () {
var itemselector = new itemselector ($ ("#item-selector"), {
CurrentText: "Harap Pilih Item",
Item: [
{
Teks: "JavaScript",
Nilai: "JS",
Dinonaktifkan: "1"
},
{
Teks: "CSS",
Nilai: "CSS",
Dinonaktifkan: "0"
},
{
Teks: "html",
Nilai: "html",
Dinonaktifkan: "0"
}
],
Mode: "0", // Saat "1", itu mendukung kotak centang beberapa mode pemilihan
Ubah: fungsi (value) {
// Letakkan kode Anda di sini
}
});
itemselector.init ();
setTimeout (function () {
console.log (itemselector.getCurrentValue ()); // tes untuk mendapatkan item yang dipilih terlebih dahulu
}, 2000);
"Var ItemSelector = new ItemsElector ()" berisi dua parameter. Yang pertama adalah objek DOM Node dan yang kedua adalah opsi parameter plug-in. "CurrentText" mewakili deskripsi teks dari area tampilan teks di plug-in "ItemsElector".
"Item" adalah array yang berisi properti item "ItemSelector", termasuk deskripsi teks, nilai opsi, "Dinonaktifkan" mewakili visiblensi dari entri daftar, 0 mewakili tampilan, dan 1 mewakili tidak ditampilkan.
"Ubah" mewakili fungsi panggilan balik operasi saat dipilih, dan data opsi akan dikembalikan dalam bentuk parameter.
(2) Apa fungsi yang terlibat?
Rendering yang dapat ditampilkan adalah sebagai berikut:
Rendering yang tidak dapat ditampilkan adalah sebagai berikut:
Perbedaan antara keduanya adalah: data keadaan yang tidak diungkapkan tidak akan dikembalikan, dan tidak akan ada efek saat mengambang.
3) Kode lengkap adalah untuk belajar. Kode ini telah diuji, termasuk struktur direktori dan file terkait.
(1), html
Salinan kode adalah sebagai berikut:
<body>
<div>
Big Bear {{BB}}-DXJ UI ------ Itemselector
</div>
<div>
<Div id = "Item-Selector">
<div>
<div> </div> <span> ↓ </span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
(2), CSS
Salinan kode adalah sebagai berikut:
/ * Selektor Item */
#Item-Selector {
margin: 0 otomatis;
Lebar: 220px;
meluap: tersembunyi;
Perbatasan: 2px solid #CCC;
}
#Item-Selector .title {
Border-Bottom: 1px solid #CCC;
meluap: tersembunyi;
}
#Item-Selector .Title Div {
Lebar: 190px;
Perbatasan: 0px;
Warna:#999;
Font-Family: Arial;
Ukuran font: 14px;
Tinggi: 28px;
Line-Height: 28px;
float: kiri;
kursor: pointer;
}
#Item-Selector .title span {
Tampilan: Blok;
Tinggi: 30px;
Line-Height: 30px;
Lebar: 29px;
float: kiri;
Teks-Align: tengah;
Border-left: 1px solid #ccc;
kursor: pointer;
}
#Item-Selector .content {
Lebar: 220px;
meluap: tersembunyi;
}
#Item-Selector .content .items {
meluap: tersembunyi;
}
#item-selector .content .items div {
Padding-left: 20px;
Lebar: 200px;
Tinggi: 32px;
Line-Height: 32px;
Font-Family: "Microsoft Yahei";
Ukuran font: 14px;
font-weight: tebal;
kursor: pointer;
}
.item-hover {
Latar belakang:#3385ff;
Warna: #FFFF;
}
(3), "Itemselector.js"
Salinan kode adalah sebagai berikut:
fungsi itemselector (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var isProto = itemselector.prototype;
IsProto.getElem = function () {
kembalikan ini.elem;
};
IsProto.getOpts = function () {
kembalikan ini.
};
/* manip data*/
IsProto._setCurrent = function (saat ini) {
this.getopts () ["current"] = arus;
};
IsProto.getCurrentValue = fungsi (saat ini) {
kembalikan this.getopts () ["saat ini"];
};
/* manip data*/
IsProto.init = function () {
var itu = ini;
this.getopts () ["saat ini"] = null; // kursor data
this._setitemValue (this.getopts () ["currentText"]);
var itemelem = that.geteLem (). find (". Content .items");
this.getelem (). find (". judul div"). on ("click", function () {
itemselem.toggle ();
});
this.getelem (). find (". judul rentang"). on ("click", function () {
itemselem.toggle ();
});
$ .each (this.getopts () ["item"], function (i, item) {
item ["id"] = (tanggal baru (). getTime ()). ToString ();
that._render (item);
});
};
IsProto._setitemValue = function (value) {
this.getelem (). find (". judul div"). Teks (nilai)
};
IsProto._render = function (item) {
var itu = ini;
var itemElem = $ ("<div> </div>")
.text (item ["teks"])
.attr ("id", item ["id"]);
if ("0" == item ["Disable"]) {
itemelem.on ("klik", function () {
var onchange = that.getopts () ["ubah"];
that.getelem (). find (". Content .items"). hide ();
that._setitemValue (item ["text"]);
that._setCurrent (item);
onchange && onchange (item);
})
.mouseover (function () {
$ (ini) .addclass ("item-hover");
})
.mouseout (function () {
$ (ini) .removeclass ("item-hover");
});
}
kalau tidak{
itemelem.css ("color", "#ccc"). on ("click", function () {
that.getelem (). find (". Content .items"). hide ();
that._setitemValue (item ["text"]);
});
}
itemelem.appendto (this.getelem (). find (". Content .items")));
};
(Iv), ringkasan akhir
(1) Analisis yang wajar dari persyaratan fungsional dalam cara berpikir yang berorientasi objek.
(2), atur logika plug-in kami dengan cara kelas.
(3) terus merekonstruksi contoh -contoh di atas, bagaimana cara merekonstruksinya secara wajar? Jangan merancang berlebihan, merasa nyaman. Metode yang disarankan adalah menggabungkan desain proses dengan desain berpikir yang berorientasi objek.
(4) Artikel berikut akan memperluas fungsi terkait, seperti "mode" properti. Ketika "1", ia mendukung kotak centang Mode Multi-Select, tetapi sekarang hanya mode drop-down default.
Artikel ini ada di sini terlebih dahulu, dan kami akan terus membahasnya nanti. Saya harap Anda dapat menikmati serangkaian artikel ini.