เพื่อนร่วมงานส่วนหน้าบนเว็บทุกคนคุ้นเคยกับ document.getElementById เป็นอย่างดี ในระหว่างกระบวนการพัฒนา เรามักจะต้องใช้มันเพื่อรับองค์ประกอบที่มี ID เพจเป็น xx เนื่องจาก Prototype ไลบรารี่ JS ที่มีประสบการณ์ได้รับความนิยม ทุกคนจึงชอบใช้ตัวย่อเช่นนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
// วิธีที่ 1
ฟังก์ชั่น $(id){ return document.getElementById(id);
มีใครเคยสงสัยบ้างไหมว่าทำไมถึงเขียนแบบนี้แทนที่จะเขียนแบบนี้?
คัดลอกรหัสรหัสดังต่อไปนี้:
// วิธีที่ 2
var $ = document.getElementById;
การเขียน $ ด้วยวิธีนี้จะกระชับและชัดเจนยิ่งขึ้น กำหนดเมธอดเอกสาร getElementById ให้กับตัวแปร $ และใช้ $ เพื่อรับองค์ประกอบที่มี ID เพจเป็น xx ในความเป็นจริง วิธีที่ 2 เป็นไปได้ใน IE6/7/8 (มีการเปลี่ยนแปลงบางอย่างใน IE9) แต่ไม่ใช่ใน Firefox/Safari/Chrome/Opera โปรดทดสอบด้วยตัวเองด้วย
เหตุใด Firefox/Safari/Chrome/Opera จึงไม่สามารถรับได้ในวิธีที่ 2 เหตุผลก็คือการใช้งานภายในของวิธี getElementById ในเบราว์เซอร์เหล่านี้จำเป็นต้องพึ่งพาสิ่งนี้ (เอกสาร) ในขณะที่ IE ไม่ต้องการสิ่งนี้ หรือกล่าวอีกนัยหนึ่ง วิธีที่ 2 บอกว่าสิ่งนี้หายไปเมื่อถูกเรียกใน Firefox/Safari/Chrome/Opera ต่อไปนี้เป็นตัวอย่างง่ายๆ
คัดลอกรหัสรหัสดังต่อไปนี้:
//กำหนดการแสดงฟังก์ชัน
ฟังก์ชั่นแสดง () {การแจ้งเตือน (this.name);}
//กำหนดวัตถุ p ด้วยแอตทริบิวต์ name
var p = {ชื่อ: 'แจ็ค'};
show.call(p); // -> 'แจ็ค'
แสดง(); // -> ''
show.call(null); // -> ''<BR>
คุณจะเห็นว่าการดำเนินการแสดงขึ้นอยู่กับสิ่งนี้ (พูดง่ายๆ ก็คือใช้ในส่วนเนื้อความของวิธีการ) ดังนั้น หากสภาพแวดล้อม (บริบทการดำเนินการ) เมื่อเรียกไม่มีแอตทริบิวต์ชื่อ ก็จะไม่ได้รับผลลัพธ์ที่คาดหวัง
กล่าวอีกนัยหนึ่ง IE6/7/8 ไม่ได้ใช้สิ่งนี้เมื่อใช้งาน document.getElementById แต่ IE9/Firefox/Safari/Chrome/Opera จำเป็นต้องใช้สิ่งนี้ โดยที่นี่คือออบเจ็กต์เอกสาร เมื่อเรียกใช้วิธีที่ 2 โดยตรง ภายในจะเป็นวัตถุหน้าต่าง ดังนั้นวิธีที่ 2 จึงไม่สามารถรับองค์ประกอบได้ตามปกติโดยอิงตาม ID ใน Firefox/Safari/Chrome/Opera
หากคุณเปลี่ยนสภาพแวดล้อมการดำเนินการของ document.getElementById เป็น document แทน window คุณสามารถใช้ $ ได้ตามปกติ ดังต่อไปนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
// แก้ไข document.getElementById
document.getElementById = (ฟังก์ชัน(fn){
ฟังก์ชันส่งคืน () {
กลับ fn.apply (เอกสารข้อโต้แย้ง);
-
})(document.getElementById);
// หลังจากซ่อมแซมแล้ว ให้กำหนดค่าให้กับ $ ซึ่ง $ สามารถใช้งานได้ตามปกติ
var $ = document.getElementById;
ขอย้ำอีกครั้งว่าวิธีผูกใหม่สำหรับฟังก์ชันใน ECMAScript5 สามารถบรรลุผลเช่นเดียวกัน
คัดลอกรหัสรหัสดังต่อไปนี้:
// วิธีที่ 3
var $ = document.getElementById.bind(เอกสาร);
แต่ปัจจุบันวิธีที่ 3 รองรับเฉพาะ IE9/Firefox/Chrome/ เท่านั้น
หลังจากวิเคราะห์สถานการณ์ของ getElementById แล้ว จะเข้าใจได้ง่ายว่าเหตุใดวิธีการต่อไปนี้จึงแตกต่างกันในเบราว์เซอร์ต่างๆ
คัดลอกรหัสรหัสดังต่อไปนี้:
var prinf = document.write;
prinf('<h3>Test prinf</h3>'); // IE6/7/8 สามารถทำงานได้ เบราว์เซอร์อื่นรายงานข้อผิดพลาด
var prinfln = document.writeln;
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8 สามารถทำงานได้ เบราว์เซอร์อื่นจะรายงานข้อผิดพลาด
โหลดซ้ำ = location.reload;
โหลดใหม่(); // IE6/7/8 สามารถทำงานได้ เบราว์เซอร์อื่นจะรายงานข้อผิดพลาด
var go = history.go;
go(-2); // IE6/7/8 สามารถทำงานได้ เบราว์เซอร์อื่นจะรายงานข้อผิดพลาด