في الآونة الأخيرة ، أنا أتعلم العمود الفقري. عند تعلم فهم العمود الفقري ، يجب عليك أولاً فهم المنتجع الصحي. عند فهم SPA ، يجب أولاً أن تفهم كيف يمكن للتطبيقات ذات الصفحة الواحدة تغيير عنوان URL دون تحديث الصفحة.
بالمقارنة مع القفزات إلى صفحات مختلفة ، يمكن القول أن Ajax قام بتحسين تجربة تصفح المستخدم بشكل كبير. من الجيد جدًا عدم رؤية الشاشة البيضاء بين تبديل الصفحة. ومع ذلك ، فإن العديد من تطبيقات Ajax السابقة لم تدعم حركة المتصفح إلى الأمام والخلف ، والتي تسببت في عودة المستخدمين على الفور إلى موقعهم الأصلي بغض النظر عن المكان الذي يتصفحون فيه على الموقع الإلكتروني ، ولم يتمكن المستخدمون من تبديل تاريخ التصفح عبر زر الحركة الأمامية والخلف للمتصفح.
للمشكلة الأولى ، من السهل جدًا حلها. فقط استخدم ملفات تعريف الارتباط أو LocalStorage لتسجيل حالة التطبيق. اقرأ هذه الحالة عند تحديث الصفحة ، ثم أرسل طلب AJAX المقابل لتغيير الصفحة. لكن المشكلة الثانية مزعجة للغاية ، دعنا نتحدث عن حل المتصفحات الحديثة أولاً.
حل HTML5
لفهم كيف يمكن لـ HTML5 التقدم والخلف ، يجب أولاً فهم كائنات التاريخ وكائنات الموقع.
كائن التاريخ
خصائص كائن التاريخ
1. الطول: إرجاع عدد عناوين URL في قائمة سجل المتصفح. لكل صفحة يزور المستخدم على العلامة الحالية ، يتم إضافة هذا الرقم بحلول 1. لأسباب الخصوصية ، لا يكون محتوى عنوان URL محددًا مرئيًا.
2.state: لا يمكن إضافة أو تعديل الكائنات المتعلقة بعنوان URL الحالي إلا من خلال PushState و Replacestate. يمكننا استخدامها لتخزين المعلومات المتعلقة بعناوين URL.
طريقة كائن التاريخ
1.history.back ()
هذه الطريقة لا تحتوي على معلمات. بعد التشغيل ، سيعود إلى الصفحة السابقة ، وهو ما يعادل النقر على زر العودة للمتصفح.
2.History.Forward ()
هذه الطريقة لا تحتوي على معلمات. بعد التشغيل ، سيعود إلى الصفحة التي تتصفحها قبل تصفحها ، وهو ما يعادل النقر فوق الزر التابع للمتصفح.
3.history.go (رقم)
تقبل هذه الطريقة معلمة متغير تشكيل ، History.GO (-1) تعادل دعم صفحة ، History.GO (1) تعادل تقدم صفحة ، History.GO (0) ستعمل على تحديث الصفحة الحالية.
4.history.pushstate (الدولة ، العنوان ، URL)
مفتاح تغيير عنوان URL وليس منعش الصفحة هو. ستغير هذه الطريقة الموقع. HREF من الصفحة الحالية وتعديل كائن History.state الحالي. بعد التنفيذ ، سيتم زيادة History.Length بمقدار 1. هذه الطريقة تقبل ثلاث معلمات.
1.state: الكائن المتعلق بعنوان URL الحالي.
2.Title: عنوان الصفحة ، ولكن جميع المتصفحات تتجاهلها. لتغيير العنوان ، لا تزال بحاجة إلى استخدام document.title.
3.URL: عنوان URL مع نفس المجال مثل الصفحة الحالية ، sity.href ستصبح هذه القيمة.
5.history.replacestate (الدولة ، العنوان ، URL)
هذه الطريقة هي نفسها كما هو مذكور أعلاه ، لكنها لن تغير التاريخ.
لاحظ أن المعلمة الثالثة PushState و Relacestate لا يمكنها المجال المتبادل ولن تؤدي إلى حدوث حدث Popstate للمتصفح وحدث OnhashChange (تم اختباره تحت Chrome33).
كائن الموقع
بالإضافة إلى النقر فوق الزر "التوجيه/الخلف" وحدث السجل ، يمكنك أيضًا تغيير عنوان URL من خلال طريقة الموقع وتعديل خصائص الموقع:
خصائص كائن الموقع (اقرأ وكتابة):
1. HOST:DOMAIN اسم المنفذ
2. الاسم المستند: اسم المجال
3.Port: رقم المنفذ
4.protocol: بروتوكول
5.href: المسار الكامل
6. الأطباء: بروتوكول + اسم المجال + منفذ
7.hash: عنوان URL (التجزئة) بدءًا من علامة الجنيه (#)
8.PathName: مسار المستند + اسم المستند
9. البحث :(؟) المحتوى التالي
يمكنك تحقيق الغرض من التحديث المجاني عن طريق تغيير الموقع. href أو location.hash.
طرق كائن الموقع:
1.Assign: قم بتغيير قيمة عنوان URL وأضف عنوان URL الحالي إلى السجل. سيزيد الطول بمقدار 1. site.assig ('#' + x) سيغير عنوان URL ولكنه لن يقوم بتحديث الصفحة.
2.Reload: تحديث الصفحة.
3. التبادل: تغيير قيمة عنوان URL ، ولكن التاريخ. لا يزال طول الطول دون تغيير. نفس طريقة الاستخدام تعيين.
حدث بوبستات
عندما يتغير عنوان URL ، على سبيل المثال ، إذا انقر المستخدم على زر إعادة التوجيه/الخلف ، فإن History.go (n) (n لا يساوي 0) ، sity.hash = x (x لا يساوي الموقع الحالي. hash) سيؤدي إلى هذا الحدث. يمكنك استخدامه لمراقبة عنوان URL لتنفيذ وظائف مختلفة.
نسخة الكود كما يلي:
window.onpopstate = function () {
// do sth
}
حدث onhashchange
سيؤدي تغيير قيمة التجزئة إلى إثارة حدث Popstate ، ولن يؤدي ذلك بالضرورة إلى حدوث حدث Onhashchange. بعد الاختبار:
1. تغييرات التجزئة ولكن site.pathName لا يزال دون تغيير سيؤدي إلى حدث onhashchange ، مثل History.pushstate ("،" ، '#abc') ؛
2. إذا كان التجزئة والموقع.
كيف تكتب المتصفحات القديمة
لا تدعم المتصفحات القديمة pushstate و applacestate ، وبالتالي فإن طريقة مراقبة تغييرات URL من خلال popstate (في الواقع ، لا تدعم هذه الطريقة). بعد ذلك ، يمكنك فقط تغيير المحتوى وراء URL# لتحقيق أي تحديث ، لكنهم لا يدعمون onhashchange ، لذلك فأنت غير مبال بالتغييرات في عنوان URL (باستثناء أن الصفحة سوف تمرير إلى موضع المعرف المقابل للصفحة). ثم يمكنك فقط استخدام الخطوة النهائية: استطلاع ، و setInterval للاستماع إلى قيمة عنوان URL. مثله:
نسخة الكود كما يلي:
var prevhash = window.location.hash ؛
var callback = function () {...}
window.setInterval (function () {
if (window.location.hash! = prevhash) {
prevhash = window.location.hash ؛
رد الاتصال (Prevhash) ؛
}
} ، 100) ؛
بالطبع ، هذه الكتابة محبطة للغاية. إذا لم تفكر في النقر على علامة A مع معرف على الصفحة لتغيير التجزئة ، فيمكنك استخدام نمط التصميم لتنفيذ عنوان URL المراقبة بأناقة. على سبيل المثال ، يستخدم نمط المراقب الكلاسيكي فئة لتنفيذ وظيفة تغيير التجزئة ، ثم جميع الفئات (المراقبون) التي ترغب في الاستماع إلى التغييرات في عنوان URL للاشتراك في فئة (المراقب).
نسخة الكود كما يلي:
// تغيير فئة عنوان URL
وظيفة urlchanger () {
var _ this = this ؛
this.Observers = [] ؛
// إضافة مراقب
this.addobserver = function (obj) {...}
// حذف المراقب
this.deleteobserver = function (obj) {...}
// إخطار المراقبين
this._notifyobservers = function () {
var length = _this.Observers.length ؛
console.log (الطول)
لـ (var i = 0 ؛ i <length ؛ i ++) {
_This.Observers [i] .update () ؛
}
}
// تغيير عنوان URL
this.changeurl = function (hash) {
window.location.hash = التجزئة ؛
_this._notifyObservers () ؛
}
}
// فئة الاستماع
وظيفة OneOfobServers () {
var _ this = this ؛
this.update = function () {...}
}
//ينجز
var o1 = urlchanger new urlchanger () ؛
var o2 = new OneOfobServers () ؛
O1.Addobserver (O2) ؛
O1.CHANGEURL ('fun/arg1/arg2/') ؛
// O2 هل فعل sth ...