سيأخذك محرر Downcodes إلى فهم كائن الموقع في JavaScript! يعد كائن الموقع مكونًا حاسمًا في برمجة JavaScript للواجهة الأمامية، فهو يوفر وظائف قوية للوصول إلى عنوان URL للصفحة الحالية ومعالجته، مما يتيح لك تنفيذ عمليات الانتقال والتحديث وغيرها من العمليات بسهولة. ستستكشف هذه المقالة بعمق الطرق الأساسية (تعيين ()، إعادة التحميل ()، استبدال ()) والسمات (href، البروتوكول، المضيف، وما إلى ذلك) لكائن الموقع، ودمجها مع الحالات الفعلية لإظهار تطبيق موقع الكائن في التنقل عبر الصفحة وعمليات عنوان URL نصائح لمساعدتك على فهم هذه الأداة القوية واستخدامها بشكل أفضل وتحسين مهارات تطوير الواجهة الأمامية لديك.
يعد كائن الموقع مهمًا جدًا في برمجة JavaScript للواجهة الأمامية، فهو يوفر معلومات حول المستند الذي تم تحميله في النافذة الحالية ويسمح بإعادة توجيه الصفحة. تتضمن أساليب كائن الموقع: تعيين ()، إعادة تحميل ()، استبدال ()، وما إلى ذلك، والتي تستخدم لتحميل مستندات جديدة، وإعادة تحميل المستند الحالي، واستبدال المستند الحالي على التوالي. خذ طريقة reload() كمثال. يمكن لهذه الطريقة تحديث الصفحة حسب الحاجة، مثل تحديث حالة جلسة المستخدم أو تحديث محتوى الصفحة. عند استدعاء location.reload()، إذا لم يتم تمرير أي معلمات أو تم تمرير خطأ، فسيتم إعادة تحميل الصفحة من ذاكرة التخزين المؤقت؛ إذا تم تمرير صحيح، فسيتم فرض إعادة الحصول على المورد من الخادم، وتجاهل ذاكرة التخزين المؤقت.
كائن الموقع هو كائن يحتوي على معلومات عنوان URL الحالية، والتي يمكن الوصول إليها من خلال window.location أو مباشرة من خلال الموقع. يوفر كائن الموقع خصائص وأساليب لتشغيل إمكانيات التنقل في المتصفح. على سبيل المثال، يمكنك الحصول على عنوان URL للصفحة الحالية أو تعيينه، أو الانتقال إلى صفحة جديدة بطريقة مختلفة.
توفر سمات كائن الموقع، مثل href والبروتوكول والمضيف واسم المضيف والمنفذ واسم المسار والبحث والتجزئة وما إلى ذلك، على التوالي عنوان URL الكامل والبروتوكول واسم المضيف ورقم المنفذ والمسار وسلسلة الاستعلام ومعلومات المرساة.
يتم استخدام طريقة التعيين () لتحميل المستندات الجديدة. استدعاء هذه الطريقة له نفس تأثير إدخال عنوان URL في شريط عنوان المتصفح والانتقال إلى تلك الصفحة. أي أنه يقوم بإنشاء سجل جديد في سجل المتصفح.
مثال الاستخدام:
location.assis('https://www.example.com');
بعد استدعاء هذه الطريقة، ستنتقل الصفحة إلى عنوان URL المقدم. لاحظ أن هذه الطريقة تحافظ على السجل ويمكن للمستخدم النقر فوق زر الرجوع في المتصفح للعودة إلى الصفحة السابقة.
يتم استخدام طريقة reload() لإعادة تحميل الصفحة الحالية. يحتوي على معلمة منطقية اختيارية، والتي عند تمريرها بشكل صحيح، ستفرض تحميل المستند من الخادم بدلاً من ذاكرة التخزين المؤقت.
مثال الاستخدام:
location.reload(); // إعادة التحميل من ذاكرة التخزين المؤقت (إن أمكن)
location.reload(true); // تجاهل ذاكرة التخزين المؤقت وأعد التحميل من الخادم
تعد هذه الطريقة مفيدة أثناء التطوير، خاصة عند تصحيح الأخطاء حيث تحتاج إلى مسح ذاكرة التخزين المؤقت وإعادة تحميل أحدث التعليمات البرمجية.
تشبه طريقة الاستبدال () طريقة التعيين () وتستخدم أيضًا لتحميل صفحة جديدة. لكن الفرق هو أن طريقة الاستبدال () لا تترك سجلاً في السجل، لذلك لن يتمكن المستخدم من استخدام زر الرجوع للعودة إلى الصفحة السابقة.
مثال الاستخدام:
location.replace('https://www.example.com');
يُستخدم هذا غالبًا في المواقف التي لا تريد فيها أن يتمكن المستخدم من العودة إلى الصفحة السابقة، مثل إعادة التوجيه بعد إرسال نموذج.
تحتوي سمة href على عنوان URL الكامل. يعد تعديل هذه السمة بمثابة استدعاء طريقة التعيين () والتي ستؤدي أيضًا إلى قيام الصفحة بتحميل عنوان URL جديد.
مثال الاستخدام:
console.log(location.href); // إخراج عنوان URL للمستند الحالي
location.href = 'https://www.example.com'; // تحميل عنوان URL الجديد
تشير سمة البروتوكول إلى البروتوكول الذي تستخدمه الصفحة، مثل "http:" أو "https:". يمكن أن يؤدي تعديل هذه الخاصية إلى تغيير نوع البروتوكول الذي تم تحميله بواسطة الصفحة الحالية.
مثال الاستخدام:
console.log(location.protocol); // إخراج بروتوكول الصفحة الحالية، مثل http:
تقوم سمة المضيف بإرجاع اسم المضيف بالإضافة إلى رقم المنفذ (إن وجد)، وترجع سمة اسم المضيف اسم المضيف فقط. تُستخدم هذه الخصائص أحيانًا لإنشاء عناوين URL أو تحديد أسماء المضيفين عند إجراء عمليات إعادة توجيه العميل.
مثال الاستخدام:
console.log(location.host); // إخراج اسم المضيف ورقم المنفذ (إن وجد)
console.log(location.hostname); // أخرج اسم المضيف فقط
تقوم سمة المنفذ بإرجاع رقم المنفذ الخاص بعنوان URL. إذا لم يتم تحديد رقم المنفذ بشكل صريح في عنوان URL، فسوف تقوم هذه الخاصية بإرجاع سلسلة فارغة.
مثال الاستخدام:
console.log(location.port); // إخراج رقم المنفذ لعنوان URL الحالي
تقوم سمة اسم المسار بإرجاع جزء المسار من عنوان URL. إذا كان عنوان URL لا يحتوي على معلومات المسار، فستعرض هذه الخاصية شرطة مائلة ('/').
مثال الاستخدام:
console.log(location.pathname); // إخراج معلومات مسار الصفحة
تقوم سمة البحث بإرجاع جزء سلسلة الاستعلام من عنوان URL، بما في ذلك علامة الاستفهام البادئة. يُستخدم بشكل شائع للحصول على معلمات الاستعلام في عنوان URL.
مثال الاستخدام:
console.log(location.search); // سلسلة استعلام الإخراج
تقوم سمة التجزئة بإرجاع جزء الربط من عنوان URL. إذا كان عنوان URL لا يحتوي على تجزئة، فسيتم إرجاع سلسلة فارغة.
مثال الاستخدام:
console.log(location.hash); // معلومات ربط الإخراج
في التطوير الفعلي للواجهة الأمامية، قد تحتاج إلى استخدام خصائص وأساليب كائن الموقع معًا لتنفيذ منطق التنقل المعقد للصفحة. على سبيل المثال، قد تحتاج إلى تحديد الصفحة الجديدة التي سيتم تحميلها استنادًا إلى سلسلة الاستعلام الخاصة بالصفحة الحالية.
على سبيل المثال:
إذا (location.search.includes('تسجيل الدخول=صحيح')) {
location.replace('/dashboard');
} آخر {
location.assis('/login');
}
في هذا المثال، نحدد ما إذا كان المستخدم قد قام بتسجيل الدخول استنادًا إلى معلمات الاستعلام الخاصة بعنوان URL الحالي، ونعيد التوجيه إلى صفحات مختلفة وفقًا لذلك.
يعد كائن الموقع جزءًا لا يتجزأ من تطوير الويب، مما يجعل من الممكن إجراء معالجة URL والتنقل في الصفحة من جانب العميل. تشير أفضل الممارسات إلى ضرورة أخذ تجربة المستخدم وتأثيرات تحسين محركات البحث (SEO) في الاعتبار بشكل كامل عند تغيير عناوين URL للصفحات أو إجراء عمليات إعادة التوجيه. عند إعادة تحميل الصفحة أو إجراء عمليات لا تتطلب الاحتفاظ بالسجل، يجب استخدام أساليب reload() وreplace() بشكل مناسب. بالإضافة إلى ذلك، عند إنشاء تطبيق من صفحة واحدة (SPA)، تتم معالجة سمة التجزئة لكائن الموقع بشكل متكرر أو يتم استخدام HTML5 History API لتنفيذ التوجيه دون إعادة تحميل الصفحة.
الاستخدام السليم لكائنات الموقع يمكن أن يجعل التنقل في صفحة الويب وتصميم التفاعل أكثر سلاسة وبديهية. يعد إتقان أساليبها وخصائصها أمرًا مهمًا جدًا لمطوري الواجهة الأمامية، مما يمكن أن يساعد المطورين على توفير تجربة ويب أكثر ثراءً تلبي توقعات المستخدم.
س: كيفية استخدام طريقة كائن الموقع في برنامج JS للواجهة الأمامية؟
ج: كائن الموقع هو كائن عام يمكن استخدامه للحصول على عنوان URL للمستند الحالي ومعالجته. فيما يلي استخدامات العديد من أساليب كائن الموقع شائعة الاستخدام:
ما هو location.href؟ كيفية استخدامه؟ يُرجع location.href سلسلة عنوان URL للصفحة الحالية، والتي يمكن استخدامها للحصول على عنوان URL للصفحة الحالية أو إعادة توجيه المستخدم إلى عنوان URL جديد. على سبيل المثال، يمكنك استخدام location.href = http://www.example.com لإعادة توجيه المستخدم إلى صفحة ويب محددة.
كيفية استخدام طريقة location.reload() لتحديث الصفحة؟ يتم استخدام طريقة location.reload() لإعادة تحميل الصفحة الحالية. يمكنك استخدامه لتحقيق تأثير تحديث الصفحة بعد النقر فوق الزر أو إكمال العملية. على سبيل المثال، يمكنك استخدام location.reload() في معالج حدث النقر على الزر لإعادة تحميل الصفحة.
كيفية استخدام طريقة location.replace() لاستبدال الصفحة الحالية؟ يمكن استخدام طريقة location.replace() لاستبدال الصفحة الحالية دون إنشاء سجل. على سبيل المثال، يمكنك استخدام location.replace(http://www.example.com) للانتقال مباشرة إلى عنوان URL جديد دون ترك سجل في سجل المتصفح.
يرجى ملاحظة أن ما ورد أعلاه هو مجرد مثال بسيط لبعض أساليب كائن الموقع، وهناك العديد من الأساليب والخصائص المفيدة الأخرى المتاحة للعمل مع عناوين URL والتنقل. يمكنك معرفة المزيد حول الاستخدام التفصيلي لهذه الأساليب والخصائص في وثائق JavaScript.
آمل أن يساعدك الشرح الذي قدمه محرر Downcodes في فهم واستخدام كائن الموقع في JavaScript بشكل أفضل وتحقيق تقدم أكبر في رحلة تطوير الواجهة الأمامية!