كيفية تنفيذ التحميل المعياري لصفحات HTML التقليدية

بالنسبة لمواقع الويب، يوجد عدد كبير من الوحدات المشتركة بين العديد من الصفحات، مثل الرؤوس والتذييلات وأعمدة المستخدم وما إلى ذلك. بالنسبة للأطر التي تحتوي على محركات عرض خلفية، من السهل نسبيًا استخراج هذه المشاركات. على سبيل المثال، يحتوي asp.net mvc على تخطيط موحد لـ MasterPage و@Section ووظائف أخرى يمكنها مشاركة وظائف قالب العرض. لكن بالنسبة لـ HTML، فأنت لست محظوظًا جدًا، فهذه الوظائف غير متوفرة في ملفات html، لذلك عند استخدام صفحات HTML خالصة لكتابة مواقع التطبيقات، قد تضطر إلى مواجهة هذه المهام المتكررة، على الرغم من أنه يمكنك دمج إطارات IFrame لتحقيقها طريقة التنفيذ هذه ليست مثالية وودية.

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

تعتبر صفحتي HTML أعلاه فريدتين باستثناء الجزء الأساسي، وكتل البيانات الأخرى هي نفسها. إذا لم يكن هناك محرك عرض خلفي، فما رأيك في القيام بذلك... في البداية، يجب مزامنة كل تعديل مع الصفحات الأخرى. اكتشفت لاحقًا أن القيام بذلك سيقودني بالتأكيد إلى الموت. وبعد التفكير لفترة، توصلت إلى الحل.

بعد التفكير في الأمر، وجدت أنه يمكن استخراج القالب العام إلى ملف HTML (اسم الملف مبدئيًا يسمى PublicModule.html)، كما يلي:

 <قوالب> <معرف القالب=رأس> <div class=navbar-header> <button class=navbar-toggle نوع مطوي=زر بيانات-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> تبديل التنقل</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Net Library</a> </div> <div class=navbar-collapselapse role=navigation> <div style=margin-top:15px;margin-left:120px; style=color:white;padding-top:20px;>XXXXXX</span></div> <ul class=nav navbar-nav></ul> <ul class=nav navbar-nav navbar-right> <li> <a href=/Blog.html>المدونة</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>إدارة موقع الويب</a></li> </ul> </div> </template > <معرف القالب=doc_tags_navbar> <div class=container-fluid style=padding:0px;> <ul class=nav navbar-nav btn-group-sm id=tagbar> <li><a style=font-weight:bold; bind:title=item.Remark style=font-weight:bold padding-bottom:6px;padding-top:6px; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; new Vue({ el: '#tagbar', data: { Data: [] } }); var result = wait $ListDocTags(); tagbarControl.Data = result.Data } ListDocTags(); </script> </template><templates>

حدد كتلة القالب من خلال علامة القالب، ثم حدد معرفًا فريدًا لكل كتلة. قد يتساءل بعض الطلاب أن هذا القالب ليس علامة HTML صالحة، فكيف نتعامل معه؟ لا يمكن لمتصفح القالب الصحيح التعامل معه، لكن JQuery يمكنه التعامل معه في هذه المرحلة، وأعتقد أن بعض الطلاب يفهمون المبدأ.

بعد تعريف الوحدة، كيفية الرجوع إليها في HTML؟ في الواقع، HTML لا يدعم مثل هذه الوظيفة، ولكن يمكننا تحديد بعض السمات المخصصة لـ HTML ليتم تفسيرها بواسطة JQuery. هنا نحدد سمة فتحة لتحديد معرف القالب.

 <div class=navbar navbar-inverse navbar-fixed-top> <div class=container Slot=header> </div> </div> <nav class=navbar navbar-default style=padding:0px;margin:0px;min -الارتفاع:0px;

يتم تعريف القالب والإشارة إلى HTML الخاص بالصفحة أيضًا، وبعد ذلك، يجب دمجهما. في هذه المرحلة، أعتقد أن الأصدقاء الذين هم على دراية بـ JQuery يجب أن يكونوا قد اكتشفوا ما يجب فعله :)

بالنسبة إلى JQuery، يمكنك تحميل صفحة الوحدة العامة وتحويلها إلى DOM، ثم استبدال العناصر بالفتحات المحددة في الصفحة.

 function ModuleLoad(url) { $.get(url, function (result) { var html = $(result); var __templates = html; $([slot]).each(function () { var id = $(this) .attr('slot'); var body = $(__templates).find('#' + id).html(); $(this).html(body); });}$(document).ready(function () { ModuleLoad(/PublicModule.html);});

الكود بسيط وفعال، احفظ البرنامج النصي بأكمله في ملف، ثم أضفه إلى الصفحة وسيتم تحميله تلقائيًا.

هل ستتطلب صفحة HTML التي يمكن تحميلها دفعة واحدة الآن تحميل Ajax؟ ألا يتسبب ذلك في بطء التحميل؟ في الواقع، يمكنك استخدام استراتيجية ذاكرة التخزين المؤقت المحلية لصفحات HTML للوحدة العامة، بحيث يمكن جلب جميع الصفحات مباشرة من الوحدة المحلية عند تحميل الوحدة، نظرًا لاستخراج الجزء العام، يصبح تراكم الصفحات ذات الصلة أصغر سرعة التحميل أسرع.

بالنسبة لأولئك الذين اعتادوا على استخدام محركات العرض من جانب الخادم، قد يكون من الصعب بعض الشيء استخدام نموذج تطوير الواجهة الأمامية HTML/JS بشكل كامل. لكن تطوير الواجهة الأمامية المستند بالكامل إلى HTML/JS له مزايا واضحة، ولا تتطلب معالجة العرض تفسيرًا للخدمة، مما يقلل بشكل كبير من خسائر الخادم. يمكن لـ HTML إجراء تخزين مؤقت محلي أفضل، ويوجد الآن عدد كبير من أطر عمل HTML/JS التي تسمح بذلك لك أن تكتب الأمر أسهل وأبسط.

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