ทุกวันนี้แอพดั้งเดิมและแอพพลิเคชั่นเว็บเป็นกระแสหลักซึ่งหมายความว่าเฟรมเวิร์กเว็บแอปพลิเคชันที่ใช้เบราว์เซอร์ต่าง ๆ กำลังได้รับความนิยมมากขึ้นเรื่อย ๆ และผู้ที่ทำ JS ก็มีแนวโน้มมากขึ้นเรื่อย ๆ ฉันยังตัดสินใจค่อยๆย้ายจากการพัฒนาแบ็คเอนด์ไปสู่การพัฒนาส่วนหน้าและการพัฒนามือถือ อย่าพูดถึงเรื่องไร้สาระมาที่หัวข้อ "JS Callback Function" กันเถอะ
การพูดถึงฟังก์ชั่นการโทรกลับแม้ว่าหลายคนรู้ถึงความหมาย แต่พวกเขาก็ยังมีความเข้าใจเพียงไม่กี่อย่าง สำหรับวิธีการใช้งานมันยังคงสับสนเล็กน้อย บางสิ่งที่เกี่ยวข้องบนอินเทอร์เน็ตไม่ได้อธิบายอย่างละเอียดว่าเกิดอะไรขึ้นและพวกเขามีด้านเดียวมากขึ้น ต่อไปฉันจะพูดถึงความเข้าใจส่วนตัวของฉันอย่าวิพากษ์วิจารณ์ฉัน ลองดูที่คำจำกัดความคร่าวๆ "ฟังก์ชั่น A มีพารามิเตอร์และพารามิเตอร์นี้เป็นฟังก์ชั่น b. เมื่อฟังก์ชั่น A ถูกเรียกใช้ฟังก์ชัน B ถูกดำเนินการจากนั้นกระบวนการนี้เรียกว่าการโทรกลับ" ประโยคนี้หมายความว่าฟังก์ชั่น B ถูกส่งผ่านไปยังฟังก์ชั่น A ในรูปแบบของพารามิเตอร์และดำเนินการในลำดับของการดำเนินการก่อนจากนั้นเรียกใช้พารามิเตอร์ B, B คือฟังก์ชั่นการโทรกลับที่เรียกว่า ก่อนอื่นให้ดูตัวอย่างต่อไปนี้
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น A (โทรกลับ) {
การแจ้งเตือน ('A');
callback.call (นี่); // หรือ callback (), callback.apply (นี้) ขึ้นอยู่กับการตั้งค่าส่วนบุคคล
-
ฟังก์ชั่น b () {
การแจ้งเตือน ('B');
-
//เรียก
a (b);
ผลที่ได้คือ 'A' ปรากฏขึ้นก่อนและ 'B' ปรากฏขึ้น ด้วยวิธีนี้บางคนอาจถามว่า "ประเด็นของการเขียนรหัสดังกล่าวคืออะไร? ดูเหมือนจะไม่ได้ใช้มากนัก!"
ใช่ฉันคิดว่ามันไม่มีความหมายที่จะเขียนเช่นนี้ "ถ้าคุณเรียกฟังก์ชั่นเพียงแค่เรียกมันโดยตรงในฟังก์ชั่น" ฉันแค่เขียนตัวอย่างเล็ก ๆ น้อย ๆ เพื่อให้คุณเข้าใจเบื้องต้น ไม่มีการใช้พารามิเตอร์ชนิดนี้ในกระบวนการเขียนรหัสจริงเพราะในสถานการณ์ส่วนใหญ่เราต้องผ่านพารามิเตอร์ นี่คือพารามิเตอร์:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น C (โทรกลับ) {
การแจ้งเตือน ('C');
callback.call (นี่, 'd');
-
//เรียก
C (ฟังก์ชั่น (e) {
การแจ้งเตือน (e);
-
การโทรนี้ดูคุ้นเคยหรือไม่? ที่นี่พารามิเตอร์ E ถูกกำหนดให้ 'D' เราเพียงแค่กำหนดค่าให้กับตัวละคร squirts แต่ในความเป็นจริงเรายังสามารถกำหนดค่าให้กับวัตถุ มีพารามิเตอร์ E ใน jQuery หรือไม่? พูดคุยกันด้านล่าง
พารามิเตอร์ E ใน jQuery กำหนดโดยการโทรกลับอย่างไร?
ฉันคิดว่าทุกคนคุ้นเคยกับกรอบงาน jQuery มันได้รับการปล่อยตัวเป็นเวลานานและใช้ในระหว่างการพัฒนา มันค่อนข้างง่าย มันสะดวกมากในการค้นหา API ออนไลน์และเป็นเรื่องง่ายที่จะเริ่มต้น ภายใต้กรอบ JQuery บางครั้งเราจำเป็นต้องได้รับพารามิเตอร์บางอย่างในเหตุการณ์เช่นพิกัดของการคลิกปัจจุบันและวัตถุองค์ประกอบของการคลิก ข้อกำหนดนี้เป็นเรื่องง่ายที่จะจัดการกับ jQuery:
การคัดลอกรหัสมีดังนี้:
$ ("#id"). bind ('คลิก', function (e) {
//e.pagex, e.pagey, e.target ...... ข้อมูลต่าง ๆ
-
มันค่อนข้างสะดวกในการใช้งาน ในความเป็นจริงการกำหนดพารามิเตอร์ E นี้ก็ทำได้ผ่านฟังก์ชั่นการโทรกลับ พารามิเตอร์นี้ถูกกำหนดค่าวัตถุให้กับมันโดยใช้พารามิเตอร์การโทรกลับ เพื่อนที่ศึกษาซอร์สโค้ด JJQuery ควรค้นพบสิ่งนี้อย่างระมัดระวัง
นอกจากนี้ยังมีหลักการเดียวกันใน $ .get ('', {}, ฟังก์ชัน (ข้อมูล) {}) พารามิเตอร์ข้อมูล
ลองมาดูกันว่าฟังก์ชั่นการโทรกลับถูกนำไปใช้ในวัตถุเหตุการณ์ jQuery อย่างไร
เพื่อความสะดวกฉันเพียงแค่เขียนเกี่ยวกับการใช้งานบางอย่างที่เกี่ยวข้องกับ $ ฉันเคยเขียนก่อนหน้านี้ว่า "Xiaotan JQuery" มีวิธีการที่ค่อนข้างใกล้เคียงกับการใช้งานกรอบการทำงาน ฉันแค่เขียนตัวเลือกง่ายๆด้านล่าง
การคัดลอกรหัสมีดังนี้:
<div id = "container">
</div>
<script>
var _ $ = function (id)
-
this.element = document.getElementById (id);
-
_ $. prototype = {
ผูก: ฟังก์ชั่น (evt, callback)
-
var that = this;
if (document.addeventListener)
-
this.element.addeventListener (evt, function (e) {
callback.call (that, that.standadize (e));
} ,เท็จ);
-
อื่นถ้า (document.attachevent)
-
this.element.attachevent ('on'+evt, function (e) {
callback.call (that, that.standadize (e));
-
-
อื่น
this.element ['on'+evt] = function (e) {
callback.call (that, that.standadize (e));
-
-
เป็นมาตรฐาน: ฟังก์ชั่น (e) {
var evt = e || window.event;
var pagex, pagey, layerx, layery;
// pagex พิกัดแนวนอน Pagey แนวตั้งพิกัด Layerx คลิกอยู่ที่การคลิกเลเยอร์พิกัดแนวนอนอยู่ที่พิกัดแนวตั้งขององค์ประกอบ
if (evt.pagex)
-
pagex = evt.pagex;
pagey = evt.pagey;
-
อื่น
-
pagex = document.body.scrollleft+evt.clientx-document.body.clientleft;
pagey = document.body.scrolltop+evt.clienty-document.body.clientltop;
-
if (evt.layerx)
-
layerx = evt.layerx;
layery = evt.layery;
-
อื่น
-
layerx = evt.offsetx;
layerxy = evt.offsety;
-
กลับ {
PAGEX: PAGEX,
Pagey: Pagey,
layerx: layerx,
เลเยอร์: เลเยอร์
-
-
-
หน้าต่าง. $ = ฟังก์ชั่น (id)
-
ส่งคืนใหม่ _ $ (id);
-
$ ('container'). bind ('คลิก', function (e) {
การแจ้งเตือน (e.pagex);
-
$ ('container1'). bind ('คลิก', function (e) {
การแจ้งเตือน (e.pagex);
-
</script>
เราดูที่การใช้งานฟังก์ชั่น standadize เป็นหลัก ฉันจะไม่พูดมากเกี่ยวกับรหัสนี้วัตถุส่งคืนคือ
การคัดลอกรหัสมีดังนี้:
กลับ {
PAGEX: PAGEX,
Pagey: Pagey,
layerx: layerx,
เลเยอร์: เลเยอร์
-
จากนั้นดูที่รหัส callback.call (นี่คือ standadize (e)) ในฟังก์ชั่นการผูก รหัสนี้ได้รับการกำหนดค่าให้กับพารามิเตอร์ E ซึ่งนำมาใช้โดยใช้การโทรกลับ
ฟังก์ชั่นที่ไม่ระบุชื่อจะถูกส่งผ่านเมื่อมีการเรียกฟังก์ชันการโทรกลับ
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น (e) {
-
callback.call (that, that.standadize (e)) เทียบเท่ากับการเรียกใช้รหัสชิ้นส่วนดังกล่าว
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น (e) {
}) (standadize (e))
นี่เป็นสิ่งที่คลาสสิกเกี่ยวกับ jQuery โดยใช้ฟังก์ชั่นการโทรกลับ นี่คือวิธีที่กำหนดพารามิเตอร์ E หลังจากพูดสิ่งนี้คุณอาจมีความเข้าใจที่ดีเกี่ยวกับเรื่องนี้และวิธีการใช้งาน
การโทรกลับถูกใช้บ่อยขึ้นในเฟรมเวิร์กต่างๆ บางครั้งเมื่อเขียนบางสิ่งด้วยตัวเองคุณสามารถใช้มันตามสถานการณ์จริง