1. การวิเคราะห์เปิด
ในบทความสองบทความก่อนหน้านี้เราได้พูดคุยเกี่ยวกับวิธีการพัฒนาปลั๊กอินใน jQuery และวิธีการรวมการออกแบบกระบวนการเข้ากับการออกแบบการคิดเชิงวัตถุ
วิธีการออกแบบปลั๊กอิน? ทั้งสองวิธีมีข้อดีและข้อเสียของตนเองในการเรียนรู้จากจุดแข็งและจุดอ่อนของกันและกัน บทความชุดนี้มุ่งเน้นการเรียนรู้และทุกคนตัดสินใจวิธีใช้สถานการณ์เฉพาะ ดังนั้นเริ่มต้นจากบทความนี้วันนี้เราจะใช้ตัวอย่างเพื่อพัฒนาไลบรารีปลั๊กอินของเราเองจากตื้นจนถึงลึก hehehe พูดไร้สาระน้อยลงไปถึงจุด โดยตรงกับการเรนเดอร์จริง:
คุณสามารถดูได้ นี่คือปลั๊กอินแท็บ เราอาจเจอมันเมื่อเราสร้างแอปพลิเคชันหน้าเดียว ("Spa") ทุกวัน มาเป็นตัวอย่างของวันนี้กันเถอะ
เราสร้างระบบตามโครงสร้าง BS ซึ่งจะประกอบด้วยหลายโมดูลซึ่งเป็นส่วนประกอบทั้งหมดของระบบการก่อสร้าง ผ่านปลั๊กอินนี้เราสามารถจัดการโมดูลของเราได้อย่างมีประสิทธิภาพ
มาวิเคราะห์แบบฟอร์มประสบการณ์และการโต้ตอบของผู้ใช้โดยละเอียดด้านล่าง
(ii) การวิเคราะห์กรณี
(1) ก่อนอื่นให้พิจารณาว่าปลั๊กอินนี้ทำอะไร มาดูวิธีการโทรของปลั๊กอินและคำอธิบายพารามิเตอร์การกำหนดค่า รหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
bigbear.ui.createTab ($ ("#tab"), {
ButtonText: "เพิ่มโมดูล"
ผลลัพธ์: [
-
ข้อความ: "Wizard Prompt",
URL: "help.html",
Showclose: "0",
สถานะ: "1"
-
-
ข้อความ: "ข้อมูลนักเรียน",
URL: "info.html"
Showclose: "1",
สถานะ: "1"
-
-
ข้อความ: "การจำแนกประเภทนักเรียน",
URL: "category.html",
Showclose: "1",
สถานะ: "1"
-
-
ข้อความ: "Big Bear {{bb}}"
URL: "bb.html"
Showclose: "1",
สถานะ: "1"
-
-
ข้อความ: "โมดูลทดสอบเบต้า"
URL: "test.html"
Showclose: "1",
สถานะ: "1"
-
-
-
"bigbear.ui.createTab" มีสองพารามิเตอร์ อย่างแรกคือวัตถุ DOM Node และตัวเลือกที่สองคือตัวเลือกพารามิเตอร์ปลั๊กอิน "buttontext" หมายถึงคำอธิบายข้อความของปุ่มการทำงานในปลั๊กอิน "แท็บ"
"ผลลัพธ์" เป็นอาร์เรย์ที่มีคุณสมบัติของรายการแท็บรวมถึงคำอธิบายข้อความ URL ที่ใช้เพื่อขอเมื่อคลิกรายการแท็บ "Showclose" แสดงว่าตัวเลือกแท็บแสดงปุ่มปิดหรือไม่
"สถานะ" หมายถึงสถานะของตัวเลือกซึ่งเป็นสถานะโดยค่าเริ่มต้นและอาจมีสถานะปิดซึ่งแสดงเป็น: 1-open และ 0-open ตามลำดับ
(2) ฟังก์ชั่นเกี่ยวข้องกับอะไร?
ผ่านพารามิเตอร์เสริมรายการตัวเลือกที่เกี่ยวข้องจะถูกสร้างขึ้นแบบไดนามิกดังนี้:
การคัดลอกรหัสมีดังนี้:
bigbear.ui.createTab ($ ("#tab"), {
ButtonText: "เพิ่มโมดูล"
ผลลัพธ์: [
-
ข้อความ: "การวิเคราะห์ซอร์สโค้ด jQuery",
URL: "help.html",
Showclose: "0",
สถานะ: "1"
-
-
ข้อความ: "Big Bear {{bb}}}"
URL: "bb.html"
Showclose: "1",
สถานะ: "1"
-
-
-
เอฟเฟกต์มีดังนี้:
คุณสามารถเพิ่มและลบตัวเลือกรายการได้อย่างอิสระดังที่แสดงในเอฟเฟกต์ต่อไปนี้:
ภาพด้านบนแสดงหนึ่งในสถานการณ์เหล่านี้ เมื่อไม่มีโมดูลข้อความจะได้รับแจ้ง
นี่เป็นกรณีที่สองและสิ่งที่ถูกลบก่อนหน้านี้สามารถกู้คืนได้
(iii), รหัสที่สมบูรณ์สำหรับการเรียนรู้ รหัสนี้ได้รับการทดสอบรวมถึงโครงสร้างไดเรกทอรีและไฟล์ที่เกี่ยวข้อง
(1), html
การคัดลอกรหัสมีดังนี้:
<body>
<div>
Big Bear {{bb}}-dxj ui ------ แท็บ
</div>
<div>
<div id = "tab">
<div>
<div>
+ เพิ่มข้อมูลนักเรียน
</div>
<div>
<!-<div> <pan> x </span> หน้าต้อนรับ </div>
<div> <pan> x </span> การจัดการผู้ใช้ </div>
<div> <pan> x </span> bigbear </div>->
</div>
</div>
<div>
</div>
<div>
<!-<div>
<div> <pan> ชื่อ: </span> <อินพุต type = "text"/> </div>
<div> <span> หมายเหตุ: </span> <Textarea> </textarea> </div>
</div> <div> <input type = "button" value = "save"/> </div>
-
</div>
</div>
</div>
</body>
(2) รหัสไฟล์ CSS
การคัดลอกรหัสมีดังนี้:
.dxj-ui-hd {
Padding: 0px;
มาร์จิ้น: 0 อัตโนมัติ;
ขอบด้านบน: 30px;
ความกว้าง: 780px;
ความสูง: 60px;
ความสูงของสาย: 60px;
ความเป็นมา: #3385FF;
สี: #FFFF;
Font-Family: "Microsoft Yahei";
ขนาดตัวอักษร: 28px;
TEXT-ALIGN: CENTER;
Font-Weight: ตัวหนา;
-
.dxj-ui-bd {
Padding: 0px;
มาร์จิ้น: 0 อัตโนมัติ;
ความกว้าง: 778px;
Padding-Top: 30px;
การรองลงด้านล่าง: 30px;
ล้น: ซ่อน;
ชายแดน: 1px Solid #3385FF;
-
.dxj-ui-bd #tab {
Padding: 0px;
มาร์จิ้น: 0 อัตโนมัติ;
ความกว้าง: 720px;
ล้น: ซ่อน;
-
.dxj-ui-bd #tab .title {
ความกว้าง: 720px;
ล้น: ซ่อน;
ขอบด้านล่าง: 2px Solid #3385FF;
-
.dxj-ui-bd #tab .title .adder {
ความกว้าง: 160px;
ความสูง: 32px;
ความสูงของสาย: 32px;
ความเป็นมา: #DC143C;
สี: #FFFF;
Font-Family: "Microsoft Yahei";
ขนาดตัวอักษร: 14px;
TEXT-ALIGN: CENTER;
Font-Weight: ตัวหนา;
ลอย: ซ้าย;
เคอร์เซอร์: ตัวชี้;
-
.DXJ-UI-BD #TAB .TITLE .ITEMS {
ความสูง: 32px;
ขอบซ้าย: 20px;
ความกว้าง: 540px;
ล้น: ซ่อน;
ลอย: ซ้าย;
-
.DXJ-UI-BD #TAB .TITLE .ITEMS DIV {
Padding: 0px;
ขอบซ้าย: 10px;
ความกว้าง: 96px;
ความสูง: 32px;
ความสูงของสาย: 32px;
ความเป็นมา: #3385FF;
สี: #FFFF;
Font-Family: Arial;
ขนาดตัวอักษร: 12px;
TEXT-ALIGN: CENTER;
ตำแหน่ง: ญาติ;
ลอย: ซ้าย;
เคอร์เซอร์: ตัวชี้;
-
.dxj-ui-bd #tab .title .items div span.del {
ความกว้าง: 16px;
ความสูง: 16px;
ความสูงของสาย: 16px;
แสดง: บล็อก;
ความเป็นมา: #DC143C;
ตำแหน่ง: สัมบูรณ์;
ขวา: 0;
ด้านบน: 0;
เคอร์เซอร์: ตัวชี้;
-
.dxj-ui-bd #tab .content {
ความกว้าง: 716px;
Padding-Top: 30px;
ล้น: ซ่อน;
ชายแดน: 2px Solid #3385FF;
ชายแดนด้านบน: 0px;
ต่ำสุด: 130px;
TEXT-ALIGN: CENTER;
-
.DXJ-UI-BD #TAB. ตารางต่อม. {
มาร์จิ้น: 0 อัตโนมัติ;
-
.DXJ-UI-BD #TAB .CONTENT DIV.C {
Padding-Top: 20px;
Padding-Left: 20px;
ความเป็นมา: #eee;
ความสูง: 140px;
-
.dxj-ui-bd #tab .content div.c .input-content {
ระยะขอบด้านบน: 10px;
Font-Family: Arial;
ขนาดตัวอักษร: 12px;
-
.DXJ-UI-BD #TAB .CONSOLE-PANEL {
ความกว้าง: 716px;
Padding-Top: 20px;
Padding-bottom: 20px;
ล้น: ซ่อน;
ชายแดน: 2px Solid #3385FF;
ชายแดนด้านบน: 0px;
ขอบด้านล่าง: 2px Solid #3385FF;
ความเป็นมา: #FFF;
แสดง: ไม่มี;
-
.คล่องแคล่ว {
Font-Weight: ตัวหนา;
-
(3) รหัส JS มีดังนี้:
การคัดลอกรหัสมีดังนี้:
$ (function () {
bigbear.ui.createTab ($ ("#tab"), {
ButtonText: "เพิ่มโมดูล"
ผลลัพธ์: [
-
ข้อความ: "Wizard Prompt",
URL: "help.html",
Showclose: "0",
สถานะ: "1"
-
-
ข้อความ: "ข้อมูลนักเรียน",
URL: "info.html"
Showclose: "1",
สถานะ: "1"
-
-
ข้อความ: "การจำแนกประเภทนักเรียน",
URL: "category.html",
Showclose: "1",
สถานะ: "1"
-
-
ข้อความ: "Big Bear {{bb}}"
URL: "bb.html"
Showclose: "1",
สถานะ: "1"
-
-
ข้อความ: "โมดูลทดสอบเบต้า"
URL: "test.html"
Showclose: "1",
สถานะ: "1"
-
-
-
-
(ฟังก์ชั่น ($) {
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;
tabproto._deleteitem = function (item) {
var that = this;
this.getElem (). find (". title .items div")
.eq (รายการ ["ดัชนี"])
.fadeout (function () {
That._resetContent ();
That._updatestatus (รายการ);
นั่น _triggerItem (รายการ ["ดัชนี"] + 1);
That.getElem (). find (". title .adder"). trigger ("คลิก");
-
-
tabproto._triggerItem = function (ถัดไป) {
var nextStatus = this._getStatus (ถัดไป);
รายการ var = this.getElem () ค้นหา (". ชื่อ. items div");
ถัดไป = items.eq (ถัดไป);
if (next.size () && "1" == nextstatus) {// โหนด DOM ที่ตามมามีอยู่จริง
next.trigger ("คลิก");
-
อื่น{
items.eq (0) .trigger ("คลิก");
-
-
tabproto._getStatus = ฟังก์ชั่น (ดัชนี) {
สถานะ var = "";
$ .Each (this.getOpts () ["result"], ฟังก์ชั่น (i, item) {
if (index == item ["index"]) {
สถานะ += รายการ ["สถานะ"];
กลับเท็จ;
-
-
สถานะการส่งคืน;
-
tabproto._updatestatus = function (item) {
สถานะ var = รายการ ["สถานะ"];
รายการ ["สถานะ"] = ("1" == สถานะ)? "0": "1";
-
tabproto.init = function () {
var that = this;
this.getElem (). ค้นหา (". ชื่อ. adder")
.Text (" +" + this.getOpts () ["buttonText"]))
.on ("คลิก", function () {
That._toggleconsolepanel (function () {
var root = That.getElem (). ค้นหา (". คอนโซล-แผง"). ว่าง ();
$ .Each (that.getOpts () ["result"], ฟังก์ชัน (i, item) {
if ("0" == รายการ ["สถานะ"]) {
var elem = $ ("<div style = 'float: left';> </div>")
.Data ("รายการ" รายการ)
.appendto (รูท);
$ ("<อินพุต Type = 'Radio' Name = 'AddMod' />").appendto(elem);
$ ("<span> </span>") ข้อความ (รายการ ["ข้อความ"]) ภาคผนวก (elem);
-
-
if (root.find ("div"). size ()) {
$ ("<อินพุต type = 'button' value = 'เพิ่มโมดูล' style = 'margin-left: 20px'/>")
.on ("คลิก", function () {
var data = root.find ("อินพุต [type = วิทยุ]: ตรวจสอบ"). parent (). data ("item");
That._updatestatus (ข้อมูล);
That.getElem (). find (". title .items div"). eq (ข้อมูล ["ดัชนี"]). fadein (). ทริกเกอร์ ("คลิก");
That.getElem (). find (". title .adder"). trigger ("คลิก");
-
.appendto (รูท);
-
อื่น{
root.text ("ยังไม่มีรายการที่จะเพิ่ม!");
-
-
-
$ .Each (this.getOpts () ["result"], ฟังก์ชั่น (i, item) {
รายการ ["ดัชนี"] = i;
นั่น _render (รายการ);
-
this.getElem (). find (". title .items div")
.eq (0)
.Trigger ("คลิก"); // สมมติว่าต้องมีหนึ่งมิฉะนั้นปลั๊กอินจะไม่สมเหตุสมผล!
-
tabproto._toggleconsolepanel = function (callback) {
this.getElem () ค้นหา (". คอนโซล-แผง") Slidetoggle (ฟังก์ชัน () {
$ .isfunction (โทรกลับ) && callback ();
-
-
tabproto._ResetContent = function () {
this.getElem (). ค้นหา (". เนื้อหา"). html ("");
-
tabproto._setContent = function (html) {
this.getElem (). ค้นหา (". เนื้อหา"). html (html);
-
tabproto._getContent = function (url) {
ส่งคืน $ .ajax ({
URL: URL
-
-
tabproto._render = function (data) {
var that = this;
var item = $ ("<div> </div>")
.Text (data ["text"])
.on ("คลิก", function () {
นั่น _SetCurrent (data ["index"]);
นั่น _getContent (data ["url"]). เสร็จแล้ว (ฟังก์ชั่น (ผลลัพธ์) {
นั่น _SetContent (ผลลัพธ์);
-
.Fail (function () {
โยนข้อผิดพลาดใหม่ ("ข้อผิดพลาดสุทธิ!");
-
-
.Appendto (this.getElem (). ค้นหา (". ชื่อ. items")));
if ("1" == data ["Showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("คลิก", function () {
ถ้า (win.confirm ("รายการนี้ถูกลบหรือไม่")) {
That._deleteItem (ข้อมูล);
กลับเท็จ; // หยุดฟองสบู่
-
-
.appendto (รายการ);
-
-
tabproto._setCurrent = function (ดัชนี) {
รายการ var = this.getElem (). ค้นหา (". ชื่อ.
items.eq (ดัชนี) .addclass ("ใช้งาน");
เนื้อหา var = this.getElem () ค้นหา (". เนื้อหา. c"). ซ่อน ();
สารบัญ eq (ดัชนี). show ();
-
tabproto.getElem = function () {
คืนสิ่งนี้ Elem;
-
tabproto.getOpts = function () {
คืนสิ่งนี้
-
ui.createTab = function (elem, opts) {
var tab = แท็บใหม่ (elem, opts);
tab.init ();
แท็บกลับ;
-
}) (jQuery);
(iv), สรุปสุดท้าย
(1) การวิเคราะห์ที่สมเหตุสมผลของข้อกำหนดการทำงานในวิธีคิดเชิงวัตถุ
(2) จัดระเบียบตรรกะปลั๊กอินของเราในชั้นเรียน
(3) สร้างตัวอย่างข้างต้นใหม่อย่างต่อเนื่องวิธีการสร้างใหม่อย่างสมเหตุสมผล? อย่าออกแบบมากเกินไปให้สบายใจ วิธีที่แนะนำคือการรวมการออกแบบกระบวนการเข้ากับการออกแบบการคิดเชิงวัตถุ
(4) คิดว่าตัวเลือกในแท็บสามารถจำแนกได้อย่างอิสระเป็นคลาสแยกต่างหากในตัวอย่างด้านบนหรือไม่? ตัวอย่างเช่น "รายการ" จากนั้นจะแก้ไขคลาส "แท็บ" ได้อย่างไร? คิดด้วยคำถาม - -
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ เราจะปรับปรุงปลั๊กอินนี้ต่อไปในอนาคต ถ้าคุณชอบบทความนี้โปรดยกนิ้วให้ฉัน