1. Analisis pembukaan
Hai, apakah Anda masih ingat artikel sebelumnya? Ini terutama memberi tahu bagaimana plugin "tab" mengatur kode dan mengimplementasikannya, dan bagaimana desain proses dikombinasikan dengan desain pemikiran yang berorientasi objek
Bagaimana cara merancang plug-in? Kedua metode ini memiliki kelebihan dan kekurangannya sendiri untuk belajar dari kekuatan dan kelemahan masing -masing. Rangkaian artikel ini berorientasi pada pembelajaran, dan semua orang memutuskan cara menggunakan skenario spesifik. Dari artikel ini, kami masih fokus pada instance "tab" itu.
Terus memperluas fungsi terkait. Hehehe, katakan lebih sedikit omong kosong, sampai ke intinya. Langsung pada rendering yang sebenarnya:
Anda telah melihatnya, dan fitur baru telah ditambahkan. Jika jumlah entri dari item informasi konfigurasi modul kami ketika kami menginisialisasi lebih besar dari apa yang kami tentukan, itu akan ditampilkan dalam "lebih banyak modul"
Dalam daftar item operasi tersembunyi, konfigurasi parameter inisialisasi kami juga baru disesuaikan, seperti tambahan "displaymax" untuk menentukan jumlah entri pada inisialisasi, dan atribut item, "status"
Selama inisialisasi, tidak diperlukan konfigurasi. Konfigurasi dinamis dihasilkan dalam program, yang meningkatkan fleksibilitas program. 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:
{
Buttontext: "Tambahkan Modul",
hasil: [
{
Teks: "Wizard Prompt",
URL: "Help.html",
Tunjukkan: "0"
},
{
Teks: "Informasi Siswa",
URL: "info.html",
Tunjukkan: "1"
},
{
Teks: "Klasifikasi Siswa",
URL: "Category.html",
Tunjukkan: "1"
},
{
Teks: "Big Bear {{BB}}",
URL: "BB.html",
Tunjukkan: "1"
},
{
Teks: "Modul Tes Beta",
URL: "test.html",
Tunjukkan: "1"
},
{
Teks: "tiga pria berlemak",
URL: "Help.html",
Tunjukkan: "1"
},
{
Teks: "Empat pria botak",
URL: "Help.html",
Tunjukkan: "1"
}
],
DisplayMax: 5 // Maksimal Tampilan Item
}
"Bigbear.ui.createTab" berisi dua parameter. Yang pertama adalah objek DOM Node dan yang kedua adalah opsi parameter plug-in. "Buttontext" mewakili deskripsi teks dari tombol operasi di plug-in "tab".
"Hasil" adalah array yang berisi properti item tab, termasuk deskripsi teks, URL yang digunakan untuk memintanya saat mengklik item tab, "Showclose" mewakili apakah opsi tab menampilkan tombol tutup.
"Status" juga dihapus selama inisialisasi dan tidak memerlukan konfigurasi, dan konfigurasi dihasilkan secara dinamis dalam program. Mungkin ada keadaan tertutup, yang dinyatakan sebagai: Tampilan 1-default, status 0-off, dan 2-dari jumlah entri default.
(2) Fungsi diperkenalkan dalam langkah -langkah
1 ---, inisialisasi plug-in melalui parameter opsional:
Salinan kode adalah sebagai berikut:
$ (function () {
bigbear.ui.createTab ($ ("#tab"), {
Buttontext: "Tambahkan Modul",
hasil: [
{
Teks: "Wizard Prompt",
URL: "Help.html",
Tunjukkan: "0"
},
{
Teks: "Informasi Siswa",
URL: "info.html",
Tunjukkan: "1"
},
{
Teks: "Klasifikasi Siswa",
URL: "Category.html",
Tunjukkan: "1"
},
{
Teks: "Big Bear {{BB}}",
URL: "BB.html",
Tunjukkan: "1"
},
{
Teks: "Modul Tes Beta",
URL: "test.html",
Tunjukkan: "1"
},
{
Teks: "tiga pria berlemak",
URL: "Help.html",
Tunjukkan: "1"
},
{
Teks: "Empat pria botak",
URL: "Help.html",
Tunjukkan: "1"
}
],
DisplayMax: 5 // Maksimal Tampilan Item
});
});
2 ---, render dan lengkap ikatan waktu dan logika bisnis terkait, seperti verifikasi jumlah entri selama inisialisasi.
Salinan kode adalah sebagai berikut:
tabproto.init = function () {
if (this._isemptyResult ()) {
this._setContent ("Belum ada modul!");
}
var itu = ini;
this.getelem (). find (". judul .adder")
.text (" +" + this.getopts () ["buttontext"])
.on ("klik", function () {
itu.getelem (). find (". Console-panel"). slidetoggle (function () {
that._renderConsolepanel ("0");
});
});
$ .each (this.getopts () ["result"], function (i, item) {
if (that._isdisplaymax (i + 1)) {
that._saveorupDatestatus (item, "1");
}
kalau tidak{
that._saveorupDatestatus (item, "2");
}
that._render (item);
});
if (! that._isdisplaymax (this.getopts () ["result"]. length)) {
this.getelem (). find (". judul .more-Mod"). fadein (function () {
$ (ini) .find (".
var root = $ (this) .next ();
root.empty ();
$ .each (that._getitemlistByStatus ("2"), function (i, data) {
$ ("<verv> </div>"). Teks (data ["Teks"])
.on ("klik", function () {
if (that._getitemlistByStatus ("1"). length <that.getopts () ["displaymax"]) {
itu.getelem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
that._saveorupDatestatus (data, "1");
});
}
kalau tidak{
Peringatan ("Tidak ada modul yang dapat ditambahkan, saat ini angka maksimum!");
}
})
.Appendto (root);
});
root.toggle ();
});
});
}
this.getelem (). find (". title .items div")
.eq (0)
.trigger ("klik"); // Asumsikan bahwa harus ada satu, jika tidak plug-in tidak akan masuk akal!
};
3 ---, pengalihan tab dan operasi rendering konten data.
Salinan kode adalah sebagai berikut:
TabProto._SetCurrent = function (index) {
var item = this.getelem (). find (". title .items div"). RemoveClass ("Active");
item.eq (indeks) .addclass ("aktif");
var contents = this.getElem (). find (". Content .c"). hide ();
konten.eq (index) .show ();
};
Salinan kode adalah sebagai berikut:
item.on ("klik", function () {
that._setCurrent ($ (ini) .index ());
itu._getContent (data ["url"]). Done (function (hasil) {
that._setContent (hasil);
})
.fail (function () {
melempar kesalahan baru ("Kesalahan bersih!");
});
})
Salinan kode adalah sebagai berikut:
TabProto._SetContent = function (html) {
this.getelem (). find (". content"). html (html);
};
tabproto._getContent = function (url) {
mengembalikan $ .Ajax ({
URL: URL
});
};
4 ---, metode operasi data tambahan tidak melibatkan DOM.
Salinan kode adalah sebagai berikut:
/ * Perbarui Waktu 2015 1/26 15:36 */
TabProto._isdisplaymax = function (size) {
var displaymax = this.getopts () ["displaymax"] || 5;
return (size <= displaymax)? Benar: false;
};
TABPROTO._IsEmptyResult = function () {
if (! this.getopts () ["result"]. length) {
mengembalikan false;
}
Kembali Benar;
};
TABPROTO._SAVEORUPDATESTOTUS = FUNGSI (Item, Status) {
item ["status"] = status;
};
TabProto._GetitemListByStatus = function (status) {
var list = [];
var result = this.getOpts () ["result"];
$ .each (hasil, fungsi (i, item) {
if (status == item ["status"]) {
list.push (item);
}
});
daftar pengembalian;
};
TabProto._GetStatusByIndex = function (index) {
status var = null;
var result = this.getOpts () ["result"];
$ .each (hasil, fungsi (i, item) {
if (index == item ["index"]) {
status = item ["status"];
}
});
status pengembalian;
};
(Iii), kode lengkap untuk pembelajaran , kode ini telah diuji, termasuk struktur direktori dan file terkait.
1, html
Salinan kode adalah sebagai berikut:
<body>
<div>
Big Bear {{bb}}-dxj ui ------ tab
</div>
<div>
<Div id = "tab">
<div>
<div>
+ Tambahkan informasi siswa
</div>
<div>
<!-<div> <span> x </span> Halaman selamat datang </div>
<div> <span> x </span> Manajemen Pengguna </div>
<verv> <span> x </span> Bigbear </div>->
</div>
<div>
<div> Lebih Banyak Modul </Div>
<div>
</div>
</div>
</div>
<div>
</div>
<div>
<!-<div>
<span> <span> Nama: </span> <input type = "text"/> </div>
<div> <span> Catatan: </span> <textarea> </textarea> </div>
</div> <div> <input type = "tombol" value = "save"/> </div>
->
</div>
</div>
</div>
</body>
2, CSS
Salinan kode adalah sebagai berikut:
.dxj-ui-hd {
padding: 0px;
margin: 0 otomatis;
margin-top: 30px;
Lebar: 780px;
Tinggi: 60px;
Line-Height: 60px;
Latar belakang: #3385ff;
Warna: #FFFF;
Font-Family: "Microsoft Yahei";
Ukuran font: 28px;
Teks-Align: tengah;
font-weight: tebal;
}
.dxj-ui-bd {
padding: 0px;
margin: 0 otomatis;
Lebar: 778px;
Padding-top: 30px;
padding-bottom: 30px;
meluap: tersembunyi;
Perbatasan: 1px solid #3385ff;
}
.dxj-ui-bd #tab {
padding: 0px;
margin: 0 otomatis;
Lebar: 720px;
meluap: tersembunyi;
Posisi: kerabat;
}
.dxj-ui-bd #tab .title {
Lebar: 720px;
meluap: tersembunyi;
Border-Bottom: 2px Solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
Lebar: 160px;
Tinggi: 32px;
Line-Height: 32px;
Latar Belakang: #DC143C;
Warna: #FFFF;
Font-Family: "Microsoft Yahei";
Ukuran font: 14px;
Teks-Align: tengah;
font-weight: tebal;
float: kiri;
kursor: pointer;
}
.dxj-ui-bd #tab .title .more-Mod {
meluap: tersembunyi;
Perbatasan: 1px Solid #DC143C;
Lebar: 70px;
Posisi: Absolute;
Kanan: 0;
margin-kanan: 6px;
Tampilan: Tidak Ada;
}
.dxj-ui-bd #tab .title .more-Mod .tag {
Tinggi: 32px;
Line-Height: 32px;
Lebar: 70px;
Latar Belakang: #DC143C;
Warna: #FFFF;
Font-Family: Arial;
font-size: 12px;
Teks-Align: tengah;
kursor: pointer;
}
.dxj-ui-bd #tab .title .more-Mod .mods {
meluap: tersembunyi;
Lebar: 70px;
Tampilan: Tidak Ada;
}
.dxj-ui-bd #tab .title .more-Mod .mods div {
Tinggi: 24px;
Line-Height: 24px;
Lebar: 62px;
Font-Family: Arial;
font-size: 12px;
kursor: pointer;
Padding-left: 10px;
}
.dxj-ui-bd #tab .title .items {
Tinggi: 32px;
Lebar: 480px;
meluap: tersembunyi;
float: kiri;
}
.dxj-ui-bd #tab .title .items div {
padding: 0px;
margin-kiri: 10px;
Lebar: 84px;
Tinggi: 32px;
Line-Height: 32px;
Latar belakang: #3385ff;
Warna: #FFFF;
Font-Family: Arial;
font-size: 12px;
Teks-Align: tengah;
Posisi: kerabat;
float: kiri;
kursor: pointer;
}
.dxj-ui-bd #tab .title .items div span.del {
Lebar: 16px;
Tinggi: 16px;
Line-Height: 16px;
Tampilan: Blok;
Latar Belakang: #DC143C;
Posisi: Absolute;
Kanan: 0;
TOP: 0;
kursor: pointer;
}
.dxj-ui-bd #tab .content {
Lebar: 716px;
Padding-top: 30px;
meluap: tersembunyi;
Perbatasan: 2px Solid #3385ff;
Border-top: 0px;
Min-height: 130px;
Teks-Align: tengah;
}
.dxj-ui-bd #tab. Tabel konten {
margin: 0 otomatis;
}
.dxj-ui-bd #tab .content div.c {
Padding-top: 20px;
Padding-left: 20px;
Latar Belakang: #EEE;
Tinggi: 140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
margin-top: 10px;
Font-Family: Arial;
font-size: 12px;
}
.dxj-ui-bd #tab .console-panel {
Lebar: 716px;
Padding-top: 20px;
padding-bottom: 20px;
meluap: tersembunyi;
Perbatasan: 2px Solid #3385ff;
Border-top: 0px;
Border-Bottom: 2px Solid #3385ff;
Latar belakang: #FFF;
Tampilan: Tidak Ada;
}
.active {
font-weight: tebal;
}
3, Bigbear.js
Salinan kode adalah sebagai berikut:
(function ($) {
var win = window;
var bb = win.bigbear = win.bigbear || {
ui: {}
};
var ui = bb.ui = {};
var tab = function (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var tabproto = tab.prototype;
/ * Perbarui Waktu 2015 1/26 15:36 */
TabProto._isdisplaymax = function (size) {
var displaymax = this.getopts () ["displaymax"] || 5;
return (size <= displaymax)? Benar: false;
};
TABPROTO._IsEmptyResult = function () {
if (! this.getopts () ["result"]. length) {
mengembalikan false;
}
Kembali Benar;
};
TABPROTO._SAVEORUPDATESTOTUS = FUNGSI (Item, Status) {
item ["status"] = status;
};
TabProto._GetitemListByStatus = function (status) {
var list = [];
var result = this.getOpts () ["result"];
$ .each (hasil, fungsi (i, item) {
if (status == item ["status"]) {
list.push (item);
}
});
daftar pengembalian;
};
TabProto._GetStatusByIndex = function (index) {
status var = null;
var result = this.getOpts () ["result"];
$ .each (hasil, fungsi (i, item) {
if (index == item ["index"]) {
status = item ["status"];
}
});
status pengembalian;
};
TabProto._RenderConsolepanel = function (status) {
var itu = ini;
var root = that.getelem (). find (". Console-panel");
this._resetConsolepanel ();
$ .each (that._getitemlistByStatus (status), function (i, item) {
var elem = $ ("<div style = 'float: left';> </div>"). appendto (root);
$ ("<input type = 'Radio' name = 'addMod' />")
.data ("item", item)
.Appendto (elem);
$ ("<span> </span>"). Teks (item ["teks"]). AppendTo (elem);
});
if (root.find ("div"). size ()) {
$ ("<input type = 'tombol' value = 'Tambahkan modul' style = 'margin-left: 20px'/>")
.on ("klik", function () {
var data = root.find ("input [type = radio]: checked"). data ("item");
if (that._getitemlistByStatus ("1"). length <that.getopts () ["displaymax"]) {
itu.getelem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
that._saveorupDatestatus (data, "1");
})
.trigger ("klik");
}
kalau tidak{
that._saveorupDatestatus (data, "2");
}
that.getelem (). find (". judul .adder"). pemicu ("klik");
})
.Appendto (root);
}
kalau tidak{
root.text ("Belum ada item untuk ditambahkan!");
}
};
/ * Perbarui Waktu 2015 1/26 15:36 */
TabProto._SetCurrent = function (index) {
var item = this.getelem (). find (". title .items div"). RemoveClass ("Active");
item.eq (indeks) .addclass ("aktif");
var contents = this.getElem (). find (". Content .c"). hide ();
konten.eq (index) .show ();
};
tabproto.getelem = function () {
kembalikan ini.elem;
};
tabproto.getopts = function () {
kembalikan ini.
};
TabProto._resetContent = function () {
this.getelem (). find (". content"). html ("");
};
TabProto._SetContent = function (html) {
this.getelem (). find (". content"). html (html);
};
tabproto._getContent = function (url) {
mengembalikan $ .Ajax ({
URL: URL
});
};
tabproto._deleteItem = function (elem) {
var itu = ini;
this.getelem (). find (". title .items div")
.eq (elem.index ())
.fadeout (function () {
itu._resetContent ();
that._saveorupDatestatus (elem.data ("item"), "0");
that._triggerItem (elem.index () + 1);
});
};
TabProto._TriggerItem = function (NEXT) {
var nextstatus = this._getStatusByIndex (NEXT);
var item = this.geteLem (). find (". title .items div");
next = item.eq (NEXT);
if (next.size () && "1" == nextstatus) {// node dom berikutnya ada
next.trigger ("klik");
}
kalau tidak{
item.eq (0) .trigger ("klik");
}
};
TabProto._resetConsolepanel = function () {
this.getElem (). find (". Console-panel"). empted ();
};
tabproto.init = function () {
if (this._isemptyResult ()) {
this._setContent ("Belum ada modul!");
}
var itu = ini;
this.getelem (). find (". judul .adder")
.text (" +" + this.getopts () ["buttontext"])
.on ("klik", function () {
itu.getelem (). find (". Console-panel"). slidetoggle (function () {
that._renderConsolepanel ("0");
});
});
$ .each (this.getopts () ["result"], function (i, item) {
if (that._isdisplaymax (i + 1)) {
that._saveorupDatestatus (item, "1");
}
kalau tidak{
that._saveorupDatestatus (item, "2");
}
that._render (item);
});
if (! that._isdisplaymax (this.getopts () ["result"]. length)) {
this.getelem (). find (". judul .more-Mod"). fadein (function () {
$ (ini) .find (".
var root = $ (this) .next ();
root.empty ();
$ .each (that._getitemlistByStatus ("2"), function (i, data) {
$ ("<verv> </div>"). Teks (data ["Teks"])
.on ("klik", function () {
if (that._getitemlistByStatus ("1"). length <that.getopts () ["displaymax"]) {
itu.getelem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
that._saveorupDatestatus (data, "1");
});
}
kalau tidak{
Peringatan ("Tidak ada modul yang dapat ditambahkan, saat ini angka maksimum!");
}
})
.Appendto (root);
});
root.toggle ();
});
});
}
this.getelem (). find (". title .items div")
.eq (0)
.trigger ("klik"); // Asumsikan bahwa harus ada satu, jika tidak plug-in tidak akan masuk akal!
};
tabproto._render = function (data) {
var itu = ini;
var item = $ ("<div> </div>"). Teks (data ["text"]). appendTo (this.getelem (). find (". title .items")));
data ["index"] = item.index ();
item.on ("klik", function () {
that._setCurrent ($ (ini) .index ());
itu._getContent (data ["url"]). Done (function (hasil) {
that._setContent (hasil);
})
.fail (function () {
melempar kesalahan baru ("Kesalahan bersih!");
});
})
.data ("item", data);
if ("2" == data ["status"]) {
item.hide ();
}
if ("1" == data ["showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("klik", function () {
if (win.confirm ("Apakah item ini dihapus?")) {
that._deleteItem (item);
mengembalikan false; // Hentikan gelembung
}
})
.Appendto (item);
}
};
ui.createTab = function (elem, opts) {
var tab = tab baru (elem, opts);
tab.init ();
Tab Return;
};
}) (jQuery);
(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.