Свойство хэша - это читаемая и записенная строка, которая является якорной частью URL -адреса (часть, начинающаяся с номера #).
грамматика
Местоположение. ХАШ
В нашем проекте есть большое количество страниц с формой запроса AJAX + списка результатов. Поскольку результат запроса возвращается Ajax, когда пользователь нажимает элемент в списке и входит на страницу сведений, он нажимает кнопку Brower Back, чтобы вернуться на страницу запроса Ajax. В настоящее время все знают, что форма и результаты страницы запроса вернулись в состояние по умолчанию.
Если вам нужно повторно ввести критерии запроса каждый раз, когда вы возвращаетесь на страницу, или если вам нужно перейти на страницу списка, то пользователи действительно сойдут с ума от этого опыта.
В нашем проекте мы написали очень простой базовый класс JavaScript, чтобы обработать местоположение. Hash и сохранить статус страницы. Сегодня я поделюсь этим с вами.
(Содержание этой статьи может быть немного трудным для начинающих в JavaScript, потому что оно включает в себя объектно-ориентированные знания JS, такие как определение классов, наследование, виртуальные методы, отражение и т. Д.)
Давайте сначала посмотрим на наши потребности
Наш проект-это система управления задачами H5 на основе WeChat. Прототип страницы, который будет завершен, показан на рисунке ниже:
Требования должны быть очень ясными, то есть нажмите на форму запроса, используйте AJAX, чтобы вернуть результаты запроса, а затем нажмите на задачу в списке, чтобы ввести страницу сведений о задаче. Поскольку администраторы (менеджеры проектов) обычно выполняют несколько задач одновременно, они постоянно переключаются между страницей сведений о задаче и страницей списка запросов. Если нажатие клавиши возврата в настоящее время не может сохранить статус страницы запроса, то вам приходится повторно вводить условия запроса каждый раз, когда вы возвращаетесь на страницу запроса. Этот опыт определенно невыносим.
Поэтому нам нужно найти способ сохранить статус страницы, чтобы, когда пользователь нажимал запасную клавишу, условия и результаты запроса все еще были там.
Решение
Есть много идей для сохранения статуса страницы, но мы думаем, что использование местоположения. Hash должен быть лучшим способом.
Идея заключается в следующем:
1. После того, как пользователь входит в условия запроса и нажимает ОК, мы сериализуем условия запроса в строку и добавляем условия запроса в URL через «#», чтобы получить новый URL, а затем вызовать местоположение (новый URL) для изменения адреса в адресной строке браузера.
2. Когда пользователь нажимает кнопку резерва, чтобы вернуться к странице запроса, можно также сказать, что когда страница загружается, понижает местоположение.
Идея очень проста. Ключевым моментом является метод местоположения. Этот метод предназначен не только для изменения URL -адреса адресной строки в браузере, но, что более важно, он заменит запись текущей страницы в Window.history. Если метод Location.Replace не используется, каждый запасной удар вернется к предыдущему условию запроса. Конечно, такие требования также могут быть полезны для определенных проектов.
Окончательное решение
Если эта статья имеет только приведенные выше идеи решения, она будет иметь небольшую ценность. Ценность этой статьи должна быть простым, но очень мощным классом JavaScript, который мы написали.
Если вы понимаете приведенное выше решение, посмотрите на этот простой класс JavaScript:
(function () {if (window.hashquery) {return;} window.hashquery = function () {}; hashquery.prototype = {parsefromlocation: function () {if (location.hash === '' || location.hash.length ===) {return; verex varex = locath. ; for (var p в этом) {if (! this.hashownproperty (p) || typeof this [p]! = 'String') {contine;} if (index <properties.length) {this [p] = свойства [index]; if (this [p] === '-') {this [p] = '';}}}}}; {var properties = []; for (var p в этом) {if (! this.hashownproperty (p) || typeof this [p]! = 'string') {contine;} var value = this [p]; Properties.push (значение === ''? Properties.join ('|'); location.replace (url);}};}) ();В этом классе есть только 2 метода. Метод hashquery.parsefromlocation () deserialization от местоположения. Hash до экземпляра подкласса Hashquery. Метод hashquery.updateLocation () сериализует и обновляет экземпляр текущего подкласса Hashquery to window.location.
Вы можете видеть, что у класса Hashquery нет свойств, потому что мы определяем только базовый класс, а свойства класса определены в подклассе. Это также реалистично, потому что условия запроса могут быть известны только на конкретной странице.
Также обратите внимание на сериализацию и десериализацию здесь. Сериализация здесь просто для использования механизма отражения JavaScript, чтобы отделить значения всех атрибутов строки (по порядку) экземпляра с «|»; В то время как сериализация должна разделить строки с «|», а затем обновить свойства экземпляра с отражением (по порядку).
Как использовать класс хешквери
Это очень просто в использовании.
Первым шагом является определение подкласса и добавить все условия запроса, необходимые для атрибутов строки, таких как наш код:
(function () {window.tasksearchhashquery = function () {hashquery.constructor.call (this); this.iterationid = ''; this.assignedUserid = ''; this.status = ''; this.keyword = '';}; tasksearchhashquery.constructorcroor = tasksearchearchearch Hashquery ();}) ();На втором этапе вызовите методы hashquery.parsefromlocation () и hashquery.updatelocation () на странице запроса. Следующий код - наша полная страница запроса:
(function () {var urls = {list: "/app/task/list"}; var hashquery = null; var pager = null; $ (document) .ready (function () {hashquery = new tasksearchhashquer objectupdateformbyhashquery (); $ ("#btnsearch"). click (function () {updatehashquerybyform (); hashquery.updateLocation (); // Вызовит здесь, сериализируйте условия запроса и обновите его на location.hash$("#lblCount").html("Loading...");pager.reload();page.hideSearch();});pager = new ListPager("#listTasks", urls.list);pager.getPostData = function(index) {return "pageIndex=" + index + "&pageSize=" + "&projectId=" + Page.ProjectId + "& iterationId =" + hashQuery.iterationId + "& usdEdUserId =" + hashquery.assignedUserid + "& status =" + hashquery.status + "& Keyword =" + hashquery.keyford;}; pager.onloaded = function () {##lblcount "). $ ("#hfpagertotalCount"). val () + "tasks"); $ ("#hfpagertotalCount"). remove ();}; pager.init ();}); function updatehashquerybyform () {hasshquery.iterationid = $ ("#ddliterations"). ValeRectorations "); $ ("#ddlusers"). val (); hashquery.status = $ ("#ddlStatuses"). val (); hashquery.keyword = $ ("#txtkeyword"). val ();}; function updateFormbyHaShquery () {$ ("#ddliterations"). val (hashquery.iterationid); $ ("#ddlusers"). val (hashquery.assigneduserid); $ ("#ddlstatuses"). val (hashquery.status); $ ("#txtkeyword"). val (hashquery.Суммировать
Это все, что мы знаем об использовании локации. В нашем проекте для сохранения статуса страницы. Интересно, как вы справляетесь с такими потребностями в своем веб -проекте?
Приведенный выше контент - это советы по сохранению статуса страницы места. Я надеюсь, что это будет полезно для всех!