1. การวิเคราะห์เปิด
สวัสดีทุกคน! ในสองบทความแรกเราส่วนใหญ่พูดถึงวิธีการพัฒนาปลั๊กอินใน "JQuery's Way" และวิธีการออกแบบปลั๊กอินโดยการรวมการออกแบบกระบวนการเข้ากับการออกแบบการคิดเชิงวัตถุ ทั้งสองวิธีมีข้อดีและข้อเสียของพวกเขาในการเรียนรู้จากจุดแข็งและจุดอ่อนของพวกเขา ฮิฮิเรามาพูดเรื่องไร้สาระน้อยลงและไปถึงจุด โดยตรงกับการเรนเดอร์จริง:
คุณสามารถดูได้ นี่คือปลั๊กอินเมนูแบบเลื่อนลง ในการพัฒนาประจำวันของเราบางครั้งระบบอาจทำให้เรารู้สึกว่ามันไม่ได้สวยงามมากและมีฟังก์ชั่น จำกัด ทำให้ผู้ใช้
รูปแบบประสบการณ์และการโต้ตอบของผู้ใช้ไม่ค่อยดีดังนั้นวันนี้ฉันจำลอง hehehehehe มาวิเคราะห์โดยละเอียดด้านล่าง
(ii) การวิเคราะห์กรณี
(1) ก่อนอื่นให้พิจารณาว่าปลั๊กอินนี้ทำอะไร มาดูวิธีการโทรของปลั๊กอินและคำอธิบายพารามิเตอร์การกำหนดค่า รหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
$ (function () {
var itemSelector = new itemSelector ($ ("#item-selector"), {
CurrentText: "โปรดเลือกรายการ"
รายการ: [
-
ข้อความ: "JavaScript",
ค่า: "JS",
ปิดใช้งาน: "1"
-
-
ข้อความ: "CSS",
ค่า: "CSS",
ปิดใช้งาน: "0"
-
-
ข้อความ: "html",
ค่า: "html",
ปิดใช้งาน: "0"
-
-
โหมด: "0", // เมื่อ "1" รองรับช่องทำเครื่องหมายหลายโหมดการเลือกโหมด
เปลี่ยน: ฟังก์ชั่น (ค่า) {
// ใส่รหัสของคุณที่นี่
-
-
itemSelector.init ();
settimeout (function () {
console.log (itemselector.getCurrentValue ()); // ทดสอบเพื่อรับรายการที่เลือกก่อน
}, 2000);
"VAR itemSelector = ใหม่ itemSelector ()" มีสองพารามิเตอร์ อย่างแรกคือวัตถุ DOM Node และตัวเลือกที่สองคือตัวเลือกพารามิเตอร์ปลั๊กอิน "CurrentText" หมายถึงคำอธิบายข้อความของพื้นที่แสดงข้อความในปลั๊กอิน "itemselector"
"รายการ" เป็นอาร์เรย์ที่มีคุณสมบัติของรายการ "itemlector" รวมถึงคำอธิบายข้อความค่าตัวเลือก "ปิดใช้งาน" แสดงถึงความพร้อมของรายการรายการ 0 แสดงถึงการแสดงผลและ 1 แสดงถึงไม่แสดง
"เปลี่ยน" หมายถึงฟังก์ชั่นการเรียกกลับการดำเนินการเมื่อเลือกและข้อมูลตัวเลือกจะถูกส่งกลับในรูปแบบของพารามิเตอร์
(2) ฟังก์ชั่นเกี่ยวข้องกับอะไร?
การเรนเดอร์ที่สามารถแสดงได้มีดังนี้:
การเรนเดอร์ที่ไม่สามารถแสดงได้มีดังนี้:
ความแตกต่างระหว่างทั้งสองคือ: ข้อมูลสถานะที่ไม่ได้รับการเปิดเผยจะไม่ถูกส่งคืนและจะไม่มีผลเมื่อลอยขึ้น
3) รหัสที่สมบูรณ์ สำหรับการเรียนรู้ รหัสนี้ได้รับการทดสอบรวมถึงโครงสร้างไดเรกทอรีและไฟล์ที่เกี่ยวข้อง
(1), html
การคัดลอกรหัสมีดังนี้:
<body>
<div>
Big Bear {{bb}}-dxj ui ------ itemSelector
</div>
<div>
<div id = "รายการเลือก">
<div>
<div> </div> <span> ↓ </span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
(2), CSS
การคัดลอกรหัสมีดังนี้:
/ * รายการเลือก *//
#รายการเลือก {
มาร์จิ้น: 0 อัตโนมัติ;
ความกว้าง: 220px;
ล้น: ซ่อน;
ชายแดน: 2px Solid #CCC;
-
#item-selector .title {
ขอบด้านล่าง: 1px Solid #CCC;
ล้น: ซ่อน;
-
#item-selector .title div {
ความกว้าง: 190px;
ชายแดน: 0px;
สี:#999;
Font-Family: Arial;
ขนาดตัวอักษร: 14px;
ความสูง: 28px;
ความสูงของสาย: 28px;
ลอย: ซ้าย;
เคอร์เซอร์: ตัวชี้;
-
#item-selector .title span {
แสดง: บล็อก;
ความสูง: 30px;
ระดับความสูง: 30px;
ความกว้าง: 29px;
ลอย: ซ้าย;
TEXT-ALIGN: CENTER;
ชายแดนซ้าย: 1px Solid #CCC;
เคอร์เซอร์: ตัวชี้;
-
#item-selector .content {
ความกว้าง: 220px;
ล้น: ซ่อน;
-
#item-selector .content .items {
ล้น: ซ่อน;
-
#item-selector .content .items div {
Padding-Left: 20px;
ความกว้าง: 200px;
ความสูง: 32px;
ความสูงของสาย: 32px;
Font-Family: "Microsoft Yahei";
ขนาดตัวอักษร: 14px;
Font-Weight: ตัวหนา;
เคอร์เซอร์: ตัวชี้;
-
.item-hover {
ความเป็นมา:#3385FF;
สี: #FFFF;
-
(3), "itemselector.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")));
-
(iv), สรุปสุดท้าย
(1) การวิเคราะห์ที่สมเหตุสมผลของข้อกำหนดการทำงานในวิธีคิดเชิงวัตถุ
(2) จัดระเบียบตรรกะปลั๊กอินของเราในชั้นเรียน
(3) สร้างตัวอย่างข้างต้นใหม่อย่างต่อเนื่องวิธีการสร้างใหม่อย่างสมเหตุสมผล? อย่าออกแบบมากเกินไปให้สบายใจ วิธีที่แนะนำคือการรวมการออกแบบกระบวนการเข้ากับการออกแบบการคิดเชิงวัตถุ
(4) บทความต่อไปนี้จะขยายฟังก์ชั่นที่เกี่ยวข้องเช่นคุณสมบัติ "โหมด" เมื่อมันเป็น "1" จะรองรับโหมดทำเครื่องหมายหลายแบบเลือกหลายโหมด แต่ตอนนี้มันเป็นเพียงโหมดดรอปดาวน์เริ่มต้น
บทความนี้อยู่ที่นี่ก่อนและเราจะพูดคุยกันในภายหลัง ฉันหวังว่าคุณจะได้เพลิดเพลินกับบทความชุดนี้