مقدمة
يتم دعم التوجيه الأمامي في العديد من أطر مكتبة JS مفتوحة المصدر ، مثل AngularJs ، العمود الفقري ، ReactJs ، إلخ. مبدأ التوجيه الأمامي هو نفس التوجيه الخلفي. يسمح لجميع التفاعلات ويعرضها على صفحة واحدة للتشغيل لتقليل طلبات الخادم وتحسين تجربة العملاء. تستخدم المزيد والمزيد من مواقع الويب ، وخاصة تطبيقات الويب ، التوجيه الأمامي.
HTML
هناك قائمة التنقل UL على الصفحة ، ويتم استخدام نتيجة DIV لعرض النتائج. عند النقر فوق قائمة التنقل ، سيتم عرض محتويات نتائج مختلفة في #Result.
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/product"> المنتج </a> </li> <li> <a href = "#/server"> service </a> </li> </ul> <div id = "result">
جافا سكريبت
دعنا نتحدث عن المبدأ الموجز لتنفيذ التوجيه في الواجهة الأمامية. أخذ نموذج التجزئة (يمكن معالجته أيضًا باستخدام API History) كمثال ، عندما يتم تجزئة تغيير عنوان URL ، يتم تشغيل رد الاتصال المسجل HashChange ، ويتم تنفيذ عمليات مختلفة في رد الاتصال ويتم عرض محتويات مختلفة.
دالة Router () {this.Routes = {} ؛ this.cururl = '' ؛ this.Route = function (path ، callback) {this.Routes [path] = callback || وظيفة(){}؛ } ؛ this.refresh = function () {this.cururl = location.hash.slice (1) || '/' ؛ this.Routes [this.cururl] () ؛ } ؛ this.init = function () {window.adDeventListener ('load' ، this.refresh.bind (this) ، false) ؛ window.addeventListener ('HashChange' ، this.refresh.bind (this) ، false) ؛ }}في الكود أعلاه ، يوفر تطبيق كائن نظام التوجيه بشكل أساسي ثلاث طرق:
يستمع init إلى حدث تحديث تجزئة عنوان URL للمتصفح.
يقوم Route بتخزين عمليات الاسترجاعات أثناء تحديثات المسار إلى طرق صفيف رد الاتصال ، وستكون وظيفة رد الاتصال مسؤولة عن تحديث الصفحة.
ينفذ تحديث وظيفة رد الاتصال المقابلة لعنوان URL الحالي وتحديث الصفحة.
طريقة استدعاء جهاز التوجيه هي كما يلي:
انقر لتشغيل تغيير عنوان URL وتحديث المحتوى وفقًا لذلك. بعد التشغيل ، ستجد أنه في كل مرة تنقر فيها على القائمة ، سيتم تغيير لون الخلفية والمحتوى في #Result.
var r = new Router () ؛ R.Init () ؛ var res = document.getElementById ('result') ؛ R.Route ('/' ، function () {res.style.background = 'blue' ؛ res.innerhtml = 'هذا هو الصفحة الرئيسية' ؛}) ؛ R.Route ('/product' ، function () {res.style.background = 'Orange' ؛ res.innerhtml = 'هذه هي صفحة المنتج' ؛}) ؛ R.Route ('/server' ، function () {res.style.background = 'black' ؛ res.innerhtml = 'هذه هي صفحة الخدمة' ؛}) ؛لخص
ما سبق هو تطبيق بسيط للتوجيه الأمامي. في التطبيقات الفعلية ، يجب معالجة التجزئة بانتظام لتلبية تطبيق عدد كبير من عناوين URL ، وفي الوقت نفسه ، تتم إضافة وظائف محتوى صفحة Ajax غير المتزامن. على الرغم من أن هذا المثال بسيط للغاية ، في الواقع ، يعتمد أساس العديد من أنظمة التوجيه على هذا ، وأنظمة التوجيه الأخرى توفر بشكل أساسي الدعم وتحسين آليات الإطار التي يستخدمونها. حسنًا ، انتهى محتوى هذه المقالة هنا. آمل أن يساعدك ذلك في الدراسة أو العمل. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.