คุณสมบัติแฮชเป็นสตริงที่อ่านง่ายและเขียนได้ซึ่งเป็นส่วนจุดยึดของ URL (ส่วนที่เริ่มต้นด้วยหมายเลข #)
ไวยากรณ์
ตำแหน่ง. แฮช
ในโครงการของเรามีหน้าจำนวนมากพร้อมแบบสอบถาม AJAX แบบสอบถาม + รายการผลลัพธ์ เนื่องจากผลการสอบถามถูกส่งคืนโดย AJAX เมื่อผู้ใช้คลิกรายการในรายการและเข้าสู่หน้ารายละเอียดเขาจึงคลิกปุ่มย้อนกลับของเบราว์เซอร์เพื่อกลับไปที่หน้า AJAX Query ในเวลานี้ทุกคนรู้ว่ารูปแบบและผลลัพธ์ของหน้าเคียวรีกลับไปยังสถานะเริ่มต้น
หากคุณต้องป้อนเกณฑ์การสืบค้นอีกครั้งทุกครั้งที่คุณกลับไปที่หน้าหรือถ้าคุณต้องไปที่หน้าของรายการผู้ใช้จะคลั่งไคล้กับประสบการณ์นี้จริงๆ
ในโครงการของเราเราเขียนคลาสฐาน JavaScript ที่ง่ายมากเพื่อประมวลผลตำแหน่ง HASH และบันทึกสถานะหน้า วันนี้ฉันจะแบ่งปันกับคุณ
(เนื้อหาของบทความนี้อาจเป็นเรื่องยากสำหรับผู้เริ่มต้นใน JavaScript เพราะมันเกี่ยวข้องกับความรู้เชิงวัตถุ JS เช่นการกำหนดคลาสการถ่ายทอดวิธีการเสมือนจริงการสะท้อน ฯลฯ )
มาดูความต้องการของเราก่อน
โครงการของเราเป็นระบบการจัดการงาน H5 ที่ใช้ WeChat ต้นแบบหน้าจะเสร็จสมบูรณ์จะแสดงในรูปด้านล่าง:
ข้อกำหนดควรชัดเจนมากนั่นคือคลิกที่แบบสอบถามใช้ AJAX เพื่อส่งคืนผลลัพธ์การสืบค้นจากนั้นคลิกที่งานในรายการเพื่อป้อนหน้ารายละเอียดงาน เนื่องจากผู้ดูแลระบบ (ผู้จัดการโครงการ) มักจะจัดการงานหลายอย่างพร้อมกันพวกเขาจะสลับระหว่างหน้ารายละเอียดงานและหน้ารายการแบบสอบถามอย่างต่อเนื่อง หากการกดปุ่ม Return ในเวลานี้ไม่สามารถบันทึกสถานะของหน้าการสืบค้นได้คุณจะต้องป้อนเงื่อนไขการสืบค้นอีกครั้งทุกครั้งที่คุณกลับไปที่หน้าการสืบค้น ประสบการณ์นี้ทนไม่ได้อย่างแน่นอน
ดังนั้นเราจำเป็นต้องหาวิธีการบันทึกสถานะหน้าเพื่อให้เมื่อผู้ใช้กดปุ่มทางเลือกเงื่อนไขและผลลัพธ์การสืบค้นยังคงอยู่ที่นั่น
สารละลาย
มีแนวคิดมากมายสำหรับการบันทึกสถานะหน้า แต่เราคิดว่าการใช้สถานที่แฮชควรเป็นวิธีที่ดีที่สุด
แนวคิดมีดังนี้:
1. หลังจากผู้ใช้เข้าสู่เงื่อนไขการสืบค้นและคลิกตกลงเราจะทำให้เงื่อนไขการสืบค้นเป็นสตริงและเพิ่มเงื่อนไขการสืบค้นลงใน URL ผ่าน "#" เพื่อรับ URL ใหม่จากนั้นโทรหาตำแหน่ง (URL ใหม่) เพื่อแก้ไขที่อยู่ในแถบที่อยู่เบราว์เซอร์
2. เมื่อผู้ใช้กดปุ่มทางเลือกที่จะถอยกลับไปที่หน้าเคียวรีก็สามารถกล่าวได้ว่าเมื่อหน้ากำลังโหลดให้วางตำแหน่งที่วางอยู่ในสภาพแบบสอบถามแล้วอัปเดตเงื่อนไขการสืบค้นเป็นแบบสอบถามและดำเนินการค้นหา
ความคิดนั้นง่ายมาก จุดสำคัญคือวิธีการตั้งสถานที่ วิธีนี้ไม่เพียง แต่จะปรับเปลี่ยน URL ของแถบที่อยู่ในเบราว์เซอร์ แต่ที่สำคัญกว่านั้นคือมันจะแทนที่บันทึกของหน้าปัจจุบันใน window.history หากไม่ได้ใช้วิธีการแทนที่แต่ละทางเลือกกลับจะกลับไปสู่เงื่อนไขการสืบค้นก่อนหน้า แน่นอนข้อกำหนดดังกล่าวอาจเป็นประโยชน์สำหรับบางโครงการ
ทางออกสุดท้าย
หากบทความนี้แบ่งปันแนวคิดการแก้ปัญหาข้างต้นเท่านั้นมันจะมีค่าเพียงเล็กน้อย ค่าของบทความนี้ควรเป็นคลาส JavaScript ที่เรียบง่าย แต่ทรงพลังมากที่เราเขียน
หากคุณเข้าใจวิธีการแก้ปัญหาข้างต้นลองดูที่คลาส JavaScript ที่เรียบง่ายนี้:
(function () {if (window.hashQuery) {return;} window.hashQuery = function () {}; hashQuery.prototype = {parsefromlocation: function () {ถ้า (location.hash === '' ; สำหรับ (var p ในนี้) {ถ้า (! this.hasownproperty (p) || typeof นี้ [p]! = 'String') {ดำเนินการต่อ;} ถ้า (ดัชนี <properties.length) {นี้ [p] = คุณสมบัติ [ดัชนี]; ถ้า (p] === '-') คุณสมบัติ = []; สำหรับ (var p ในนี้) {ถ้า (! this.hasownproperty (p) || typeof นี้ [p]! = 'String') {ดำเนินการต่อ;} var val = this [p]; properties.push (value === ''? '-': ค่า); Properties.oin ('|'); location.replace (url);}};}) ();มีเพียง 2 วิธีในชั้นเรียนนี้ วิธีการ hashQuery.parseFromLocation () deserializes จากตำแหน่ง hash ไปยังอินสแตนซ์ของคลาสย่อย HashQuery วิธีการ hashQuery.UpDateLocation () ทำให้เป็นอนุกรมและอัปเดตอินสแตนซ์ของคลาสย่อยแฮชเคอรี่ปัจจุบันไปยัง window.location
คุณจะเห็นว่าคลาสแฮชเคอรี่ไม่มีคุณสมบัติเนื่องจากเรากำหนดคลาสฐานเท่านั้นและคุณสมบัติของคลาสจะถูกกำหนดไว้ในคลาสย่อย นี่เป็นเรื่องจริงเนื่องจากเงื่อนไขการสืบค้นสามารถรู้จักได้ในหน้าเฉพาะเท่านั้น
นอกจากนี้ให้สังเกตการทำให้เป็นอนุกรมและ deserialization ที่นี่ การทำให้เป็นอนุกรมที่นี่เป็นเพียงการใช้กลไกการสะท้อน JavaScript เพื่อแยกค่าของแอตทริบิวต์สตริงทั้งหมด (ตามลำดับ) ของอินสแตนซ์ด้วย "|"; ในขณะที่การทำให้เป็นอนุกรมคือการแยกสตริงด้วย "|" จากนั้นอัปเดตคุณสมบัติของอินสแตนซ์ด้วยการสะท้อน (ตามลำดับ)
วิธีใช้คลาสแฮชเคอรี่
ใช้งานง่ายมาก
ขั้นตอนแรกคือการกำหนดคลาสย่อยและเพิ่มเงื่อนไขการสืบค้นทั้งหมดที่จำเป็นเพื่อใช้ในแอตทริบิวต์สตริงเช่นรหัสของเรา:
(function () {window.tasksearchhashquery = function () {hashQuery.constructor.call (นี่); this.iterationid = ''; this.assigneduserid = ''; this.status = '' this.key.keyward = ''; hashQuery ();}) ();ในขั้นตอนที่สองให้โทรหาวิธี hashQuery.parseFromLocation () และ hashQuery.updatelocation () ในหน้าการสืบค้น รหัสต่อไปนี้เป็นหน้าสอบถามที่สมบูรณ์ของเรา:
(function () {var urls = {list: "/app/task/list"}; var hashQuery = null; var pager = null; $ (เอกสาร). พร้อม (ฟังก์ชั่น () {hashQuery = new TaskSearchHashQuery (); ObjectUpDateFormByHashQuery (); $ ("#btnsearch") คลิก (ฟังก์ชั่น () {UpdateHashQueryByform (); hashQuery.upDatelocation (); // เรียกที่นี่ location.hash $ ("#lblcount"). html ("โหลด ... "); pager.reload (); page.hidesearch ();}); pager = new ListPager ("#listtasks", urls.list); pager.getPostData = ฟังก์ชั่น (ดัชนี) page.projectId + "& iterationId =" + hashQuery.iterationId + "& asigedUserId =" + hashQuery.assignedUserId + "& status =" + hashQuery.status + "& keyword =" + hashQuery.keyways;}; $ ("#hfpagertotalcount"). val () + "งาน"); $ ("#hfpagertotalcount"). ลบ ();}; pager.init ();}); ฟังก์ชั่น updiefhashquerybyform () {hashquery.iterationid = $ ("#ddliterations $ ("#ddlusers"). val (); hashQuery.status = $ ("#ddlstatuses"). val (); hashQuery.keyword = $ ("#txtkeyword"). val (); {$ ("#ddliterations"). val (hashQuery.iterationId); $ ("#ddlusers"). val (hashQuery.assignedUserid); $ ("#ddlstatuses") val (hashquery.status);สรุป
นี่คือทั้งหมดที่เรารู้เกี่ยวกับการใช้สถานที่ Hash ในโครงการของเราเพื่อบันทึกสถานะหน้า ฉันสงสัยว่าคุณจัดการกับความต้องการเช่นนี้ในโครงการเว็บของคุณอย่างไร?
เนื้อหาข้างต้นเป็นเคล็ดลับสำหรับการบันทึกสถานะหน้าของตำแหน่ง. hash ที่บรรณาธิการแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!