1. การวิเคราะห์เปิด
สวัสดีคุณยังจำบทความก่อนหน้านี้ได้หรือไม่? ส่วนใหญ่จะบอกว่าปลั๊กอิน "แท็บ" จัดระเบียบรหัสและใช้งานได้อย่างไรและวิธีการออกแบบกระบวนการรวมกับการออกแบบการคิดเชิงวัตถุเป็นอย่างไร
วิธีการออกแบบปลั๊กอิน? ทั้งสองวิธีมีข้อดีและข้อเสียของตนเองในการเรียนรู้จากจุดแข็งและจุดอ่อนของกันและกัน บทความชุดนี้มุ่งเน้นการเรียนรู้และทุกคนตัดสินใจวิธีใช้สถานการณ์เฉพาะ จากบทความนี้เรายังคงมุ่งเน้นไปที่อินสแตนซ์ "แท็บ" นั้น
ขยายฟังก์ชั่นที่เกี่ยวข้องต่อไป hehehe พูดไร้สาระน้อยลงไปถึงจุด โดยตรงกับการเรนเดอร์จริง:
คุณได้เห็นแล้วและมีการเพิ่มคุณสมบัติใหม่ หากจำนวนรายการข้อมูลการกำหนดค่าโมดูลของเราเมื่อเราเริ่มต้นมากกว่าที่เราระบุจะแสดงใน "โมดูลเพิ่มเติม"
ในรายการที่ซ่อนอยู่ของรายการการทำงานการกำหนดค่าพารามิเตอร์การเริ่มต้นของเราได้รับการปรับใหม่เช่น "displaymax" เพิ่มเติมเพื่อระบุจำนวนรายการที่เริ่มต้นและแอตทริบิวต์รายการ "สถานะ"
ในระหว่างการเริ่มต้นไม่จำเป็นต้องมีการกำหนดค่า การกำหนดค่าแบบไดนามิกถูกสร้างขึ้นในโปรแกรมซึ่งเพิ่มความยืดหยุ่นของโปรแกรม มาวิเคราะห์โดยละเอียดด้านล่าง
(ii) การวิเคราะห์กรณี
(1) ก่อนอื่นให้พิจารณาว่าปลั๊กอินนี้ทำอะไร มาดูวิธีการโทรของปลั๊กอินและคำอธิบายพารามิเตอร์การกำหนดค่า รหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
-
ButtonText: "เพิ่มโมดูล"
ผลลัพธ์: [
-
ข้อความ: "Wizard Prompt",
URL: "help.html",
Showclose: "0"
-
-
ข้อความ: "ข้อมูลนักเรียน",
URL: "info.html"
Showclose: "1"
-
-
ข้อความ: "การจำแนกประเภทนักเรียน",
URL: "category.html",
Showclose: "1"
-
-
ข้อความ: "Big Bear {{bb}}"
URL: "bb.html"
Showclose: "1"
-
-
ข้อความ: "โมดูลทดสอบเบต้า"
URL: "test.html"
Showclose: "1"
-
-
ข้อความ: "ชายอ้วนสามคน"
URL: "help.html",
Showclose: "1"
-
-
ข้อความ: "ชายหัวล้านสี่คน"
URL: "help.html",
Showclose: "1"
-
-
DisplayMax: 5 // รายการแสดงผลสูงสุด
-
"bigbear.ui.createTab" มีสองพารามิเตอร์ อย่างแรกคือวัตถุ DOM Node และตัวเลือกที่สองคือตัวเลือกพารามิเตอร์ปลั๊กอิน "buttontext" หมายถึงคำอธิบายข้อความของปุ่มการทำงานในปลั๊กอิน "แท็บ"
"ผลลัพธ์" เป็นอาร์เรย์ที่มีคุณสมบัติของรายการแท็บรวมถึงคำอธิบายข้อความ URL ที่ใช้เพื่อขอเมื่อคลิกรายการแท็บ "Showclose" แสดงว่าตัวเลือกแท็บแสดงปุ่มปิดหรือไม่
"สถานะ" จะถูกลบออกในระหว่างการเริ่มต้นและไม่จำเป็นต้องมีการกำหนดค่าและการกำหนดค่าจะถูกสร้างขึ้นแบบไดนามิกในโปรแกรม อาจมีสถานะปิดซึ่งแสดงเป็น: 1-default display, สถานะ 0-off และ 2- จากจำนวนเริ่มต้นของรายการเริ่มต้น
(2) มีการแนะนำฟังก์ชั่นในขั้นตอน
1 --- เริ่มต้นปลั๊กอินผ่านพารามิเตอร์เสริม:
การคัดลอกรหัสมีดังนี้:
$ (function () {
bigbear.ui.createTab ($ ("#tab"), {
ButtonText: "เพิ่มโมดูล"
ผลลัพธ์: [
-
ข้อความ: "Wizard Prompt",
URL: "help.html",
Showclose: "0"
-
-
ข้อความ: "ข้อมูลนักเรียน",
URL: "info.html"
Showclose: "1"
-
-
ข้อความ: "การจำแนกประเภทนักเรียน",
URL: "category.html",
Showclose: "1"
-
-
ข้อความ: "Big Bear {{bb}}"
URL: "bb.html"
Showclose: "1"
-
-
ข้อความ: "โมดูลทดสอบเบต้า"
URL: "test.html"
Showclose: "1"
-
-
ข้อความ: "ชายอ้วนสามคน"
URL: "help.html",
Showclose: "1"
-
-
ข้อความ: "ชายหัวล้านสี่คน"
URL: "help.html",
Showclose: "1"
-
-
DisplayMax: 5 // รายการแสดงผลสูงสุด
-
-
2 ---, การแสดงผลและการผูกมัดเวลาที่สมบูรณ์และตรรกะทางธุรกิจที่เกี่ยวข้องเช่นการตรวจสอบจำนวนรายการในระหว่างการเริ่มต้น
การคัดลอกรหัสมีดังนี้:
tabproto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("ยังไม่มีโมดูล!");
-
var that = this;
this.getElem (). ค้นหา (". ชื่อ. adder")
.Text (" +" + this.getOpts () ["buttonText"]))
.on ("คลิก", function () {
That.getElem () ค้นหา (". คอนโซล-แผง") Slidetoggle (ฟังก์ชัน () {
นั่น _RenderConsolepanel ("0");
-
-
$ .Each (this.getOpts () ["result"], ฟังก์ชั่น (i, item) {
if (that._isdisplaymax (i + 1)) {
That._saveorupDatestatus (รายการ, "1");
-
อื่น{
That._saveorupDatestatus (รายการ, "2");
-
นั่น _render (รายการ);
-
if (! That._isdisplaymax (this.getOpts () ["result"]. ความยาว)) {
this.getElem (). ค้นหา (". ชื่อ. more-mod"). fadein (function () {
$ (นี่) .find (". tag"). on ("คลิก", function () {
var root = $ (this) .next ();
root.empty ();
$ .Each (that._getItemlistbyStatus ("2"), ฟังก์ชั่น (i, data) {
$ ("<div> </div>") ข้อความ (data ["text"])
.on ("คลิก", function () {
if (that._getItemlistbyStatus ("1"). ความยาว <that.getOpts () ["displaymax"]) {
That.getElem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
That._saveorupDatestatus (ข้อมูล, "1");
-
-
อื่น{
การแจ้งเตือน ("ไม่สามารถเพิ่มโมดูลได้ปัจจุบันเป็นจำนวนสูงสุด!");
-
-
.appendto (รูท);
-
root.toggle ();
-
-
-
this.getElem (). find (". title .items div")
.eq (0)
.Trigger ("คลิก"); // สมมติว่าต้องมีหนึ่งมิฉะนั้นปลั๊กอินจะไม่สมเหตุสมผล!
-
3 ---, การสลับแท็บและการดำเนินการแสดงเนื้อหาข้อมูล
การคัดลอกรหัสมีดังนี้:
tabproto._setCurrent = function (ดัชนี) {
รายการ var = this.getElem (). ค้นหา (". ชื่อ.
items.eq (ดัชนี) .addclass ("ใช้งาน");
เนื้อหา var = this.getElem () ค้นหา (". เนื้อหา. c"). ซ่อน ();
สารบัญ eq (ดัชนี). show ();
-
การคัดลอกรหัสมีดังนี้:
item.on ("คลิก", function () {
That._setCurrent ($ (นี่) .index ());
นั่น _getContent (data ["url"]). เสร็จแล้ว (ฟังก์ชั่น (ผลลัพธ์) {
นั่น _SetContent (ผลลัพธ์);
-
.Fail (function () {
โยนข้อผิดพลาดใหม่ ("ข้อผิดพลาดสุทธิ!");
-
-
การคัดลอกรหัสมีดังนี้:
tabproto._setContent = function (html) {
this.getElem (). ค้นหา (". เนื้อหา"). html (html);
-
tabproto._getContent = function (url) {
ส่งคืน $ .ajax ({
URL: URL
-
-
4 --- วิธีการใช้งานข้อมูลหลักเสริมไม่เกี่ยวข้องกับ DOM
การคัดลอกรหัสมีดังนี้:
/ * เวลาอัปเดต 2015 1/26 15:36 */
tabproto._isdisplaymax = ฟังก์ชั่น (ขนาด) {
var displaymax = this.getOpts () ["displaymax"] || 5;
return (size <= displaymax)? จริง: เท็จ;
-
tabproto._isemptyresult = function () {
ถ้า (! this.getOpts () ["ผลลัพธ์"]. ความยาว) {
กลับเท็จ;
-
กลับมาจริง;
-
tabproto._saveorupdatestatus = ฟังก์ชั่น (รายการสถานะ) {
รายการ ["สถานะ"] = สถานะ;
-
tabproto._getItemListByStatus = ฟังก์ชั่น (สถานะ) {
var list = [];
var result = this.getOpts () ["ผลลัพธ์"];
$ .Each (ผลลัพธ์, ฟังก์ชั่น (i, item) {
if (สถานะ == รายการ ["สถานะ"]) {
list.push (รายการ);
-
-
รายการคืน;
-
tabproto._getStatusByIndex = ฟังก์ชั่น (ดัชนี) {
สถานะ var = null;
var result = this.getOpts () ["ผลลัพธ์"];
$ .Each (ผลลัพธ์, ฟังก์ชั่น (i, item) {
if (index == item ["index"]) {
สถานะ = รายการ ["สถานะ"];
-
-
สถานะการส่งคืน;
-
(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>
</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 .more-mod {
ล้น: ซ่อน;
ชายแดน: 1px Solid #DC143C;
ความกว้าง: 70px;
ตำแหน่ง: สัมบูรณ์;
ขวา: 0;
มาร์จิ้น-ขวา: 6px;
แสดง: ไม่มี;
-
.dxj-ui-bd #tab .title .more-mod .tag {
ความสูง: 32px;
ความสูงของสาย: 32px;
ความกว้าง: 70px;
ความเป็นมา: #DC143C;
สี: #FFFF;
Font-Family: Arial;
ขนาดตัวอักษร: 12px;
TEXT-ALIGN: CENTER;
เคอร์เซอร์: ตัวชี้;
-
.dxj-ui-bd #tab .title .more-mod .mods {
ล้น: ซ่อน;
ความกว้าง: 70px;
แสดง: ไม่มี;
-
.dxj-ui-bd #tab .title .more-mod .mods div {
ความสูง: 24px;
ความสูงของสาย: 24px;
ความกว้าง: 62px;
Font-Family: Arial;
ขนาดตัวอักษร: 12px;
เคอร์เซอร์: ตัวชี้;
Padding-Left: 10px;
-
.DXJ-UI-BD #TAB .TITLE .ITEMS {
ความสูง: 32px;
ความกว้าง: 480px;
ล้น: ซ่อน;
ลอย: ซ้าย;
-
.DXJ-UI-BD #TAB .TITLE .ITEMS DIV {
Padding: 0px;
ขอบซ้าย: 10px;
ความกว้าง: 84px;
ความสูง: 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, bigbear.js
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น ($) {
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;
/ * เวลาอัปเดต 2015 1/26 15:36 */
tabproto._isdisplaymax = ฟังก์ชั่น (ขนาด) {
var displaymax = this.getOpts () ["displaymax"] || 5;
return (size <= displaymax)? จริง: เท็จ;
-
tabproto._isemptyresult = function () {
ถ้า (! this.getOpts () ["ผลลัพธ์"]. ความยาว) {
กลับเท็จ;
-
กลับมาจริง;
-
tabproto._saveorupdatestatus = ฟังก์ชั่น (รายการสถานะ) {
รายการ ["สถานะ"] = สถานะ;
-
tabproto._getItemListByStatus = ฟังก์ชั่น (สถานะ) {
var list = [];
var result = this.getOpts () ["ผลลัพธ์"];
$ .Each (ผลลัพธ์, ฟังก์ชั่น (i, item) {
if (สถานะ == รายการ ["สถานะ"]) {
list.push (รายการ);
-
-
รายการคืน;
-
tabproto._getStatusByIndex = ฟังก์ชั่น (ดัชนี) {
สถานะ var = null;
var result = this.getOpts () ["ผลลัพธ์"];
$ .Each (ผลลัพธ์, ฟังก์ชั่น (i, item) {
if (index == item ["index"]) {
สถานะ = รายการ ["สถานะ"];
-
-
สถานะการส่งคืน;
-
tabproto._renderconsolepanel = function (สถานะ) {
var that = this;
var root = That.getElem (). ค้นหา (". คอนโซล-แผง");
this._ResetConsolepanel ();
$ .Each (that._getItemlistbyStatus (สถานะ), ฟังก์ชัน (i, item) {
var elem = $ ("<div style = 'float: left';> </div>"). ภาคผนวก (รูท);
$ ("<อินพุต type = 'radio' name = 'addMod' />"
.Data ("รายการ" รายการ)
.appendto (elem);
$ ("<span> </span>") ข้อความ (รายการ ["ข้อความ"]) ภาคผนวก (elem);
-
if (root.find ("div"). size ()) {
$ ("<อินพุต type = 'button' value = 'เพิ่มโมดูล' style = 'margin-left: 20px'/>")
.on ("คลิก", function () {
var data = root.find ("อินพุต [type = วิทยุ]: ตรวจสอบ"). ข้อมูล ("รายการ");
if (that._getItemlistbyStatus ("1"). ความยาว <that.getOpts () ["displaymax"]) {
That.getElem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
That._saveorupDatestatus (ข้อมูล, "1");
-
.Trigger ("คลิก");
-
อื่น{
That._saveorupDatestatus (ข้อมูล, "2");
-
That.getElem (). find (". title .adder"). trigger ("คลิก");
-
.appendto (รูท);
-
อื่น{
root.text ("ยังไม่มีรายการที่จะเพิ่ม!");
-
-
/ * เวลาอัปเดต 2015 1/26 15:36 */
tabproto._setCurrent = function (ดัชนี) {
รายการ var = this.getElem (). ค้นหา (". ชื่อ.
items.eq (ดัชนี) .addclass ("ใช้งาน");
เนื้อหา var = this.getElem () ค้นหา (". เนื้อหา. c"). ซ่อน ();
สารบัญ eq (ดัชนี). show ();
-
tabproto.getElem = function () {
คืนสิ่งนี้ Elem;
-
tabproto.getOpts = function () {
คืนสิ่งนี้
-
tabproto._ResetContent = function () {
this.getElem (). ค้นหา (". เนื้อหา"). html ("");
-
tabproto._setContent = function (html) {
this.getElem (). ค้นหา (". เนื้อหา"). html (html);
-
tabproto._getContent = function (url) {
ส่งคืน $ .ajax ({
URL: URL
-
-
tabproto._deleteitem = function (elem) {
var that = this;
this.getElem (). find (". title .items div")
.eq (elem.index ())
.fadeout (function () {
That._resetContent ();
That._saveorupDatestatus (elem.data ("รายการ"), "0");
That._triggerItem (elem.index () + 1);
-
-
tabproto._triggerItem = function (ถัดไป) {
var nextStatus = this._getStatusByIndex (ถัดไป);
รายการ var = this.getElem () ค้นหา (". ชื่อ. items div");
ถัดไป = items.eq (ถัดไป);
if (next.size () && "1" == nextstatus) {// โหนด DOM ที่ตามมามีอยู่จริง
next.trigger ("คลิก");
-
อื่น{
items.eq (0) .trigger ("คลิก");
-
-
tabproto._ResetConsolePanel = function () {
this.getElem (). ค้นหา (". คอนโซล-แผง"). ว่าง ();
-
tabproto.init = function () {
if (this._isemptyresult ()) {
this._setContent ("ยังไม่มีโมดูล!");
-
var that = this;
this.getElem (). ค้นหา (". ชื่อ. adder")
.Text (" +" + this.getOpts () ["buttonText"]))
.on ("คลิก", function () {
That.getElem () ค้นหา (". คอนโซล-แผง") Slidetoggle (ฟังก์ชัน () {
นั่น _RenderConsolepanel ("0");
-
-
$ .Each (this.getOpts () ["result"], ฟังก์ชั่น (i, item) {
if (that._isdisplaymax (i + 1)) {
That._saveorupDatestatus (รายการ, "1");
-
อื่น{
That._saveorupDatestatus (รายการ, "2");
-
นั่น _render (รายการ);
-
if (! That._isdisplaymax (this.getOpts () ["result"]. ความยาว)) {
this.getElem (). ค้นหา (". ชื่อ. more-mod"). fadein (function () {
$ (นี่) .find (". tag"). on ("คลิก", function () {
var root = $ (this) .next ();
root.empty ();
$ .Each (that._getItemlistbyStatus ("2"), ฟังก์ชั่น (i, data) {
$ ("<div> </div>") ข้อความ (data ["text"])
.on ("คลิก", function () {
if (that._getItemlistbyStatus ("1"). ความยาว <that.getOpts () ["displaymax"]) {
That.getElem (). find (". title .items div"). eq (data ["index"]). fadein (function () {
That._saveorupDatestatus (ข้อมูล, "1");
-
-
อื่น{
การแจ้งเตือน ("ไม่สามารถเพิ่มโมดูลได้ปัจจุบันเป็นจำนวนสูงสุด!");
-
-
.appendto (รูท);
-
root.toggle ();
-
-
-
this.getElem (). find (". title .items div")
.eq (0)
.Trigger ("คลิก"); // สมมติว่าต้องมีหนึ่งมิฉะนั้นปลั๊กอินจะไม่สมเหตุสมผล!
-
tabproto._render = function (data) {
var that = this;
var item = $ ("<div> </div>"). ข้อความ (ข้อมูล ["ข้อความ"]). ภาคผนวก (this.getElem () ค้นหา ("ชื่อ. items")));
data ["index"] = item.index ();
item.on ("คลิก", function () {
That._setCurrent ($ (นี่) .index ());
นั่น _getContent (data ["url"]). เสร็จแล้ว (ฟังก์ชั่น (ผลลัพธ์) {
นั่น _SetContent (ผลลัพธ์);
-
.Fail (function () {
โยนข้อผิดพลาดใหม่ ("ข้อผิดพลาดสุทธิ!");
-
-
.data ("รายการ", ข้อมูล);
if ("2" == ข้อมูล ["สถานะ"]) {
item.hide ();
-
if ("1" == data ["Showclose"]) {
$ ("<span class = 'del'> x </span>")
.on ("คลิก", function () {
ถ้า (win.confirm ("รายการนี้ถูกลบหรือไม่")) {
That._deleteItem (รายการ);
กลับเท็จ; // หยุดฟองสบู่
-
-
.appendto (รายการ);
-
-
ui.createTab = function (elem, opts) {
var tab = แท็บใหม่ (elem, opts);
tab.init ();
แท็บกลับ;
-
}) (jQuery);
(iv), สรุปสุดท้าย
(1) การวิเคราะห์ที่สมเหตุสมผลของข้อกำหนดการทำงานในวิธีคิดเชิงวัตถุ
(2) จัดระเบียบตรรกะปลั๊กอินของเราในชั้นเรียน
(3) สร้างตัวอย่างข้างต้นใหม่อย่างต่อเนื่องวิธีการสร้างใหม่อย่างสมเหตุสมผล? อย่าออกแบบมากเกินไปให้สบายใจ วิธีที่แนะนำคือการรวมการออกแบบกระบวนการเข้ากับการออกแบบการคิดเชิงวัตถุ