الموقع. نصائح لحفظ صفحة الصفحة

خاصية التجزئة عبارة عن سلسلة قابلة للقراءة وقابلة للكتابة هي الجزء المرساة من عنوان URL (الجزء الذي يبدأ برقم #).

قواعد

الموقع

في مشروعنا ، هناك عدد كبير من الصفحات مع قائمة نتائج الاستعلام AJAX +. نظرًا لأن Ajax يتم إرجاع نتيجة الاستعلام ، عندما ينقر المستخدم على عنصر في القائمة ويدخل صفحة التفاصيل ، ينقر على زر استعادة المتصفح للعودة إلى صفحة استعلام Ajax. في هذا الوقت ، يعلم الجميع أن النموذج ونتائج صفحة الاستعلام قد عاد إلى الحالة الافتراضية.

إذا كان عليك إعادة إدخال معايير الاستعلام في كل مرة تعود فيها إلى الصفحة ، أو إذا كان عليك الانتقال إلى صفحة القائمة ، فسيحصل المستخدمون على الجنون مع هذه التجربة.

في مشروعنا ، كتبنا فئة قاعدة JavaScript بسيطة للغاية لمعالجة الموقع. hash وحفظ حالة الصفحة. اليوم سوف أشاركها معك.

(قد يكون محتوى هذه المقالة أمرًا صعبًا بعض الشيء بالنسبة للمبتدئين في JavaScript ، لأنه يتضمن المعرفة الموجهة نحو كائن JS ، مثل تحديد الفئات ، والميراث ، والطرق الافتراضية ، والتفكير ، وما إلى ذلك)

دعونا نلقي نظرة على احتياجاتنا أولاً

مشروعنا هو نظام إدارة المهام H5 قائم على WeChat. يظهر النموذج الأولي للصفحة في الشكل أدناه:

يجب أن تكون المتطلبات واضحة للغاية ، أي انقر فوق نموذج الاستعلام ، واستخدم AJAX لإرجاع نتائج الاستعلام ، ثم انقر فوق مهمة في القائمة لإدخال صفحة تفاصيل المهمة. نظرًا لأن المسؤولين (مديرو المشاريع) عادة ما يتعاملون مع مهام متعددة في وقت واحد ، فسيتم تبديلهم باستمرار بين صفحة تفاصيل المهمة وصفحة قائمة الاستعلام. إذا لم يتمكن الضغط على مفتاح الإرجاع في هذا الوقت من حفظ حالة صفحة الاستعلام ، فعليك إعادة إدخال شروط الاستعلام في كل مرة تعود فيها إلى صفحة الاستعلام. هذه التجربة بالتأكيد لا تطاق.

لذلك ، نحتاج إلى إيجاد طريقة لحفظ حالة الصفحة بحيث عندما يضغط المستخدم على مفتاح التراجع ، لا تزال شروط الاستعلام والنتائج موجودة.

حل

هناك العديد من الأفكار لتوفير حالة الصفحة ، لكننا نعتقد أن استخدام الموقع. يجب أن يكون Hash هو أفضل طريقة.

الفكرة هي كما يلي:

1. بعد أن يدخل المستخدم شروط الاستعلام والنقرات على ما يرام ، نقوم بتسلسل شروط الاستعلام في سلسلة ، ونضيف شروط الاستعلام إلى عنوان URL من خلال "#" للحصول على عنوان URL جديد ، ثم اتصل على موقع. replace (عنوان URL الجديد) لتعديل العنوان في شريط عنوان المتصفح.

2. عندما يضغط المستخدم على مفتاح التراجع للعودة إلى صفحة الاستعلام ، يمكن القول أيضًا أنه عندما يتم تحميل الصفحة ، وتجاهل الموقع.

الفكرة بسيطة للغاية. النقطة الأساسية هي طريقة الموقع. هذه الطريقة ليست فقط تعديل عنوان URL الخاص بشريط العناوين في المتصفح ، ولكن الأهم من ذلك ، سيحل محل سجل الصفحة الحالية في Window.history. إذا لم يتم استخدام طريقة الموقع. الاستعداد ، فسيعود كل احتياطي إلى حالة الاستعلام السابقة. بالطبع ، قد تكون هذه المتطلبات مفيدة أيضًا لمشاريع معينة.

الحل النهائي

إذا كانت هذه المقالة تتقاسم أفكار الحل أعلاه فقط ، فستكون ذات قيمة ضئيلة. يجب أن تكون قيمة هذه المقالة هي فئة JavaScript بسيطة ولكنها قوية للغاية.

إذا فهمت الحل أعلاه ، فقم بإلقاء نظرة على فئة JavaScript البسيطة:

 (function () {if (window.hashquery) {return ؛} window.hashquery = function () {} ؛ hashquery.prototype = {parsefromlocation: function () {if (locial.hash.subs ؛ (var p في هذا) {if (! this.hasownproperty (p) || typeof this [p]! = 'string') {on} if (index <properties.length) {this [p] = properties [index] ؛ if (this [p] === '-') ] properties.join ('|') ؛ location.replace (url) ؛}} ؛}) () ؛

لا يوجد سوى 2 طريقتين في هذا الفصل. طريقة hashquery.parsefromlocation () تهدأ من الموقع. تقوم طريقة HashQuery.upDateLocation () بتسلسل وتحديث مثيل الفئة الفرعية Hashquery الحالية إلى window.location.

يمكنك أن ترى أن فئة Hashquery لا تحتوي على خصائص ، لأننا نحدد فقط فئة أساسية ، ويتم تعريف خصائص الفصل في الفئة الفرعية. هذا أمر واقعي أيضًا ، لأن شروط الاستعلام لا يمكن معروفة إلا على الصفحة المحددة.

أيضا ، لاحظ التسلسل وفرس هنا. التسلسل هنا هو فقط لاستخدام آلية انعكاس JavaScript لفصل قيم جميع سمات السلسلة (بالترتيب) للمثال مع "|" ؛ في حين أن التسلسل هو فصل السلاسل بـ "|" ، ثم تحديث خصائص المثيل مع الانعكاس (بالترتيب).

كيفية استخدام فئة hashquery

إنه بسيط للغاية للاستخدام.

الخطوة الأولى هي تحديد الفئة الفرعية وإضافة جميع شروط الاستعلام اللازمة لاستخدامها في سمات السلسلة ، مثل الكود لدينا:

 (function () {window.taskesearchhashquery = function () {hashquery.constructor.call (this) ؛ this.iterationId = '' ؛ hashquery () ؛}) () ؛

في الخطوة الثانية ، اتصل بطرق hashquery.parsefromlocation () و hashquery.updatelocation () على صفحة الاستعلام. الرمز التالي هو صفحة الاستعلام الكاملة لدينا:

 (function () {var urls = {list: "/app/task/list"} ؛ var hashquery = null ؛ var pager = null ؛ $ (document) .Ready (function () {hashquery = new tasksearchHquery () ؛ hashquery.parsefromlocation () ؛ ObjectupDateFormByHashQuery () ؛ $ ("#btnsearch") location.hash $ ("#lblcount"). html ("loading ...") ؛ pager.reload () ؛ page.hidesearch () ؛}) ؛ pager = new listPager ( page.projectid + "& teerationId =" + hashquery.iterationid + "& issidedUserId =" + hashquery.AssignedUserId + "& status =" + hashquery.status + "& keyword =" + hashquery.keyword ؛} ؛ pager.onloaded = function () $ ("#hfpagertOtalCount"). val () + "المهام") ؛ $ ("#hfpagertalcount"). remove () ؛} ؛ pager.init () ؛}) ؛ function updateHashqueryByform () {hashquery.iterationid = $ ("#ddliterations"). $ ("#ddlusers"). val () ؛ hashquery.status = $ ("#ddlstatuses"). val () ؛ hashquery.keyword = $ ("#txtkeyword"). val () ؛} ؛ {$ ("#ddliterations")

لخص

هذا هو كل ما نعرفه عن استخدام الموقع. hash في مشروعنا لحفظ حالة الصفحة. أتساءل كيف تتعامل مع مثل هذه الاحتياجات في مشروع الويب الخاص بك؟

المحتوى أعلاه هو نصائح لحفظ حالة الموقع في الموقع الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!