ในรหัส JavaScript เนื่องจากความแตกต่างของพฤติกรรมระหว่างเบราว์เซอร์เรามักจะรวมคำสั่ง IF จำนวนมากในฟังก์ชันเพื่อตรวจสอบลักษณะของเบราว์เซอร์และแก้ปัญหาความเข้ากันได้ของเบราว์เซอร์ที่แตกต่างกัน ตัวอย่างเช่นฟังก์ชั่นที่พบบ่อยที่สุดของเราในการเพิ่มเหตุการณ์ในโหนด DOM:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น addevent (ประเภท, องค์ประกอบ, สนุก) {
if (element.addeventListener) {
Element.addeventListener (ประเภท, สนุก, เท็จ);
-
อื่นถ้า (element.attachevent) {
element.attachevent ('on' + type, fun);
-
อื่น{
องค์ประกอบ ['on' + type] = fun;
-
-
ทุกครั้งที่มีการเรียกฟังก์ชั่น AddEvent จะต้องตรวจสอบความสามารถที่รองรับโดยเบราว์เซอร์ ก่อนอื่นให้ตรวจสอบว่ารองรับวิธีการของ AddEventListener หรือไม่ หากไม่ได้รับการสนับสนุนให้ตรวจสอบว่ามีการรองรับวิธีการแนบหรือไม่ หากไม่รองรับให้ใช้วิธี DOM ระดับ 0 เพื่อเพิ่มเหตุการณ์ กระบวนการนี้จะต้องทำทุกครั้งที่มีการเรียกฟังก์ชัน AddEvent ในความเป็นจริงหากเบราว์เซอร์รองรับวิธีหนึ่งมันจะสนับสนุนมันเสมอและไม่จำเป็นต้องตรวจจับสาขาอื่น กล่าวอีกนัยหนึ่งหากคำสั่งไม่จำเป็นต้องดำเนินการทุกครั้งและรหัสสามารถทำงานได้เร็วขึ้น
วิธีแก้ปัญหาคือเทคนิคที่เรียกว่าการโหลดขี้เกียจ
การโหลดขี้เกียจที่เรียกว่าถ้าสาขาของฟังก์ชั่นจะถูกดำเนินการเพียงครั้งเดียวเท่านั้นและเมื่อเรียกใช้ฟังก์ชันมันจะป้อนรหัสสาขาที่รองรับโดยตรง มีสองวิธีในการใช้การโหลดขี้เกียจ สิ่งแรกคือเมื่อมีการเรียกฟังก์ชั่นเป็นครั้งแรกฟังก์ชั่นจะถูกประมวลผลแบบกำลังสอง ฟังก์ชั่นจะถูกเขียนทับเป็นฟังก์ชั่นที่ตรงกับเงื่อนไขสาขาเพื่อให้การเรียกใช้ฟังก์ชั่นดั้งเดิมจะไม่ต้องผ่านสาขาที่ดำเนินการอีกต่อไป เราสามารถใช้การโหลดขี้เกียจเพื่อเขียนทับ addevent () ด้วยวิธีต่อไปนี้
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น addevent (ประเภท, องค์ประกอบ, สนุก) {
if (element.addeventListener) {
addevent = function (ประเภท, องค์ประกอบ, สนุก) {
Element.addeventListener (ประเภท, สนุก, เท็จ);
-
-
อื่นถ้า (element.attachevent) {
addevent = function (ประเภท, องค์ประกอบ, สนุก) {
element.attachevent ('on' + type, fun);
-
-
อื่น{
addevent = function (ประเภท, องค์ประกอบ, สนุก) {
องค์ประกอบ ['on' + type] = fun;
-
-
return addevent (ประเภท, องค์ประกอบ, สนุก);
-
ใน addevent ที่ขี้เกียจที่ขี้เกียจ () แต่ละสาขาของคำสั่ง IF จะกำหนดค่าให้กับตัวแปร addEvent ซึ่งเขียนทับฟังก์ชั่นดั้งเดิมได้อย่างมีประสิทธิภาพ ขั้นตอนสุดท้ายคือการเรียกใช้ฟังก์ชันการกำหนดใหม่ ครั้งต่อไปที่คุณเรียก AddEvent () ฟังก์ชั่นที่ได้รับมอบหมายใหม่จะถูกเรียกโดยตรงเพื่อให้คุณไม่จำเป็นต้องดำเนินการหากคำสั่ง
วิธีที่สองในการใช้การโหลดขี้เกียจคือการระบุฟังก์ชั่นที่เหมาะสมเมื่อประกาศฟังก์ชั่น ด้วยวิธีนี้ประสิทธิภาพจะไม่หายไปเมื่อฟังก์ชั่นนี้เรียกว่าครั้งแรกและมีเพียงประสิทธิภาพเพียงเล็กน้อยเท่านั้นที่จะหายไปเมื่อโหลดรหัส นี่คือ AddEvent () ที่เขียนใหม่ตามแนวคิดนี้
การคัดลอกรหัสมีดังนี้:
var addevent = (function () {
if (document.addeventListener) {
ฟังก์ชั่น return (ประเภท, องค์ประกอบ, สนุก) {
Element.addeventListener (ประเภท, สนุก, เท็จ);
-
-
อื่นถ้า (document.attachevent) {
ฟังก์ชั่น return (ประเภท, องค์ประกอบ, สนุก) {
element.attachevent ('on' + type, fun);
-
-
อื่น {
ฟังก์ชั่น return (ประเภท, องค์ประกอบ, สนุก) {
องค์ประกอบ ['on' + type] = fun;
-
-
-
เคล็ดลับที่ใช้ในตัวอย่างนี้คือการสร้างฟังก์ชั่นการดำเนินการตนเองที่ไม่ระบุชื่อและใช้สาขาที่แตกต่างกันเพื่อกำหนดฟังก์ชั่นที่ควรใช้ ตรรกะจริงเหมือนกัน ความแตกต่างคือการใช้นิพจน์ฟังก์ชั่นถูกใช้ (ฟังก์ชั่นถูกกำหนดโดย VAR) และเพิ่มฟังก์ชั่นที่ไม่ระบุชื่อ นอกจากนี้แต่ละสาขาส่งคืนฟังก์ชั่นที่ถูกต้องและกำหนดให้กับตัวแปร addEvent ทันที
ข้อได้เปรียบของฟังก์ชั่นการโหลดขี้เกียจคือหากสาขาถูกดำเนินการเพียงครั้งเดียวหลีกเลี่ยงฟังก์ชั่นที่ดำเนินการหากสาขาและรหัสที่ไม่จำเป็นทุกครั้งที่ดำเนินการดังนั้นจึงปรับปรุงประสิทธิภาพของรหัส วิธีการที่เหมาะสมกว่านั้นขึ้นอยู่กับความต้องการของคุณ