1. การวิเคราะห์เปิด
วันนี้เราพูดอะไรในบทความนี้? ฮิฮิเฮ จากนั้นเราสร้างข้อบกพร่องใหม่ในบทความก่อนหน้าและวิเคราะห์พวกเขาทีละขั้นตอนในวิธีที่ง่ายต่อการทำความเข้าใจเพื่อให้ทุกคนสามารถปรับปรุงทีละขั้นตอน ไร้สาระน้อยลงไปถึงจุด มาตรวจสอบก่อนหน้านี้ก่อนหน้านี้
รหัสชิ้นส่วน JS มีดังนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น itemSelector (elem, opts) {
this.elem = elem;
this.opts = opts;
-
var isproto = itemselector.prototype;
isproto.getElem = function () {
คืนสิ่งนี้ Elem;
-
isproto.getOpts = function () {
คืนสิ่งนี้
-
/* ข้อมูล manip*/
isProto._SetCurrent = function (ปัจจุบัน) {
this.getOpts () ["current"] = ปัจจุบัน;
-
isproto.getCurrentValue = function (ปัจจุบัน) {
ส่งคืนสิ่งนี้ getOpts () ["ปัจจุบัน"];
-
/* ข้อมูล manip*/
isproto.init = function () {
var that = this;
this.getOpts () ["current"] = null; // เคอร์เซอร์ข้อมูล
this._setItemValue (this.getOpts () ["currentText"]);
var itemselem = that.getElem () ค้นหา (". เนื้อหา. items");
this.getElem () ค้นหา (". title div"). on ("คลิก", function () {
itemselem.toggle ();
-
this.getElem (). ค้นหา (". span title"). on ("คลิก", function () {
itemselem.toggle ();
-
$ .Each (this.getOpts () ["รายการ"], ฟังก์ชั่น (i, รายการ) {
รายการ ["id"] = (วันที่ใหม่ (). getTime ()). toString ();
นั่น _render (รายการ);
-
-
isproto._setItemValue = function (value) {
this.getElem (). find (". title div"). ข้อความ (ค่า)
-
isproto._render = function (item) {
var that = this;
var itemelem = $ ("<div> </div>")
.Text (รายการ ["ข้อความ"])
.attr ("id", รายการ ["id"]);
if ("0" == รายการ ["ปิดใช้งาน"]) {
itemelem.on ("คลิก", function () {
var onChange = That.getOpts () ["เปลี่ยน"];
that.getElem (). ค้นหา (". เนื้อหา. items"). ซ่อน ();
นั่น _SetItemValue (รายการ ["ข้อความ"]);
นั่น _SetCurrent (รายการ);
onchange && onchange (รายการ);
-
.MouseOver (function () {
$ (นี่) .AddClass ("item-hover");
-
.MouseOut (function () {
$ (นี่) .removeclass ("item-hover");
-
-
อื่น{
itemelem.css ("color", "#ccc") on ("คลิก", function () {
that.getElem (). ค้นหา (". เนื้อหา. items"). ซ่อน ();
นั่น _SetItemValue (รายการ ["ข้อความ"]);
-
-
itemelem.appendto (this.getelem (). ค้นหา (". เนื้อหา. items")));
-
เอฟเฟกต์แสดงในรูปด้านล่าง:
a) -------- สถานะที่ไม่สามารถใช้งานได้
b) ------ สถานะการดำเนินงาน
(ii) เปิดความคิดของคุณและสร้างใหม่
มันไม่ยากสำหรับคุณที่จะเห็นจากรหัสที่ได้รับการจัดระเบียบอย่างมีประสิทธิภาพในลักษณะเชิงวัตถุผ่านลักษณะทางไวยากรณ์ใน "JS" ซึ่งดีกว่าวิธีการขององค์กรที่ใช้กระบวนการหลวม แต่คุณจะยังพบข้อบกพร่องมากมาย
(1) มีการทำซ้ำมากเกินไป
(2) การแบ่งความรับผิดชอบไม่ชัดเจน
(3) กระบวนการยังไม่สมบูรณ์
เราได้ทำการปรับแต่งอย่างมีประสิทธิภาพตามจุดข้างต้น ก่อนอื่นเราจำเป็นต้องจัดเรียงข้อกำหนดของส่วนประกอบนี้และคะแนนการทำงานมีดังนี้:
(1) เริ่มต้นองค์ประกอบการกำหนดค่า
การคัดลอกรหัสมีดังนี้:
$ (function () {
var itemSelector = new itemSelector ($ ("#item-selector"), {
CurrentText: "โปรดเลือกรายการ"
รายการ: [
-
ข้อความ: "JavaScript",
ค่า: "JS",
ปิดใช้งาน: "1"
-
-
ข้อความ: "CSS",
ค่า: "CSS",
ปิดใช้งาน: "0"
-
-
ข้อความ: "html",
ค่า: "html",
ปิดใช้งาน: "0"
-
-
-
itemSelector.init ();
-
รหัสนี้ชัดเจนมากและไม่จำเป็นต้องมีการแก้ไขใด ๆ แต่คุณสามารถขยายฟังก์ชั่นตามการกำหนดค่าข้างต้นเช่นการเพิ่มรายการการกำหนดค่า "โหมด" เพื่อรองรับตัวเลือกหลายตัวเลือก ตัวอย่างเช่น: "โหมดตรวจสอบช่องทำเครื่องหมาย"
ถัดไปคือการทำตรรกะการเริ่มต้นให้เสร็จดังต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
isproto.init = function () {
var that = this;
this.getOpts () ["current"] = null; // เคอร์เซอร์ข้อมูล
this._setItemValue (this.getOpts () ["currentText"]);
var itemselem = that.getElem () ค้นหา (". เนื้อหา. items");
this.getElem () ค้นหา (". title div"). on ("คลิก", function () {
itemselem.toggle ();
-
this.getElem (). ค้นหา (". span title"). on ("คลิก", function () {
itemselem.toggle ();
-
$ .Each (this.getOpts () ["รายการ"], ฟังก์ชั่น (i, รายการ) {
รายการ ["id"] = (วันที่ใหม่ (). getTime ()). toString ();
นั่น _render (รายการ);
-
-
รหัสนี้มีปัญหามากมายความรับผิดชอบที่ไม่ชัดเจนและตรรกะการเริ่มต้นมีการใช้งานอย่างละเอียดของจุดฟังก์ชั่น
ดูรหัสการแสดงผลต่อไป:
การคัดลอกรหัสมีดังนี้:
isproto._render = function (item) {
var that = this;
var itemelem = $ ("<div> </div>")
.Text (รายการ ["ข้อความ"])
.attr ("id", รายการ ["id"]);
if ("0" == รายการ ["ปิดใช้งาน"]) {
itemelem.on ("คลิก", function () {
var onChange = That.getOpts () ["เปลี่ยน"];
that.getElem (). ค้นหา (". เนื้อหา. items"). ซ่อน ();
นั่น _SetItemValue (รายการ ["ข้อความ"]);
นั่น _SetCurrent (รายการ);
onchange && onchange (รายการ);
-
.MouseOver (function () {
$ (นี่) .AddClass ("item-hover");
-
.MouseOut (function () {
$ (นี่) .removeclass ("item-hover");
-
-
อื่น{
itemelem.css ("color", "#ccc") on ("คลิก", function () {
that.getElem (). ค้นหา (". เนื้อหา. items"). ซ่อน ();
นั่น _SetItemValue (รายการ ["ข้อความ"]);
-
-
itemelem.appendto (this.getelem (). ค้นหา (". เนื้อหา. items")));
-
ปัญหาชัดเจน พบว่ามีการดำเนินการที่ทำซ้ำได้และควรดำเนินการเป็นนามธรรมที่สมเหตุสมผลและมีวัตถุประสงค์ในการใช้ซ้ำ
กระบวนการก่อสร้างทั้งหมดรวมถึงการเริ่มต้นการแสดงผล (การเชื่อมโยงเหตุการณ์) และวิธีการใช้งานข้อมูลที่เกี่ยวข้องและวิธีการเสริมของการดำเนินงาน DOM
เพื่อสรุปหลังจากการเรียงลำดับง่าย ๆ เราควรกำหนดวัตถุประสงค์การปฏิบัติงานของฟังก์ชั่นและการกำหนดงานของสายหลักของกระบวนการซึ่งแต่ละอันจะรับผิดชอบต่อความรับผิดชอบของตนเอง
ดังนั้นจุดประสงค์ของการสร้างใหม่ของเราจึงชัดเจนมาก! มันคือจุดฟังก์ชั่นที่เป็นนามธรรมและแบ่งความรับผิดชอบด้วยการแบ่งที่เป็นมิตรดังนั้นเราจะบรรลุสิ่งนั้นได้อย่างไร?
ขั้นตอนแรกคือการสร้างฟังก์ชั่นกระบวนการ: (อินเตอร์เฟสวิธีการ)
การคัดลอกรหัสมีดังนี้:
isproto.init = function () {
// ใส่รหัสที่นี่!
-
isproto._render = function () {
// ใส่รหัสที่นี่!
-
ส่วนที่ 2: สร้างอินเทอร์เฟซวิธีนามธรรม:
การคัดลอกรหัสมีดังนี้:
isproto._fnitemselectordelegateHandler = function () {
// ใส่รหัสที่นี่!
-
isproto._fntriggerhandler = function () {
// ใส่รหัสที่นี่!
-
isproto._addorremoveClass = function () {
// ใส่รหัสที่นี่!
-
ขั้นตอนที่สามคือการสร้างอินเทอร์เฟซการทำงานของข้อมูล:
การคัดลอกรหัสมีดังนี้:
isProto._SetCurrent = function () {
// ใส่รหัสที่นี่!
-
isproto._getCurrent = function () {
// ใส่รหัสที่นี่!
-
นอกจากนี้ยังมีการอ้างอิงถึงซอร์สโค้ดที่สมบูรณ์ด้านล่างซึ่งเป็นเพียงแนวคิดที่กล่าวถึงที่นี่
(iii) รหัสที่สมบูรณ์สำหรับการเรียนรู้รหัสนี้ได้รับการทดสอบ
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น itemSelector (elem, opts) {
this.elem = elem;
this.opts = opts;
this.current = -1; // เคอร์เซอร์ข้อมูล
-
var isproto = itemselector.prototype;
/* getter api*/
isproto.getElem = function () {
คืนสิ่งนี้ Elem;
-
isproto.getOpts = function () {
คืนสิ่งนี้
-
isproto._getCurrent = function () {
ส่งคืนสิ่งนี้กระแส;
-
/* getter api*/
/* ข้อมูล manip*/
isProto._SetCurrent = function (ปัจจุบัน) {
this.current = ปัจจุบัน;
-
isProto._SetItemText = ฟังก์ชั่น (ข้อความ) {
this.getElem (). find (". title div"). ข้อความ (ข้อความ);
-
/* ข้อมูล manip*/
/ * อัปเดตเมื่อปี 2015 1/31 23:38 */
isproto._fntriggerhandler = ฟังก์ชั่น (ดัชนี, ข้อความ, ค่า) {
if (this._isdisabled (value)) {
ดัชนี = -1;
text = this.getOpts () ["currentText"];
-
this._setItemtext (ข้อความ);
this._SetCurrent (ดัชนี);
this.getElem (). ค้นหา (". เนื้อหา. items"). ซ่อน ();
-
isproto._addorremoveclass = function (elem, classname, addis) {
if (addis) {
elem.addclass (classname);
-
อื่น{
elem.removeclass (classname);
-
-
isproto._fnitemselectordelegateHandler = function () {
var that = this;
this.getElem (). on ("คลิก", "[data-toggle]", function () {
that.getElem (). ค้นหา (". เนื้อหา. items"). toggle ();
-
-
isproto._isdisabled = function (value) {
return ("1" == ค่า)? จริง: เท็จ;
-
/ * อัปเดตเมื่อปี 2015 1/31 23:38 */
isproto.init = function () {
var that = this;
this._fnitemselectordelegateHandler ();
$ .Each (this.getOpts () ["รายการ"], ฟังก์ชั่น (i, รายการ) {
รายการ ["ดัชนี"] = i;
นั่น _render (รายการ);
-
this._fntiggerhandler (this._getCurrent (), this.getOpts () ["currentText"], "1");
-
isproto._render = function (item) {
var that = this;
var itemelem = $ ("<div> </div>") ข้อความ (รายการ ["ข้อความ"]). attr ("id", รายการ ["ดัชนี"]);
var ActivEclass = ("0" == รายการ ["ปิดใช้งาน"])? "รายการฮอร์": "โฮเวอร์-ดิดรายการ";
itemelem.on ("คลิก", function () {
that._fntiggerhandler (รายการ ["ดัชนี"], รายการ ["ข้อความ"], รายการ ["ปิดใช้งาน"]);
-
.MouseOver (function () {
That._addorremoveclass ($ (นี่), Activeclass, TRUE);
-
.MouseOut (function () {
That._addorremoveclass ($ (นี่), Activeclass, False);
-
itemelem.appendto (this.getelem (). ค้นหา (". เนื้อหา. items")));
-
(iv), สรุปสุดท้าย
(1) การวิเคราะห์ที่สมเหตุสมผลของข้อกำหนดการทำงานในวิธีคิดเชิงวัตถุ
(2) จัดระเบียบตรรกะปลั๊กอินของเราในชั้นเรียน
(3) สร้างตัวอย่างข้างต้นใหม่อย่างต่อเนื่องวิธีการสร้างใหม่อย่างสมเหตุสมผล? อย่าออกแบบมากเกินไปให้สบายใจ วิธีที่แนะนำคือการรวมการออกแบบกระบวนการเข้ากับการออกแบบการคิดเชิงวัตถุ
(4) บทความต่อไปนี้จะขยายฟังก์ชั่นที่เกี่ยวข้องเช่นคุณสมบัติ "โหมด" เมื่อมันเป็น "1" จะรองรับโหมดทำเครื่องหมายหลายแบบเลือกหลายโหมด แต่ตอนนี้มันเป็นเพียงโหมดดรอปดาวน์เริ่มต้น
ดูบทความของฉันมันดีกว่ารหัสก่อนหน้านี้มากหรือไม่? เพื่อนควรคิดและทำโครงการด้วยตัวเองมากขึ้นและพยายามทำให้รหัสของตัวเองมีเหตุผลมากขึ้น