1. การวิเคราะห์เปิด
สวัสดีทุกคน! ชุดบทความวันนี้ส่วนใหญ่พูดคุยเกี่ยวกับวิธีการพัฒนาการพัฒนาปลั๊กอินตาม "JavaScript" ฉันคิดว่าหลายคนไม่คุ้นเคยกับคำว่า "ปลั๊กอิน"
บางคนอาจเรียกมันว่า "ส่วนประกอบ" หรือ "ส่วนประกอบ" ซึ่งไม่สำคัญ กุญแจสำคัญคือการดูวิธีการออกแบบและวิธีการพิจารณาที่ครอบคลุม นี่คือแนวคิดที่บทความนี้มุ่งเน้นไปที่ ฉันคิดว่าทุกคนพูดถูก
ฉันมีความเข้าใจบางอย่างเกี่ยวกับ "วิธีการปลั๊กอิน jQuery" เราจะหารือกันตามหัวข้อนี้และในที่สุดก็ให้แผนการดำเนินงานที่เกี่ยวข้องเพื่อปรับปรุงความสามารถของเราอย่างต่อเนื่อง
2. ป้อนหัวข้อปลั๊กอิน
โดยทั่วไปการพัฒนาปลั๊กอิน jQuery แบ่งออกเป็นสองประเภท: หนึ่งคือฟังก์ชั่นระดับโลกที่แขวนอยู่ภายใต้เนมสเปซ jQuery ซึ่งสามารถเรียกได้ว่าเป็นวิธีการคงที่
อีกวิธีหนึ่งคือวิธีการระดับวัตถุ jQuery นั่นคือวิธีการที่แขวนอยู่ภายใต้ต้นแบบ jQuery เพื่อให้อินสแตนซ์วัตถุ jQuery ที่ได้รับผ่านตัวเลือกสามารถแบ่งปันวิธีนี้ได้
(1) การพัฒนาปลั๊กอินระดับชั้นเรียน
ความเข้าใจโดยตรงที่สุดของการพัฒนาปลั๊กอินระดับคลาสคือการเพิ่มวิธีการเรียนในคลาส "jQuery" ซึ่งสามารถเข้าใจได้ว่าเป็นการเพิ่มวิธีการคงที่ ตัวอย่างทั่วไปคือฟังก์ชั่น "$ .ajax ()" ซึ่งกำหนดฟังก์ชั่นในเนมสเปซ jQuery เกี่ยวกับการพัฒนาปลั๊กอินระดับคลาสสามารถขยายได้ในรูปแบบต่อไปนี้:
1.1 เพิ่มฟังก์ชั่นทั่วโลกเราจำเป็นต้องกำหนดดังนี้และดูรหัส:
การคัดลอกรหัสมีดังนี้:
$ .hello = function () {
การแจ้งเตือน ("สวัสดี, Big Bear!");
-
1.2 เพิ่มฟังก์ชั่นทั่วโลกหลายฟังก์ชั่นซึ่งสามารถกำหนดได้ดังนี้:
การคัดลอกรหัสมีดังนี้:
$ .Extend ({
สวัสดี: ฟังก์ชั่น (ชื่อ) {
// ใส่รหัสของคุณที่นี่
-
โลก: ฟังก์ชั่น () {
// ใส่รหัสของคุณที่นี่
-
-
คำอธิบาย: "$ .Extend (เป้าหมาย, [Object1], [ObjectN])" (วิธีนี้ส่วนใหญ่ใช้เพื่อรวมเนื้อหา (แอตทริบิวต์) ของวัตถุสองวัตถุขึ้นไปในวัตถุแรกและส่งคืนวัตถุแรกที่ผสาน
หากวิธีการมีเป้าหมายพารามิเตอร์เดียวพารามิเตอร์จะขยายเนมสเปซของ jQuery นั่นคือมันจะถูกแขวนไว้ภายใต้วัตถุระดับโลก jQuery เป็นวิธีการคงที่)
(2) การพัฒนาปลั๊กอินระดับวัตถุ
การพัฒนาปลั๊กอินระดับวัตถุต้องใช้สองรูปแบบ:
2.1 การติดตั้งแอตทริบิวต์ที่เกี่ยวข้องแบบไดนามิกผ่าน "$ .fn.extend ()" เป็นต้นแบบ
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น ($) {
$ .fn.extend ({
pluginName: function (opts) {
// ใส่รหัสของคุณที่นี่
-
-
}) (jQuery);
2.2 เพิ่มแอตทริบิวต์ไดนามิกโดยตรงไปยังห่วงโซ่ต้นแบบ
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น ($) {
$ .fn.pluginName = function () {
// ใส่รหัสของคุณที่นี่
-
}) (jQuery);
ให้ฉันอธิบาย: ทั้งสองเทียบเท่า สำหรับปลั๊กอิน jQuery ฟังก์ชั่นพื้นฐานสามารถทำงานได้ดี แต่สำหรับปลั๊กอินที่ซับซ้อนยิ่งขึ้นจำเป็นต้องจัดหาวิธีการต่าง ๆ และฟังก์ชั่นส่วนตัว
คุณอาจใช้เนมสเปซที่แตกต่างกันเพื่อให้วิธีการต่าง ๆ สำหรับปลั๊กอินของคุณ แต่การเพิ่มเนมสเปซมากเกินไปจะทำให้รหัสยุ่งเหยิงและแข็งแกร่งน้อยลง ดังนั้นทางออกที่ดีที่สุดคือการกำหนดฟังก์ชั่นส่วนตัวและวิธีการอย่างเหมาะสม
ดังนั้นเราจึงใช้หน่วยปลั๊กอินส่วนตัวแบบจำลองโดยรวมฟังก์ชั่นการดำเนินการด้วยตนเองเข้ากับการปิดเช่นเดียวกับในตัวอย่างของเราด้านบน
(3) ให้ตัวอย่างง่ายๆเพื่อดูกระบวนการดำเนินการ:
(1) รหัสชิ้นส่วน "HTML" มีดังนี้:
การคัดลอกรหัสมีดังนี้:
<div id = "bb">
<span> </span>
<div
style = "margin-top: 10px;
มาร์จิ้น-ก้น: 30px; "
> 8 </div>
</div>
(2) คำจำกัดความของ "data.json" มีดังนี้:
การคัดลอกรหัสมีดังนี้:
-
"ข้อความ": "สวัสดีหมีใหญ่ {{bb}}!" -
-
(3) รหัส "bb.js" มีดังนี้:
การคัดลอกรหัสมีดังนี้:
$ (function () {
$ ("#bb"). bigbear ();
-
(ฟังก์ชั่น ($) {
$ .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) "$ .fn.bigbear.defaults" มีตัวเลือกพารามิเตอร์เริ่มต้นสำหรับปลั๊กอิน ปลั๊กอินที่มีความสามารถในการขยายที่ดีควรอนุญาตให้ผู้ใช้ปรับแต่งตัวเลือกพารามิเตอร์ตามความต้องการและควบคุมพฤติกรรมของปลั๊กอินดังนั้นจึงจำเป็นต้องให้ตัวเลือกเริ่มต้นที่เรียกคืน คุณสามารถตั้งค่าตัวเลือกเหล่านี้ด้วยวิธีการขยายของ jQuery
(2), "return this.each () {... }" ข้ามองค์ประกอบหลายองค์ประกอบและส่งคืน jQuery โดยใช้เอ็นจิ้น Sizzle Selector, Sizzle สามารถให้การดำเนินการหลายองค์ประกอบสำหรับฟังก์ชั่นของคุณ (เช่นองค์ประกอบเดียวกันสำหรับชื่อคลาสทั้งหมด) นี่เป็นหนึ่งในคุณสมบัติที่ยอดเยี่ยมหลายประการของ jQuery และแม้ว่าคุณจะยังไม่พร้อมที่จะให้การสนับสนุนหลายองค์ประกอบสำหรับปลั๊กอินของคุณในระหว่างการพัฒนาการเตรียมตัวสำหรับสิ่งนี้ยังคงเป็นวิธีที่ยอดเยี่ยม นอกจากนี้ jQuery ยังมีคุณสมบัติที่ดีที่สามารถดำเนินการเรียงความวิธีการซึ่งสามารถเรียกว่าการเรียกโซ่ดังนั้นเราไม่ควรทำลายคุณลักษณะนี้และส่งคืนองค์ประกอบในวิธีการเสมอ
(iv), สรุปสุดท้าย
(1) jQuery ได้เปิดตัวสองวิธีสำหรับการพัฒนาปลั๊กอินคือ: jQuery.fn.extend (วัตถุ); เพิ่มวิธีการลงในวัตถุ jQuery
jQuery.extend (วัตถุ); เพิ่มวิธีการใหม่ให้กับคลาสเพื่อขยายคลาส jQuery เอง
(2) ใส่รหัสทั้งหมดในการปิด (ฟังก์ชั่นการดำเนินการทันที) ในเวลานี้การปิดเท่ากับขอบเขตส่วนตัว ภายนอกไม่สามารถเข้าถึงข้อมูลภายในและจะไม่มีมลพิษของตัวแปรทั่วโลก ข้อมูลจำเพาะการพัฒนาอย่างเป็นทางการอธิบาย: ก) หลีกเลี่ยงการพึ่งพาทั่วโลก; b) หลีกเลี่ยงความเสียหายของบุคคลที่สาม c) ความเข้ากันได้กับผู้ให้บริการ jQuery '$' และ 'jQuery'
(3) ระบุตัวเลือกพารามิเตอร์เริ่มต้นสำหรับปลั๊กอิน ปลั๊กอินที่มีความสามารถในการขยายที่ดีควรอนุญาตให้ผู้ใช้ปรับแต่งตัวเลือกพารามิเตอร์ตามความต้องการและควบคุมพฤติกรรมของปลั๊กอิน ดังนั้นจึงจำเป็นต้องให้ตัวเลือกเริ่มต้นที่กู้คืน คุณสามารถตั้งค่าตัวเลือกเหล่านี้ด้วยวิธีการขยายของ jQuery
(4) วนซ้ำผ่านองค์ประกอบหลายอย่างและส่งคืน jQuery โดยใช้เอ็นจิ้นตัวเลือกที่น่าตื่นเต้น Sizzle สามารถให้การดำเนินการหลายองค์ประกอบสำหรับฟังก์ชั่นของคุณ (เช่นองค์ประกอบที่มีชื่อคลาสเดียวกัน) นี่เป็นหนึ่งในคุณสมบัติที่ยอดเยี่ยมหลายประการของ jQuery และแม้ว่าคุณจะยังไม่พร้อมที่จะให้การสนับสนุนหลายองค์ประกอบสำหรับปลั๊กอินของคุณในระหว่างกระบวนการพัฒนาการเตรียมตัวสำหรับสิ่งนี้ยังคงเป็นแนวปฏิบัติที่ดี นอกจากนี้ jQuery ยังมีคุณสมบัติที่ดีที่สามารถดำเนินการเรียงความวิธีการซึ่งสามารถเรียกว่าการเรียกโซ่ดังนั้นเราไม่ควรทำลายคุณลักษณะนี้และส่งคืนองค์ประกอบในวิธีการเสมอ
(5) เป็นสิ่งสำคัญที่จะต้องวางรหัสครั้งเดียวนอกลูปหลัก แต่มักจะถูกละเว้น พูดง่ายๆคือถ้าคุณมีโค้ดชิ้นหนึ่งที่เป็นค่าเริ่มต้นที่ต้องมีการสร้างอินสแตนซ์เพียงครั้งเดียวแทนที่จะเป็นอินสแตนซ์ทุกครั้งที่คุณเรียกใช้ฟังก์ชันปลั๊กอินคุณควรใส่รหัสนี้ไว้นอกวิธีปลั๊กอิน
(6) หลังจากเรียนรู้ลองคิดดูสิ หากการเลือกเทคโนโลยีโครงการและการแทนที่ปลั๊กอินเหล่านี้จะต้องอาศัยกลไก“ jQuery” ปลั๊กอินที่เราเขียนก่อนจะไม่ถูกนำมาใช้ (สมมติว่าไม่ได้ใช้ jQuery) จะปรับเปลี่ยนได้อย่างไร?
บทความของวันพรุ่งนี้จะพูดคุยเกี่ยวกับปัญหานี้และจะ refactor ตรรกะที่สำคัญของปลั๊กอินดังนั้นโปรดติดตาม - -