ฟังก์ชั่นที่ไม่ระบุชื่อกับฟังก์ชั่นที่มีชื่อแยกต่างหากสำหรับการเริ่มต้นใน jquery

9

สมมติว่าเรามีรหัสบางอย่างที่ใช้ในการเริ่มต้นสิ่งต่าง ๆ เมื่อโหลดหน้าเว็บและมีลักษณะดังนี้:

function initStuff() { ...}
...
$(document).ready(initStuff);

ฟังก์ชัน initStuff ถูกเรียกจากบรรทัดที่สามของตัวอย่างเท่านั้น ไม่มีอีกครั้ง. ดังนั้นโดยปกติผู้คนจะใส่สิ่งนี้ลงในการติดต่อกลับแบบไม่ระบุชื่อเช่นนี้

$(document).ready(function() { 
    //Body of initStuff
});

การมีฟังก์ชั่นในตำแหน่งเฉพาะในรหัสนั้นไม่ได้ช่วยในการอ่านได้จริง ๆ เพราะการโทรพร้อม () ทำให้มันชัดเจนว่านี่เป็นรหัสเริ่มต้น

มีเหตุผลอื่นอีกไหมที่จะชอบอีกอันหนึ่ง?

coding-style jquery

— Martin N.
แหล่งที่มา

4

อันแรกคือเนมสเปซส่วนกลาง เลือกที่สอง

— riwalk

10

ดังที่ @ Stargazer712 พูดถึงกลุ่มแรกคือเนมสเปซทั่วโลกดังนั้นอันที่สองคือ IMHO ที่ชนะ ตอนนี้ต้องบอกว่าเนื่องจากคุณใช้ฟังก์ชันที่ไม่ระบุชื่อในตัวอย่างที่สอง callstack ของดีบักเกอร์ของคุณจะไร้ประโยชน์และจะได้ผลลัพธ์ที่แตกต่างกันขึ้นอยู่กับดีบักเกอร์ที่คุณใช้ ปกติแล้วสิ่งที่ฉันจะไปด้วยคือ:

$(document).ready(function MODULE_init() { 
    //Body of initStuff
});

ด้วยวิธีนี้เนมสเปซส่วนกลางจะไม่ยุ่งเหยิงและคุณมี callstack ที่มีประโยชน์

ฉันมักจะใช้การประชุมข้างต้นในทุกนิยามฟังก์ชั่นที่ไม่ระบุชื่อ (ดีไม่ระบุชื่ออีกต่อไป;) เป็นแบบแผนที่ฉันพบเมื่อเรียกดูรหัส Firefox JS

แก้ไข: ตอนนี้ต้องบอกทุกอย่างแล้วโอลิเวอร์นำเสนอจุดที่ดีด้วยการทดสอบหน่วย ด้านบนมีวัตถุประสงค์เพื่อใช้เป็น wrapper สำหรับการดำเนินการที่ซับซ้อนมากขึ้นเพื่อไม่ให้มีรหัสที่ยังไม่ทดลองจำนวนมาก

— Demian Brecht
แหล่งที่มา

+1 สำหรับการกล่าวถึงการดีบัก ฉันมักจะเห็นการใช้ "callbacks ชื่อ" (ไม่รู้ว่าคำนี้มีอยู่จริง) ในรหัส Node.js ดังนั้นฉันเดาว่ามันเป็นวิธีปฏิบัติที่ดี

— Oliver Weiler

kangax.github.com/nfeนิพจน์ฟังก์ชันที่ระบุชื่อ - บทความนี้จะบอกคุณทุกอย่างที่คุณอยากรู้เกี่ยวกับพวกเขา

— Sean McMillan

7

ฉันจะบอกว่าในกรณีนี้มันอาจจะไม่สำคัญ แต่ถ้าคุณมีฟังก์ชั่นการโทรกลับแบบไม่ระบุชื่อการเรียกฟังก์ชั่นการโทรกลับแบบไม่ระบุชื่ออื่น ๆ ฉันมักจะใช้วิธีแรกเนื่องจากมันทำให้รหัสอ่านได้ง่ายขึ้น

สำหรับการทดสอบหน่วยวิธีแรกจะดีกว่าเพราะคุณสามารถทดสอบinitstuffฟังก์ชั่นแยกได้

— Oliver Weiler
แหล่งที่มา

โดยปกติเราไม่มีโค้ดจำนวนมากในฟังก์ชั่นการเริ่มต้นเหล่านี้ มันอาจดึงข้อมูลบางอย่างจากที่ต่างๆและนั่นคือ

— Martin N.

3

ฉันจะไปสำหรับคนแรกสำหรับการอ่าน / แก้จุดบกพร่อง / การทดสอบ ฯลฯ คุณสามารถหลีกเลี่ยงปัญหาทั่วโลกที่ยุ่งเหยิง namespace โดยเพียงแค่สร้าง namespace ท้องถิ่นสำหรับฟังก์ชั่นทั้งหมดในหน้าของคุณ ฉันใช้รูปแบบสัญกรณ์ตามที่พอลไอริชแนะนำ (ดูสไลด์ 13-15 บนhttp://paulirish.com/2009/perf/ )

var MYPAGE = {
  onReady : function(){
  // init code
  },
  someOtherCallback : function(){}
};

jQuery(document).ready(MYPAGE.onReady);

— njaggars
แหล่งที่มา

2

ฉันยังมีวิธีที่สามในการลงทะเบียนวิธี init โดยไม่ต้องยุ่งกับ namespace ทั่วโลกที่ฉันชอบ

jQuery(function(){....});

สั้นและหลีกเลี่ยงการค้นหาเอกสาร DOM เช่น

jQuery(document).ready(function(){...});

ทำ.

— อเล็กซ์
แหล่งที่มา

+1: ฉันคิดว่านี่เป็นวิธีปฏิบัติที่เป็นมาตรฐาน แต่เพื่อหลีกเลี่ยงปัญหาใด ๆ กับคำจำกัดความที่ขัดแย้งกันของ$ฉันชอบ:jQuery(function($) {...});

— วินไคลน์