해시 속성은 URL의 앵커 부분 ( # 번호로 시작하는 부분) 인 읽을 수 있고 쓰기 쉬운 문자열입니다.
문법
location.hash
우리 프로젝트에는 Ajax Query Form + 결과 목록이있는 많은 페이지가 있습니다. 쿼리 결과는 Ajax에 의해 반환되므로 사용자가 목록에서 항목을 클릭하고 세부 정보 페이지를 입력하면 브라우저 뒤로 버튼을 클릭하여 AJAX 쿼리 페이지로 돌아갑니다. 현재 모든 사람은 쿼리 페이지의 양식과 결과가 기본 상태로 돌아 왔다는 것을 알고 있습니다.
페이지로 돌아올 때마다 쿼리 기준을 다시 입력해야하거나 목록 페이지로 이동 해야하는 경우 사용자는이 경험에 정말로 미쳤습니다.
프로젝트에서 우리는 위치를 처리하기 위해 매우 간단한 JavaScript 기본 클래스를 작성했습니다. 오늘 나는 그것을 당신과 공유 할 것입니다.
(이 기사의 내용은 클래스 정의, 상속, 가상 방법, 반사 등과 같은 JS 객체 지향 지식을 포함하기 때문에 JavaScript의 초보자에게는 약간 어려울 수 있습니다).
먼저 우리의 요구를 살펴 보겠습니다
우리 프로젝트는 WeChat 기반 H5 작업 관리 시스템입니다. 완료 할 페이지 프로토 타입은 다음 그림에 나와 있습니다.
요구 사항은 매우 명확해야합니다. 즉, 쿼리 양식을 클릭하고 AJAX를 사용하여 쿼리 결과를 반환 한 다음 목록에서 작업을 클릭하여 작업 세부 정보 페이지를 입력하십시오. 관리자 (프로젝트 관리자)는 일반적으로 여러 작업을 한 번에 처리하므로 작업 세부 사항 페이지와 쿼리 목록 페이지간에 지속적으로 전환됩니다. 현재 Return Key를 누르면 쿼리 페이지의 상태를 저장할 수없는 경우 쿼리 페이지로 돌아올 때마다 쿼리 조건을 다시 입력해야합니다. 이 경험은 확실히 견딜 수 없습니다.
따라서 사용자가 폴백 키를 누르면 쿼리 조건과 결과가 여전히 존재하도록 페이지 상태를 저장하는 방법을 찾아야합니다.
해결책
페이지 상태를 저장하기위한 많은 아이디어가 있지만 위치를 사용하는 것이 가장 좋은 방법이어야한다고 생각합니다.
아이디어는 다음과 같습니다.
1. 사용자가 쿼리 조건을 입력하고 확인을 클릭 한 후 쿼리 조건을 문자열로 직렬화하고 "#"를 통해 URL에 쿼리 조건을 추가 한 다음 위치 (새 URL)를 호출하여 브라우저 주소 표시 줄에서 주소를 수정하십시오.
2. 사용자가 폴백 키를 눌러 쿼리 페이지로 다시 떨어지면 페이지가로드되면 Location.shash를 쿼리 조건으로 삭제 한 다음 쿼리 조건을 쿼리 양식으로 업데이트하고 쿼리를 실행한다고 말할 수 있습니다.
아이디어는 매우 간단합니다. 핵심 요점은 location.replace 메소드입니다. 이 방법은 브라우저에서 주소 표시 줄의 URL을 수정하는 것뿐만 아니라 더 중요한 것은 Window.history의 현재 페이지의 레코드를 대체하는 것입니다. location.replace 메소드를 사용하지 않으면 각 폴백은 이전 쿼리 조건으로 돌아갑니다. 물론 이러한 요구 사항은 특정 프로젝트에도 유용 할 수 있습니다.
최종 솔루션
이 기사에서 위의 솔루션 아이디어 만 공유하면 가치가 거의 없습니다. 이 기사의 가치는 우리가 쓴 간단하지만 강력한 JavaScript 클래스 여야합니다.
위의 솔루션을 이해하면이 간단한 JavaScript 클래스를 살펴보십시오.
(function () {if (wind (var P in this) {if (! this.hasOwnProperty (p) || this [p]! = 'string') {계속;} if (index <properties.length) {this [p] = properties [index]; if (this [p] === '-') {this [p] = '';}}}}, function :) = []; for (var p in this in this) {if (! this.hasOwnProperty (p) || properties.join ( '|'); location.replace (url);}};}) ();이 클래스에는 2 가지 방법 만 있습니다. hashquery.parsefromlocation () 메소드는 location.shash에서 해시리 서브 클래스의 인스턴스로 사로화됩니다. hashquery.updatelocation () 메소드는 현재 해시리 서브 클래스의 인스턴스를 Window.location의 인스턴스를 직렬화하고 업데이트합니다.
기본 클래스 만 정의하고 클래스의 속성은 서브 클래스에 정의되기 때문에 해시리 클래스에는 속성이 없음을 알 수 있습니다. 쿼리 조건은 특정 페이지에서만 알 수 있기 때문에 이것은 또한 현실적입니다.
또한 여기서 직렬화 및 사제화에 주목하십시오. 여기서 직렬화는 JavaScript 반사 메커니즘을 사용하여 인스턴스의 모든 문자열 속성 (순서)의 값을 "|"로 분리하는 것입니다. 직렬화는 문자열을 "|"로 분리 한 다음 인스턴스의 속성을 반사로 업데이트하는 것입니다 (순서대로).
해시리 클래스 사용 방법
사용하기가 매우 간단합니다.
첫 번째 단계는 서브 클래스를 정의하고 코드와 같은 문자열 속성에 사용하는 데 필요한 모든 쿼리 조건을 추가하는 것입니다.
(function () {wind hashquery ();}) ();두 번째 단계에서는 쿼리 페이지에서 hashquery.parsefromlocation () 및 hashquery.updatelocation () 메소드를 호출하십시오. 다음 코드는 전체 쿼리 페이지입니다.
(function () {var urls = {list : "/app/task/list"}; var hashquery = null; var pager = null; $ (document) .ready (function () {hashquery = new tasksearchhashquery (); hashquery.parsefromlocation (); // deserialize ObjectUpDateFormbyHashQuery (); $ ( "#btnsearch"). 클릭 (function () {updateHashQueryByform (); hash hashqueryByform (); hashquery.updatelocation (); query 조건을 일련화하고 업데이트합니다. location.hash $ ( "#lblcount"). html ( "로드 ..."); Pager.Reload (); page.hideearch ();}); pager = new listPager ( "#listtasks", urls.list); pager.getPostData = function (index) {return " + index +"& pagesize = & possecid = & pagesize = & pagesize. "& iterationId =" + hashquery.iterationId + "& antadeedUserId =" + hashquery.assignedUserId + "& status =" + hashquery.status + "& keyword =" + hashquery.keyword;}; pager.onloaded = function () {$ ( "#lblcount"). " +" + " +" + " +" + " + $ ( "#hfpagertotalCount"). val () + "tasks"); $ ( "#hfpagertotalCount"). remove ();};}; pager.init ();}); function updateHashQueryByform () {hashquery.iterationId = $ ( "#ddliterations"); hashquery $ ( "#ddlusers"). val (); hashquery.status = $ ( "#ddlstatuses"). val (); hashquery.keyword = $ ( "#txtkeyword"). val ();}; 함수 updateformbyHashQuery () {$ ( "#ddliterations"). val (hashquery.iterationid); $ ( "#ddlusers"). val (hashquery.assigneduserid); $ ( "#ddlstatuses"). val (hashquery.status); $ ( "#txtkeyword");};});요약
이것은 프로젝트에서 위치를 사용하여 페이지 상태를 저장하는 것에 대해 우리가 아는 전부입니다. 웹 프로젝트에서 그러한 요구를 어떻게 처리하는지 궁금합니다.
위의 내용은 위치의 페이지 상태를 저장하기위한 팁입니다. 편집자가 소개 한 해시입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!