1. Analisis pembukaan
Apa yang kita katakan dalam artikel ini hari ini? Hehehehe. Kami kemudian merekonstruksi kekurangan dalam artikel sebelumnya dan menganalisisnya langkah demi langkah dengan cara yang mudah dipahami, sehingga setiap orang dapat meningkatkan langkah demi langkah. Lebih sedikit omong kosong, sampai ke intinya. Mari kita tinjau pertama yang sebelumnya
Kode bagian JS adalah sebagai berikut:
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")));
};
Efeknya ditunjukkan pada gambar di bawah ini:
A) -------- Negara yang tidak dapat dioperasikan
b) ------ keadaan yang dapat dioperasikan
(Ii) Buka ide -ide Anda dan rekonstruksi
Tidak sulit bagi Anda untuk melihat dari kode bahwa itu telah diatur secara efektif dengan cara yang berorientasi objek melalui karakteristik sintaks dalam "JS", yang jauh lebih baik daripada metode organisasi berbasis proses yang longgar, tetapi Anda masih akan menemukan banyak kekurangan.
(1) Ada terlalu banyak pengulangan di dalamnya
(2) Pembagian tanggung jawab tidak jelas
(3) Prosesnya tidak lengkap
Kami telah secara efektif refactored berdasarkan poin di atas. Pertama, kita perlu memilah persyaratan komponen ini, dan titik -titik fungsionalnya adalah sebagai berikut:
(1) Inisialisasi komponen konfigurasi
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"
}
],
});
itemselector.init ();
});
Kode ini sangat jelas dan tidak memerlukan modifikasi apa pun, tetapi Anda dapat memperluas fungsi berdasarkan konfigurasi di atas, seperti menambahkan item konfigurasi "mode" untuk mendukung beberapa opsi. Misalnya: "Mode Periksa Kotak Centang".
Berikutnya adalah menyelesaikan logika inisialisasi, sebagai berikut:
Salinan kode adalah sebagai berikut:
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);
});
};
Kode ini memiliki banyak masalah, tanggung jawab yang tidak jelas, dan logika inisialisasi berisi implementasi rinci titik fungsional.
Terus lihat kode rendering:
Salinan kode adalah sebagai berikut:
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")));
};
Masalahnya jelas. Operasi yang dapat diulang telah ditemukan, dan abstraksi yang wajar harus dilakukan, dan tujuan penggunaan kembali telah tercapai.
Seluruh proses konstruksi mencakup inisialisasi, rendering (pengikatan peristiwa), dan metode operasi data terkait dan metode tambahan operasi DOM.
Singkatnya, setelah penyortiran sederhana, kita harus menetapkan tujuan operasional dari fungsi dan penugasan tugas dari jalur utama proses, yang masing -masing akan bertanggung jawab atas tanggung jawabnya sendiri.
Jadi tujuan rekonstruksi kami sangat jelas, benar! Ini untuk abstrak titik fungsional dan membagi tanggung jawab dengan divisi yang ramah, jadi bagaimana kita mencapainya?
Langkah pertama adalah menetapkan fungsi proses: (antarmuka metode)
Salinan kode adalah sebagai berikut:
IsProto.init = function () {
// letakkan kode Anda di sini!
};
IsProto._render = function () {
// letakkan kode Anda di sini!
};
Bagian 2: Membangun Antarmuka Metode Abstrak:
Salinan kode adalah sebagai berikut:
Isproto._fnitemselectordelegateHandler = function () {
// letakkan kode Anda di sini!
};
IsProto._fntriggerHandler = function () {
// letakkan kode Anda di sini!
};
IsProto._addorremoveclass = function () {
// letakkan kode Anda di sini!
};
Langkah ketiga adalah membuat antarmuka operasi data:
Salinan kode adalah sebagai berikut:
IsProto._setCurrent = function () {
// letakkan kode Anda di sini!
};
IsProto._getCurrent = function () {
// letakkan kode Anda di sini!
};
Ada juga beberapa referensi untuk kode sumber lengkap di bawah ini, yang hanya ide yang disebutkan di sini.
(Iii), kode lengkapnya adalah untuk belajar, kode ini telah diuji
Salinan kode adalah sebagai berikut:
fungsi itemselector (elem, opts) {
this.elem = elem;
this.opts = opts;
this.current = -1; // kursor data
};
var isProto = itemselector.prototype;
/* Getter API*/
IsProto.getElem = function () {
kembalikan ini.elem;
};
IsProto.getOpts = function () {
kembalikan ini.
};
IsProto._getCurrent = function () {
kembalikan ini.Current;
};
/* Getter API*/
/* manip data*/
IsProto._setCurrent = function (saat ini) {
this.current = arus;
};
IsProto._setitemText = function (text) {
this.getelem (). find (". judul div"). Teks (teks);
};
/* manip data*/
/ * Pembaruan pada 2015 1/31 23:38 */
Isproto._fntriggerHandler = function (index, text, value) {
if (this._isDisabled (value)) {
indeks = -1;
text = this.getOpts () ["currentText"];
}
this._setitemText (teks);
this._setCurrent (index);
this.getelem (). find (". Content .items"). hide ();
};
Isproto._addorremoveclass = function (elem, className, addis) {
if (addis) {
elem.addclass (classname);
}
kalau tidak{
elem.removeclass (className);
}
};
Isproto._fnitemselectordelegateHandler = function () {
var itu = ini;
this.geteLem (). on ("click", "[Data-boggle]", function () {
itu.getelem (). find (". Content .items"). toggle ();
});
};
IsProto._isDisabled = function (value) {
return ("1" == nilai)? Benar: false;
};
/ * Pembaruan pada 2015 1/31 23:38 */
IsProto.init = function () {
var itu = ini;
this._fnitemselectordelegateHandler ();
$ .each (this.getopts () ["item"], function (i, item) {
item ["index"] = i;
that._render (item);
});
this._fntriggerHandler (this._getCurrent (), this.getopts () ["currentText"], "1");
};
IsProto._render = function (item) {
var itu = ini;
var itemElem = $ ("<div> </div>"). Teks (item ["text"]). attr ("id", item ["index"]);
var activeClass = ("0" == item ["Disabled"])? "item-hover": "item-disabled-hover";
itemelem.on ("klik", function () {
that._fntriggerHandler (item ["index"], item ["text"], item ["Disabled"]);
})
.mouseover (function () {
itu._addorremoveclass ($ (ini), ActiveClass, true);
})
.mouseout (function () {
that._addorremoveclass ($ (ini), ActiveClass, false);
});
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.
Melihat artikel saya, apakah jauh lebih baik dari kode sebelumnya? Teman harus memikirkan dan melakukan lebih banyak proyek sendiri dan mencoba membuat kode mereka sendiri lebih masuk akal.