مقدمة
عند فصل الأمامي والخلفي ، فإن العدد الأول الذي أولي به هو تقديم ، أي العمل على مستوى العرض.
في نموذج التطوير التقليدي ، يتم تطوير المتصفح والخادم من قبل فريقين ، نهايات الأمامية والخلفية ، ولكن القالب في منطقة غامضة بين الاثنين. لذلك ، هناك دائمًا المزيد من المنطق أكثر تعقيدًا على القالب ، والتي يصعب الحفاظ عليها في النهاية.
واختارنا NodeJs كطبقة الوسطى من الأمام والخلفي. حاول استخدام NodeJS لمسح العمل على مستوى العرض.
هذا يجعل تقسيم العمل بين النهايات الأمامية والخلفية أكثر وضوحًا ، ويجعل المشروع أفضل صيانة ويحقق تجربة مستخدم أفضل.
هذا المقال
يعد هذا العرض نسبة كبيرة جدًا من العمل اليومي للمطورين الأماميين ، وهو أيضًا أسهل الجزء الذي يجب الخلط بينه وبين التنمية الخلفية.
إذا نظرنا إلى الوراء في السنوات القليلة الماضية من تطوير التكنولوجيا الأمامية ، فقد خضع العمل على مستوى العرض العديد من التغييرات ، مثل:
نموذج إرسال صفحة كاملة تحديث => تحديث AJAX المحلي
استمرار من جانب الخادم + MVC => عرض جانب العميل + MVC
تغيير الصفحة التقليدية قفزة => تطبيق صفحة واحدة
يمكن ملاحظة أنه في السنوات الأخيرة ، كان الجميع يميلون إلى نقل هذا الشيء من نهاية الخادم إلى نهاية المتصفح.
يركز جانب الخادم على الخدمة ويوفر واجهات البيانات.
فوائد عرض المتصفح
نعلم جميعًا فوائد عرض جانب المتصفح ، مثل
1. تخلص من الاقتران والارتباك بين منطق العمل ومنطق العرض في محرك قالب Java.
2. للتطبيقات متعددة الطرفي ، من الأسهل الواجهة. زوجين قوالب مختلفة على جانب المتصفح لتقديم تطبيقات مختلفة.
3. عرض الصفحة ليس HTML فحسب ، ولكن يمكن أن يوفر التقديم على الواجهة الأمامية وظائف في شكل مكون (HTML + JS + CSS) ، بحيث لا تحتاج المكونات الأمامية إلى الاعتماد على بنية HTML التي تم إنشاؤها بواسطة الخادم.
4. تخلص من الاعتماد على عمليات التطوير والتوزيع الخلفية.
5. تعديل مفصل مريح.
العيوب الناجمة عن عرض المتصفح
لكن أثناء الاستمتاع بالفوائد ، نواجه أيضًا عيوب عرض جانب المتصفح ، مثل:
1. يتم فصل القالب في مكتبات مختلفة. يتم وضع بعض القوالب على جانب الخادم (Java) ، بينما يتم وضع البعض الآخر على جانب المتصفح (JS). لغات القالب الأمامية والخلفية غير متصلة.
2. تحتاج إلى انتظار تحميل جميع القوالب والمكونات على المتصفح قبل أن يبدأ التقديم ، ولا يمكنك قراءتها على الفور.
3. ستكون هناك شاشة بيضاء تنتظر تقديمها لأول مرة ، والتي لا تؤدي إلى تجربة المستخدم
4. عند تطوير تطبيق من صفحة واحدة ، لا يتطابق المسار الأمامي مع مسار جانب الخادم ، وهو أمر مزعج للغاية.
5. يتم تجميع جميع المحتويات المهمة في الواجهة الأمامية ، والتي لا تفضي إلى كبار المسئولين الاقتصاديين
فكر في تعريف النهايات الأمامية والخلفية
في الواقع ، عندما نأخذ العمل التقديم من جانب الخادم (Java) إلى جانب المتصفح (JS) ، فإن هدفنا هو تقسيم المسؤوليات الأمامية والخلفية بوضوح ، وليس من الضروري تقديم المتصفح.
إنه فقط لأنه في نموذج التطوير التقليدي ، يتم إصدار الخادم ويتم الوصول إلى المتصفح ، وبالتالي لا يمكن أن يقتصر محتوى العمل في الواجهة الأمامية على جانب المتصفح.
لذلك ، قرر الكثير من الناس أن الواجهة الخلفية = جانب الخادم الأمامي = جانب المتصفح ، تمامًا مثل الصورة أدناه.
في مشروع Midway Midway الذي جاري حاليًا Taobao Ued ، من خلال إنشاء طبقة متوسطة NodeJS في منتصف متصفح Java ، نحاول التمييز بين خط القسم الأمامي والخلفي مرة أخرى لمسؤوليات العمل ، بدلاً من بيئات الأجهزة (Server & Browser).
لذلك ، لدينا الفرصة لتبادل القوالب والطرق ، والتي تعد أيضًا أكثر الحالة المثالية في قسم العمل في الواجهة الأمامية والخلفية.
تاوباو في منتصف الطريق
في مشروع Midway ، نقلنا الخط الذي يرسم ينتهي الأمام والخلفية من المتصفح إلى جانب الخادم.
مع طبقة NodeJS التي يمكن التحكم فيها بسهولة بواسطة الواجهة الأمامية والمشتركة في المتصفح ، يمكن إكمال فصل الواجهة الأمامية بشكل أكثر وضوحًا.
من الممكن أيضًا السماح بتطوير الواجهة الأمامية تحديد الحل الأنسب للحالات المختلفة. بدلاً من كل شيء يتم التعامل معه على جانب المتصفح.
تقسيم المسؤوليات
Midway ليس مشروعًا يحاول الواجهة الأمامية الحصول على الوظيفة الخلفية. والغرض من ذلك هو خفض المساحة الغامضة للقالب والحصول على تقسيم أوضح من المسؤوليات.
الخلفية (Java) ، مع التركيز على
1. طبقة الخدمة
2. تنسيق البيانات واستقرار البيانات
3. منطق العمل
الواجهة الأمامية ، ركز على
1.UI طبقة
2. منطق التحكم ، تقديم المنطق
3. التفاعل ، تجربة المستخدم
ولم يعد التمسك بالاختلافات بين الخادم أو جانب المتصفح.
تبادل القالب
في نموذج التطوير التقليدي ، يتم تطوير المتصفح والخادم من قبل فريقين ، نهايات الأمامية والخلفية ، ولكن القالب في منطقة غامضة بين الاثنين. لذلك ، هناك دائمًا المزيد من المنطق أكثر تعقيدًا على القالب ، والتي يصعب الحفاظ عليها في النهاية.
مع Nodejs ، يمكن للطلاب الخلفيين التركيز على تطوير منطق الأعمال والبيانات في طبقة Java. يركز الطلاب في الواجهة الأمامية على تطوير منطق التحكم وتقديمه. ويمكنك اختيار هذه القوالب بنفسك لتقديمها على جانب الخادم (NodeJS) أو جانب المتصفح.
باستخدام نفس القالب لغة xtemplate ونفس محرك تقديم JavaScript
تقديم نفس النتيجة في بيئات تقديم مختلفة (جانب الخادم ، متصفح الكمبيوتر الشخصي ، متصفح الهاتف المحمول ، عرض الويب ، إلخ).
تقاسم التوجيه
أيضًا بسبب طبقة NodeJS ، يمكنك التحكم في التوجيه بعناية أكبر.
إذا كنت بحاجة إلى إجراء توجيه من جانب المتصفح على الواجهة الأمامية ، فيمكنك تكوين توجيه من جانب الخادم في نفس الوقت حتى يتمكن من تغيير الصفحات على جانب المتصفح أو الصفحات على جانب الخادم ، ويمكنك الحصول على تأثير عرض ثابت.
في الوقت نفسه ، تم التعامل مع مشكلة كبار المسئولين الاقتصاديين.
ممارسة مشاركة القالب
عادة عندما نقدم قالبًا على المتصفح ، فإن العملية ليست أكثر من
أدخل محرك القالب في المتصفح (XTMPLEASE ، العصير ، المعالج ، إلخ)
محفوظات قالب تحميل على جانب المتصفح ، قد تكون الطريقة
اطبع على الصفحة باستخدام <script type = "js/tpl"> ... </script>
استخدم أداة تحميل الوحدة لتحميل أرشيف القالب (kissy ، requistjs ، إلخ)
آخر
احصل على البيانات واستخدم محرك القالب لإنشاء HTML
أدخل HTML في الموقع المحدد.
يمكن ملاحظة العملية أعلاه أنه إذا كنت ترغب في تحقيق مشاركة متقاطعة للقوالب ، فإن التركيز في الواقع على اختيار الوحدة النمطية المتسقة.
هناك العديد من معايير الوحدة النمطية الشائعة في السوق ، مثل KMD و AMD و CommonJs. طالما أن أرشيف قالب NodeJS يمكن إخراجه إلى نهاية NodeJs من خلال مواصفات الوحدة النمطية المتسقة ، يمكن إجراء مشاركة القالب الأساسية.
ستناقش السلسلة اللاحقة من المقالات الوكيل ومشاركة النموذج.
مناقشة الحالة
بسبب الطبقة المتوسطة لجزيرة Midway ، هناك إجابات أفضل لبعض الأسئلة السابقة ، مثل
الحالة 1 التطبيقات التفاعلية المعقدة (مثل عربة التسوق ، صفحة الطلب)
الحالة: يتم تقديم جميع HTML على الواجهة الأمامية ، ويوفر الخادم فقط واجهات.
المشكلة: عند إدخال الصفحة ، سيكون هناك شاشة بيضاء قصيرة.
إجابة:
أدخل الصفحة لأول مرة ، وقدم الصفحة الكاملة على جانب NodeJS ، وقم بتنزيل القوالب ذات الصلة في الخلفية.
التفاعلات اللاحقة ، تحديث جزئي كامل على جانب المتصفح
باستخدام نفس القالب ينتج نفس النتيجة
الحالة 2 تطبيق صفحة واحدة
الحالة: استخدم إطار عمل MVC جانب العميل لتغيير الصفحات في المتصفح.
المشكلة: يتم الانتهاء من التقديم واستبدال الصفحة على جانب المتصفح. عند إدخال عنوان URL مباشرة في F5 أو تحديثه ، لا يمكن تقديم نفس المحتوى مباشرة.
إجابة:
شارك نفس إعدادات المسار على جانب المتصفح وجانب Nodejs
عند تغيير الصفحات على جانب المتصفح ، قم بتغيير المسار وقم بتقديم محتوى الصفحة على جانب المتصفح.
عند إدخال عنوان URL بشكل مباشر ، استخدم محتوى Page Frame + Page على جانب NodeJS
سواء قمت بتغيير الصفحات على المتصفح أو أدخلت عنوان URL نفسه مباشرة ، فإن المحتوى الذي تراه هو نفسه.
بالإضافة إلى زيادة الخبرة وتقليل التعقيد المنطقي. كما أنه حل مشكلة كبار المسئولين الاقتصاديين
الحالة الثالثة صفحة التصفح النقي
الحالة: توفر الصفحة معلومات فقط ، أقل أو لا تفاعل
المشكلة: يتم إنشاء HTML على جانب الخادم ، يتم وضع CSS و JS في موقع آخر ، ولديهم تبعيات بين بعضها البعض.
إجابة:
من خلال nodejs ، الإدارة الموحدة لـ HTML + CSS + JS
إذا كنت بحاجة إلى التوسع في تطبيقات معقدة أو تطبيقات صفحة واحدة في المستقبل ، فيمكنك أيضًا نقلها بسهولة.
الحالة الطرفية ذات الأربعة كروس
الحالة: يحتاج التطبيق نفسه إلى تقديم واجهات وتفاعلات مختلفة في نقاط نهاية مختلفة
المشكلة: إدارة HTML ليست سهلة ، وغالبًا ما يتم إنشاء HTML المختلفة على جانب الخادم ، وسيتم إجراء معالجة مختلفة على جانب المتصفح.
إجابة:
الصفحات المتقاطعة هي تقديم المشكلات ويتم التعامل معها من قبل الواجهة الأمامية.
من خلال خدمة NodeJS وخدمة الواجهة الخلفية ، يمكن تصميم أفضل الحلول لهذا النوع من التطبيقات المعقدة.
لخص
كان ظهور تقنيات مثل AJAX ، و MVC من جانب العميل ، وسبا ، وربط البيانات ثنائية الاتجاه في الماضي ، كلها محاولات لحل الاختناقات التي تمت مواجهتها في التطوير الأمامي في ذلك الوقت.
يعد ظهور الطبقة الوسيطة NodeJS أيضًا محاولة لحل القيد الذي يقتصره الواجهة الأمامية حاليًا على المتصفح.
تركز هذه المقالة على مشاركة القوالب الأمامية والخلفية ، وتأمل في جذب الانتباه. دعنا نناقش معك كيفية تحسين سير العمل والتعاون مع الواجهة الخلفية للقيام بعمل أفضل في الواجهة الأمامية تحت بنية الطبقة الوسطى NodeJS.