1. การวิเคราะห์เปิด
สวัสดีทุกคน! คุณยังจำบทความก่อนหน้านี้ ----- จุดเริ่มต้นของซีรี่ส์นี้ (JavaScript Plug-Idvelopment Tutorial 1) ส่วนใหญ่จะบอกเล่าเรื่องราวของ "วิธีการพัฒนาปลั๊กอินใน jQuery"
ดังนั้นวันนี้เราจะเดินทางต่อปลั๊กอินของเราด้วยคำถามของเมื่อวานนี้ คำถามก่อนหน้านี้มีดังนี้:
(1) หากการเลือกเทคโนโลยีโครงการและการเปลี่ยนปลั๊กอินเหล่านี้มันขึ้นอยู่กับกลไก "jQuery" ปลั๊กอินที่เราเขียนก่อนจะไม่ถูกนำมาใช้ (สมมติว่า jQuery ไม่ได้ใช้) วิธีการ refactor อย่างไร?
(2) refactoring ลอจิกคีย์ของปลั๊กอินเราจะจัดระเบียบวิธีนี้ได้อย่างไร?
โอเคมาเรียนรู้บทความของวันนี้ด้วยคำถาม
ก่อนอื่นฉันไม่ปฏิเสธ“ วิธีการปลั๊กอิน jQuery” และประการที่สองเราจำเป็นต้องวิเคราะห์ปัญหาจากมุมมองที่แตกต่างกันเช่น“ ปลั๊กอิน jQuery มีข้อดีต่อไปนี้”:
(1) ใส่รหัสทั้งหมดในการปิด (ฟังก์ชั่นการดำเนินการทันที) ในเวลานี้การปิดเท่ากับขอบเขตส่วนตัว ภายนอกไม่สามารถเข้าถึงข้อมูลภายในและจะไม่มีมลพิษของตัวแปรทั่วโลก
(2), ก) หลีกเลี่ยงการพึ่งพาทั่วโลก b) หลีกเลี่ยงความเสียหายของบุคคลที่สาม c) เข้ากันได้กับผู้ให้บริการ jQuery '$' และ 'jQuery'
ดังนั้นเราจะจัดระเบียบรหัสใดในทางใดซึ่งเป็นแนวคิดเชิงวัตถุ (OOP) หรือเราควรดำเนินการตามแนวคิดตามกระบวนการ? หรือเป็นการรวมกันของทั้งสอง? ฮ่าฮ่าฮ่าดูต่อไป - - - - -
2. สร้างตัวอย่างของเมื่อวานนี้ขึ้นใหม่
ต่อไปนี้เป็นส่วนซอร์สโค้ดส่วนหนึ่งของส่วน JS ของเมื่อวาน:
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
return this.each (function () {
var elem = $ (นี่);
elem.find ("span") ข้อความ (opts ["title"]);
$ .get (opts ["url"], function (data) {
elem.find ("div") ข้อความ (ข้อมูล ["ข้อความ"]);
-
-
-
$ .fn.bigbear.defaults = {
ชื่อเรื่อง: "นี่คือการทดสอบง่ายๆ"
URL: "data.json"
-
}) (jQuery);
มาวิเคราะห์ทีละขั้นตอน:
ขั้นแรกให้กำหนดฟังก์ชั่นของปลั๊กอินนี้
(1) แสดงข้อมูลข้อความชื่อที่เราตั้งไว้
(2) รับข้อมูลเนื้อหาแบบไดนามิกผ่านวิธีการแบบอะซิงโครนัส
ใช้ได้! เป็นเรื่องง่ายที่จะพูดคุยกันหากข้อกำหนดชัดเจน ไม่ยากที่จะมองเห็นจากรหัสด้านบนว่าตรรกะนั้นหลวมและการคิดตามกระบวนการนั้นชัดเจนดังนั้นขั้นตอนแรกคือการใส่ข้อกำหนดการทำงานของเราเข้าไปใน
จัดระเบียบอย่างมีประสิทธิภาพในชั้นเรียน ดูรหัส Refactored ดังนี้:
การคัดลอกรหัสมีดังนี้:
$ (function () {
$ ("#bb"). bigbear ();
-
(ฟังก์ชั่น ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
return this.each (function () {
var elem = $ (นี่);
var bb = ใหม่ bigbear (elem, opts);
bb.getelem (). ทริกเกอร์ ("ข้อมูล");
-
-
$ .fn.bigbear.defaults = {
ชื่อเรื่อง: "นี่คือการทดสอบง่ายๆ"
URL: "data.json"
-
}) (jQuery);
ฟังก์ชั่น BigBear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.init ();
-
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
คืนสิ่งนี้ Elem;
-
bbproto.getOpts = function () {
คืนสิ่งนี้
-
bbproto.init = function () {
var that = this;
this.getElem (). on ("data", function () {
That._settitle (that.getopts () ["title"]);
$ .get (That.getOpts () ["url"], ฟังก์ชั่น (ผลลัพธ์) {
that.getElem (). ค้นหา ("div"). ข้อความ (ผลลัพธ์ ["ข้อความ"]);
-
-
-
bbproto._settitle = ฟังก์ชั่น (ข้อความ) {
this.getElem (). ค้นหา ("span"). ข้อความ (ข้อความ);
-
ฮ่าฮ่าฮ่ามีรหัสอีกมากมายหรือไม่? ในความเป็นจริงวิธีนี้คือการดูปัญหาจากมุมมองเชิงวัตถุก่อนที่จะวิเคราะห์ข้อกำหนดการทำงานก่อนจากนั้นออกแบบชั้นเรียนของเรา แม้ว่ามันจะเป็นไปไม่ได้ที่เราจะออกแบบมันได้ดีในครั้งเดียว
อย่างไรก็ตามมุมมองของปัญหามีการเปลี่ยนแปลงรหัสของเราได้อ่านได้มากขึ้นและเราสามารถรักษาได้ดีขึ้นเพื่อให้สามารถบรรลุวัตถุประสงค์ของเราได้
ต่อไปนี้คือการใช้ซอร์สโค้ดที่เกี่ยวข้องที่ตัดตอนมาจากส่วน "bootstrap" JS ดังที่แสดงด้านล่าง:
ไม่ยากที่จะเห็นว่ามีวิธีการใช้งานที่คล้ายกันซึ่งรักษาตรรกะหลักของปลั๊กอินของเราผ่านคลาส
(iii) เพิ่มฟังก์ชั่นใหม่และแนะนำคลาสเพิ่มเติม
ตอนนี้ความต้องการเพิ่มขึ้นและจำเป็นต้องมีการเปลี่ยนแปลงประสบการณ์บางอย่างและมีเอฟเฟกต์ "โหลด" เมื่อโหลดข้อมูล
แนวคิดการใช้งานสามารถเป็นเช่นนี้: ตั้งค่าข้อความเป็นคำว่า "โหลดข้อมูล ... " ในพื้นที่เนื้อหาดั้งเดิมจากนั้นแนะนำคลาสใหม่ดังนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นซ้อนทับ () {
-
var olproto = Overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// ฉันจะไม่เขียนการใช้งานเฉพาะ
โอเคเลเยอร์หน้ากากอยู่ที่นั่นแล้วเราจะรวมเข้าด้วยกันได้อย่างไร? เราเข้าถึงมันในชุดค่าผสมดังนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น BigBear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overlay = new Overlay ();
this.init ();
-
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
คืนสิ่งนี้ Elem;
-
bbproto.getOpts = function () {
คืนสิ่งนี้
-
bbproto.init = function () {
var that = this;
var loadingText = "การโหลดข้อมูล .... ";
this.getElem (). on ("data", function () {
That._settitle (that.getopts () ["title"]);
That.overlay.show ();
That.getElem (). ค้นหา ("div") ข้อความ (โหลดข้อความ);
$ .get (That.getOpts () ["url"], ฟังก์ชั่น (ผลลัพธ์) {
That.overlay.hide ();
that.getElem (). ค้นหา ("div"). ข้อความ (ผลลัพธ์ ["ข้อความ"]);
-
-
-
bbproto._settitle = ฟังก์ชั่น (ข้อความ) {
this.getElem (). ค้นหา ("span"). ข้อความ (ข้อความ);
-
นี่เป็นเพียงการสิ้นสุดฟังก์ชั่นของเรา ฉันเชื่อว่าปลั๊กอินที่เขียนด้วยวิธีนี้ดีกว่าเวอร์ชันแรกมาก แน่นอนว่านี่ไม่ใช่การใช้งานที่ดีที่สุดและจำเป็นต้องได้รับการปรับปรุงใหม่อย่างต่อเนื่องจากรายละเอียด แต่วิธีนี้เป็นวิธีเสริมในการพัฒนาปลั๊กอิน
นี่คือรหัสที่สมบูรณ์:
การคัดลอกรหัสมีดังนี้:
$ (function () {
$ ("#bb"). bigbear ();
-
(ฟังก์ชั่น ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
return this.each (function () {
var elem = $ (นี่);
var bb = ใหม่ bigbear (elem, opts);
bb.getelem (). ทริกเกอร์ ("ข้อมูล");
-
-
$ .fn.bigbear.defaults = {
ชื่อเรื่อง: "นี่คือการทดสอบง่ายๆ"
URL: "data.json"
-
}) (jQuery);
ฟังก์ชั่น BigBear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overlay = new Overlay ();
this.init ();
-
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
คืนสิ่งนี้ Elem;
-
bbproto.getOpts = function () {
คืนสิ่งนี้
-
bbproto.init = function () {
var that = this;
var loadingText = "การโหลดข้อมูล .... ";
this.getElem (). on ("data", function () {
That._settitle (that.getopts () ["title"]);
That.overlay.show ();
That.getElem (). ค้นหา ("div") ข้อความ (โหลดข้อความ);
$ .get (That.getOpts () ["url"], ฟังก์ชั่น (ผลลัพธ์) {
That.overlay.hide ();
that.getElem (). ค้นหา ("div"). ข้อความ (ผลลัพธ์ ["ข้อความ"]);
-
-
-
bbproto._settitle = ฟังก์ชั่น (ข้อความ) {
this.getElem (). ค้นหา ("span"). ข้อความ (ข้อความ);
-
ฟังก์ชั่นซ้อนทับ () {
-
var olproto = Overlay.prototype;
olproto.show = function () {};
olproto.hide = function () {};
// ฉันจะไม่เขียนการใช้งานเฉพาะ
บทความนี้สิ้นสุดลงแล้ว คุณมีความเข้าใจใหม่เกี่ยวกับการพัฒนาปลั๊กอินของ JavaScript หรือไม่?