โปรแกรมแก้ไข Downcodes จะพาคุณไปทำความเข้าใจกับ Location object ใน JavaScript! ออบเจ็กต์ Location เป็นองค์ประกอบสำคัญในการเขียนโปรแกรม JavaScript ส่วนหน้า โดยมีฟังก์ชันที่มีประสิทธิภาพสำหรับการเข้าถึงและจัดการ URL ของเพจปัจจุบัน ทำให้คุณสามารถข้ามเพจ รีเฟรช และดำเนินการอื่นๆ ได้อย่างง่ายดาย บทความนี้จะสำรวจวิธีการหลักอย่างเจาะลึก (มอบหมาย(), โหลดซ้ำ(), แทนที่()) และคุณลักษณะ (href, โปรโตคอล, โฮสต์ ฯลฯ) ของออบเจ็กต์ Location และรวมเข้ากับกรณีจริงเพื่อแสดงการประยุกต์ใช้ ออบเจ็กต์ตำแหน่งในการนำทางเพจและการดำเนินการ URL เพื่อช่วยให้คุณเข้าใจและใช้เครื่องมืออันทรงพลังนี้ได้ดีขึ้น และพัฒนาทักษะการพัฒนาส่วนหน้าของคุณ
ออบเจ็กต์ Location มีความสำคัญมากในการเขียนโปรแกรม JavaScript ส่วนหน้า โดยให้ข้อมูลเกี่ยวกับเอกสารที่โหลดในหน้าต่างปัจจุบัน และอนุญาตให้มีการเปลี่ยนเส้นทางเพจ วิธีการของอ็อบเจ็กต์ Location ประกอบด้วย: มอบหมาย(), โหลดซ้ำ(), แทนที่() ฯลฯ ซึ่งใช้ในการโหลดเอกสารใหม่ โหลดเอกสารปัจจุบันซ้ำ และแทนที่เอกสารปัจจุบันตามลำดับ ใช้เมธอด reload() เป็นตัวอย่าง วิธีนี้สามารถรีเฟรชเพจได้ตามต้องการ เช่น การรีเฟรชสถานะเซสชันของผู้ใช้หรือการอัปเดตเนื้อหาของเพจ เมื่อเรียก location.reload() หากไม่มีการส่งผ่านพารามิเตอร์หรือส่งผ่านค่า false เพจจะถูกโหลดซ้ำจากแคช หากส่งผ่านค่า true ทรัพยากรจะถูกบังคับให้รับอีกครั้งจากเซิร์ฟเวอร์ โดยไม่สนใจแคช
ออบเจ็กต์ Location คือออบเจ็กต์ที่มีข้อมูล URL ปัจจุบัน ซึ่งสามารถเข้าถึงได้ผ่าน window.location หรือผ่านตำแหน่งโดยตรง ออบเจ็กต์ Location มีคุณสมบัติและวิธีการใช้งานความสามารถในการนำทางของเบราว์เซอร์ ตัวอย่างเช่น คุณสามารถรับหรือตั้งค่า URL ของหน้าปัจจุบัน หรือนำทางไปยังหน้าใหม่ด้วยวิธีอื่น
คุณลักษณะของออบเจ็กต์ Location เช่น href, โปรโตคอล, โฮสต์, ชื่อโฮสต์, พอร์ต, ชื่อพาธ, การค้นหา, แฮช ฯลฯ ตามลำดับจะให้ URL ที่สมบูรณ์ โปรโตคอล ชื่อโฮสต์และหมายเลขพอร์ต เส้นทาง สตริงการสืบค้น และข้อมูลจุดยึด
วิธีการมอบหมาย () ใช้ในการโหลดเอกสารใหม่ การเรียกวิธีนี้มีผลเหมือนกับการป้อน URL ลงในแถบที่อยู่ของเบราว์เซอร์แล้วไปที่หน้านั้น นั่นคือจะสร้างบันทึกใหม่ในประวัติของเบราว์เซอร์
ตัวอย่างการใช้งาน:
location.มอบหมาย('https://www.example.com');
หลังจากเรียกเมธอดนี้แล้ว หน้าจะนำทางไปยัง URL ที่ให้ไว้ โปรดทราบว่าวิธีนี้จะรักษาประวัติไว้ และผู้ใช้สามารถคลิกปุ่มย้อนกลับของเบราว์เซอร์เพื่อกลับไปยังหน้าก่อนหน้าได้
วิธีการ reload() ใช้ในการโหลดหน้าปัจจุบันซ้ำ มีพารามิเตอร์บูลีนเผื่อเลือกที่เมื่อส่งผ่านค่าจริง จะบังคับให้โหลดเอกสารจากเซิร์ฟเวอร์แทนที่จะโหลดจากแคช
ตัวอย่างการใช้งาน:
location.reload(); // รีโหลดจากแคช (ถ้าเป็นไปได้)
location.reload(true); // ละเว้นแคชและโหลดซ้ำจากเซิร์ฟเวอร์
วิธีการนี้มีประโยชน์ในระหว่างการพัฒนา โดยเฉพาะอย่างยิ่งเมื่อทำการดีบั๊กซึ่งคุณต้องล้างแคชและโหลดโค้ดล่าสุดอีกครั้ง
วิธีการแทนที่() คล้ายกับวิธีการมอบหมาย() และยังใช้ในการโหลดหน้าใหม่อีกด้วย แต่ข้อแตกต่างก็คือเมธอดแทนที่() จะไม่ทิ้งบันทึกไว้ในประวัติ ดังนั้น ผู้ใช้จะไม่สามารถใช้ปุ่มย้อนกลับเพื่อกลับไปยังหน้าก่อนหน้าได้
ตัวอย่างการใช้งาน:
location.replace('https://www.example.com');
ซึ่งมักใช้ในสถานการณ์ที่คุณไม่ต้องการให้ผู้ใช้สามารถกลับไปยังหน้าก่อนหน้าได้ เช่น การเปลี่ยนเส้นทางหลังจากส่งแบบฟอร์ม
แอตทริบิวต์ href มี URL ที่สมบูรณ์ การแก้ไขแอตทริบิวต์นี้เทียบเท่ากับการเรียกเมธอด assign() ซึ่งจะทำให้เพจโหลด URL ใหม่ด้วย
ตัวอย่างการใช้งาน:
console.log(location.href); // ส่งออก URL ของเอกสารปัจจุบัน
location.href = 'https://www.example.com'; // โหลด URL ใหม่
คุณลักษณะโปรโตคอลระบุโปรโตคอลที่ใช้โดยเพจ เช่น 'http:' หรือ 'https:' การแก้ไขคุณสมบัตินี้สามารถเปลี่ยนประเภทโปรโตคอลที่โหลดโดยเพจปัจจุบันได้
ตัวอย่างการใช้งาน:
console.log(location.protocol); // ส่งออกโปรโตคอลของหน้าปัจจุบัน เช่น http:
คุณลักษณะโฮสต์ส่งคืนชื่อโฮสต์บวกหมายเลขพอร์ต (ถ้ามี) และแอตทริบิวต์ชื่อโฮสต์ส่งคืนเฉพาะชื่อโฮสต์เท่านั้น บางครั้งคุณสมบัติเหล่านี้ใช้เพื่อสร้าง URL หรือระบุชื่อโฮสต์เมื่อทำการเปลี่ยนเส้นทางไคลเอ็นต์
ตัวอย่างการใช้งาน:
console.log(location.host); // ส่งออกชื่อโฮสต์และหมายเลขพอร์ต (ถ้ามี)
console.log(location.hostname); //แสดงเฉพาะชื่อโฮสต์เท่านั้น
แอตทริบิวต์ port ส่งกลับหมายเลขพอร์ตของ URL หากไม่ได้ระบุหมายเลขพอร์ตอย่างชัดเจนใน URL คุณสมบัตินี้จะส่งคืนสตริงว่าง
ตัวอย่างการใช้งาน:
console.log(location.port); // ส่งออกหมายเลขพอร์ตของ URL ปัจจุบัน
แอตทริบิวต์ชื่อพา ธ ส่งคืนส่วนเส้นทางของ URL หาก URL ไม่มีข้อมูลเส้นทาง คุณสมบัตินี้จะส่งคืนเครื่องหมายทับ ('/')
ตัวอย่างการใช้งาน:
console.log(location.pathname); // ส่งออกข้อมูลเส้นทางของเพจ
คุณลักษณะการค้นหาส่งคืนส่วนสตริงการสืบค้นของ URL รวมถึงเครื่องหมายคำถามนำหน้าด้วย มักใช้เพื่อรับพารามิเตอร์การสืบค้นใน URL
ตัวอย่างการใช้งาน:
console.log(location.search); // สตริงการสืบค้นเอาต์พุต
แอตทริบิวต์แฮชส่งกลับส่วนสมอของ URL หาก URL ไม่มีแฮช ระบบจะส่งกลับสตริงว่าง
ตัวอย่างการใช้งาน:
console.log(location.hash); // ข้อมูลจุดยึดเอาต์พุต
ในการพัฒนาส่วนหน้าจริง คุณอาจจำเป็นต้องใช้คุณสมบัติและวิธีการของออบเจ็กต์ Location ร่วมกันเพื่อใช้ตรรกะการนำทางเพจที่ซับซ้อน ตัวอย่างเช่น คุณอาจต้องตัดสินใจว่าจะโหลดหน้าใหม่ใดโดยพิจารณาจากสตริงการสืบค้นของหน้าปัจจุบัน
ตัวอย่างเช่น:
ถ้า (location.search.includes('login=true')) {
location.แทนที่('/แดชบอร์ด');
} อื่น {
location.มอบหมาย('/login');
-
ในตัวอย่างนี้ เราพิจารณาว่าผู้ใช้เข้าสู่ระบบตามพารามิเตอร์การค้นหาของ URL ปัจจุบันหรือไม่ และเปลี่ยนเส้นทางไปยังหน้าต่างๆ ตามลำดับ
ออบเจ็กต์ตำแหน่งเป็นส่วนสำคัญของการพัฒนาเว็บ ทำให้สามารถจัดการ URL และการนำทางเพจในฝั่งไคลเอ็นต์ได้ แนวทางปฏิบัติแนะนำควรพิจารณาประสบการณ์ผู้ใช้และผลกระทบ SEO อย่างเต็มที่เมื่อเปลี่ยน URL ของหน้าหรือเปลี่ยนเส้นทาง เมื่อโหลดเพจใหม่หรือดำเนินการที่ไม่จำเป็นต้องเก็บรักษาประวัติ ควรใช้เมธอด reload() และ แทนที่() อย่างเหมาะสม นอกจากนี้ เมื่อสร้างแอปพลิเคชันหน้าเดียว (SPA) คุณลักษณะแฮชของออบเจ็กต์ Location มักถูกจัดการ หรือใช้ API ประวัติ HTML5 เพื่อใช้การกำหนดเส้นทางโดยไม่ต้องโหลดหน้าซ้ำ
การใช้ออบเจ็กต์ตำแหน่งอย่างเหมาะสมสามารถช่วยให้การนำทางหน้าเว็บและการออกแบบการโต้ตอบราบรื่นและใช้งานง่ายยิ่งขึ้น การเรียนรู้วิธีการและคุณสมบัติของมันเป็นสิ่งสำคัญมากสำหรับนักพัฒนาส่วนหน้า ซึ่งสามารถช่วยให้นักพัฒนามอบประสบการณ์เว็บที่สมบูรณ์ยิ่งขึ้นซึ่งตรงตามความคาดหวังของผู้ใช้
ถาม: จะใช้วิธีการระบุตำแหน่งในโปรแกรม JS ส่วนหน้าได้อย่างไร
ตอบ: วัตถุตำแหน่งเป็นวัตถุส่วนกลางที่สามารถใช้เพื่อรับและจัดการ URL ของเอกสารปัจจุบัน ต่อไปนี้เป็นการใช้งานของวิธีการระบุตำแหน่งที่ใช้กันทั่วไปหลายวิธี:
location.href คืออะไร? วิธีการใช้งาน? location.href ส่งคืนสตริง URL ของหน้าปัจจุบัน ซึ่งสามารถใช้เพื่อรับ URL ของหน้าปัจจุบันหรือเปลี่ยนเส้นทางผู้ใช้ไปยัง URL ใหม่ ตัวอย่างเช่น คุณสามารถใช้ location.href = http://www.example.com เพื่อเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าเว็บที่ระบุ
จะใช้เมธอด location.reload() เพื่อรีเฟรชเพจได้อย่างไร? เมธอด location.reload() ใช้เพื่อโหลดหน้าปัจจุบันซ้ำ คุณสามารถใช้เพื่อให้บรรลุผลของการรีเฟรชเพจหลังจากคลิกปุ่มหรือดำเนินการเสร็จสิ้น ตัวอย่างเช่น คุณสามารถใช้ location.reload() ในตัวจัดการเหตุการณ์การคลิกของปุ่มเพื่อโหลดหน้าเว็บซ้ำ
จะใช้เมธอด location.replace() เพื่อแทนที่หน้าปัจจุบันได้อย่างไร เมธอด location.replace() สามารถใช้เพื่อแทนที่หน้าปัจจุบันโดยไม่ต้องสร้างประวัติ ตัวอย่างเช่น คุณสามารถใช้ location.replace(http://www.example.com) เพื่อข้ามไปยัง URL ใหม่โดยตรงโดยไม่ทิ้งบันทึกไว้ในประวัติของเบราว์เซอร์
โปรดทราบว่าข้างต้นเป็นเพียงตัวอย่างง่ายๆ ของวิธีการบางอย่างของวัตถุตำแหน่ง มีวิธีและคุณสมบัติที่มีประโยชน์อื่นๆ อีกมากมายสำหรับการทำงานกับ URL และการนำทาง คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้วิธีการและคุณสมบัติเหล่านี้โดยละเอียดได้ในเอกสารประกอบ JavaScript
ฉันหวังว่าคำอธิบายโดยบรรณาธิการของ Downcodes จะช่วยให้คุณเข้าใจและใช้ออบเจ็กต์ Location ใน JavaScript ได้ดีขึ้น และทำให้ก้าวหน้ามากขึ้นในเส้นทางการพัฒนาส่วนหน้าของคุณ!