الرصاص

مع انخفاض تدريجي في إطار العمود الفقري القديمة مثل، تم استبدال بطء تطور الواجهة الأمامية للMVC تدريجيا الاتجاه MVVM / الجريان.

ومع ذلك، على مر السنين الماضية من التنمية، ونحن يمكن أن تجد قليلا، وتتفاعل / فيو مسترجع / Vuex عرض وطبقة، على التوالي، وطبقة النموذجي في MVC للقيام مزيد من التطوير. إذا كانت طبقة تحكم في MVC أيضا دفعت أبعد من ذلك، للحصول على نسخة مطورة من MVC، فإننا ندعو IMVC (تماثلية MVC).

IMVC يمكن تحقيق التعليمات البرمجية التي يمكن تشغيل وحدة التحكم على الخادم والمستعرض، مع جميع مزايا تطبيق صفحة واحدة وتطبيق متعدد الصفحات، ويمكن القيام بها في وضعين للتبديل بحرية من خلال عناصر التكوين. مع نود.جي إس، Webpack وبابل وغيرها من البنى التحتية، يمكن أن نحصل على أكثر اكتمالا مقارنة العمارة الأمامية السابقة.

1، ومفهوم ومعنى متماثل

1.1 ما نعم متماثل؟

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

التماثل، ويستخدم أيضا في مجالات أخرى من مجالات الفيزياء والكيمياء والكمبيوتر.

1.2 جافا سكريبت تماثلية

جافا سكريبت تماثلية (شبيبة المتماثلة)، ويشير إلى رمز شبيبة، لأنها يمكن أن تعمل في المتصفح يمكن تشغيلها على الخادم.

الشكل (1)

متماثل شبيبة التاريخ التنمية، ولكن أيضا الكثير في وقت سابق من تطبيق ويب التدريجي. في عام 2009، نود.جي إس يخرج، تعطينا جبهة موحدة وينتهي الجزء الخلفي من لغة الخيال؛ وزيادة، والجبهة وينتهي الجزء الخلفي من مجموعة مشتركة من التعليمات البرمجية، ليس مستحيلا.

هناك isomorphic.net على شبكة الإنترنت، متخصصة في جمع المواد والعناصر المرتبطة مع شبيبة المتماثلة. من قائمة المواد داخل جهة النظر هذه، في وقت مبكر من عام 2011، عندما بدأت هذه الصناعة لاستكشاف شبيبة المتماثلة، وأن هذا سيكون اتجاه المستقبل.

للأسف، شبيبة المتماثلة لم يكن في الواقع تنمية شعور حقيقي. لأنه، في عام 2011، نود.جي إس وECMAScript ليست ناضجة بما فيه الكفاية، ليس لدينا بنية تحتية جيدة لتلبية متجانسة الهدف.

ومن عام 2017، كان الوضع مختلفا. ECMAScript 2015 معيار وضع اللمسات الأخيرة، ويوفر مواصفات وحدة قياسية، جبهة مشتركة وينتهي الخلفية. وعلى الرغم من نود.جي إس والمتصفح لم تدرك ES2015 مستوى الوحدة، ولكن لدينا Webpack بابل وغيرها من الأدوات، يمكنك التمتع راحة الناجمة عن ميزات لغة جديدة في وقت مبكر.

2، ونوع ومستوى متماثل

2.1، اكتب متماثل

هناك نوعان من شبيبة المتماثلة: "متجانسة المحتوى" و "شكل متجانس".

من بينها، "المحتوى هو تماثلية" يشير إلى خادم رمز وتنفيذ الجانب متصفح مكافئ تماما. على سبيل المثال:

إضافة وظيفة (أ، ب) {إرجاع + ب}

بغض النظر عن الخادم أو المتصفح، إضافة وظيفة هو نفسه.

و"شكل متجانس" يختلف عن نقطة الأصولية النظر، فإنه ليس متجانسا. لأن جزءا من التعليمات البرمجية في متصفح تنفيذ أبدا، بينما في جزء آخر من خادم كود يتم تنفيذه أبدا. على سبيل المثال:

وظيفة تنفيذ DoSomething {إذا (isServer) {// تفعل شيئا في جانب الخادم} الا اذا (isClient) {// تفعل شيئا في جانب العميل}}

في الآلية الوقائية الوطنية، وهناك العديد من حزمة الإعلان عن نفسه بأنه متماثل مع الطريقة التي "تشكل متجانسة". دون معاملة خاصة، "شكل تماثلية" قد تزيد من حجم رمز شبيبة من المتصفح تحميل. رد فعل سبيل المثال، 140 + كيلو بايت من حجمه، فقط هو رمز لتشغيل الخادم كما يتم تضمين الداخل.

2.2 مستوى تماثلية

لا قيمة منطقية متجانسة، صحيحة أو خاطئة، التماثل هو شكل الطيفي، ويمكن تنفيذها على نطاق ضيق جدا حيث متجانسة، يمكن تنفيذها أيضا في التماثل نطاق واسع.

-function مستوى: اجزاء وقطع من مقتطفات الشفرة أو وظيفة، ودعم متماثل. على سبيل المثال، والمتصفح والخادم قد حققت وظيفة setTimeout، مثل lodash / الوظائف ذات المنفعة تسطير هي المتماثلة.

مستويات -feature: رموز المتماثلة على هذا المستوى حيث عادة ما تولي مهام تجارية معينة. الرد فيو سبيل المثال وتتحقق عن طريق التماثل الظاهري دوم، الذي هو خدمة مشاهدة جعل طبقة، Vuex مثل مسترجع وهي isostructural، هي المسؤولة عن معالجة البيانات طبقة النموذجي.

مستويات -framework: لتحقيق متجانسة في مستوى الإطار، قد تحتوي على نفس الهيكل على جميع المستويات، تحتاج إلى معالجة متأنية لدعم متجانسة ولا يدعم شطري نفس الهيكل، وكيفية دمج بشكل صحيح.

تماثلية-MVC (المشار IMVC) الذي نناقشه اليوم، هو لتحقيق نفس المستوى من بنية في هذا الإطار.

3، وقيمة ودور متماثل

3.1، قيمة متماثل

شبيبة المتماثلة، وليس فقط على التجريد الجمالي، كما أن لديها الكثير من القيمة العملية.

• SEO ودية: مشاهدة طبقة يمكن تشغيلها في المتصفح والخادم، مما يعني أنه يمكنك بصق أتش تي أم أل على الخادم، ودعم الزحف محركات البحث.

• تسريع تجربة الوصول: تقديم من جانب الخادم يمكن تسريع تقديم متصفح الزيارة الأولى، وجعل المتصفح، يمكن أن ردود الفعل تسريع سرعة تفاعل المستخدم.

• كود الصيانة: متجانسة تكلفة تبديل لغة يمكن تخفيض، وخفض معدل تكرار رمز الصيانة زيادات التعليمات البرمجية.

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

3.2 المتماثلة كيفية تسريع تجربة الوصول

مشاكل متصفح تقديم النقية التي في حاجة إلى الانتظار لصفحة بعد تحميل شبيبة، مرئية.

FIG renderging 2 من جانب العميل

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

FIG 3 SERVER-SIDE الإظهار

تقديم تماثلية يمكن أن تسفر عن اثنين من الفوائد التي يقدمها الخادم عندما الأولى الأحمال، ثم تأخذ في المتصفح لتقديم خلال التفاعل.

3.3، فإن الاتجاه المستقبل تماثلية

من وجهة نظر التطور التاريخي، متماثل هو في الحقيقة اتجاه المستقبل.

في الشبكة العالمية للتنمية في وقت مبكر، نموذج التنمية المستخدم هو: الدهون خادم، رقيقة العميل

الشكل (4)

إلا الواجهة الأمامية للطبقة رقيقة، مسؤولة عن بعض من التحقق من صحة النموذج، عمليات DOM والرسوم المتحركة JS. في هذه المرحلة، لا يوجد "المهندسين الأمامية" هذا النوع من العمل، استغرق خادم الطريق لوضع رمز الأمامية إلى الكتابة.

بعد أن تم حفرها اياكس، ويب في عهد 2.0، ونحن عموما النموذج المفضل هو: رقيقة الخادم، والدهون وموكله

الرقم 5

المزيد والمزيد من منطق الأعمال، والهجرة من الخادم إلى الواجهة الأمامية. بدأ "فصل الأمامية والخلفية،" ممارسة ملقم أمامي الأمل الوحيد واجهة مريحة واستمرار البيانات.

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

من أجل حل هذه المشاكل، ونحن ندخل المرحلة المقبلة، يتم أخذ نمط في هذه المرحلة: مشترك، والدهون خادم، والدهون وموكله.

6

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

4، واستراتيجية التنفيذ المتماثلة

لتحقيق متجانسة، يجب علينا أن الوجه الأول أن الهيكل العام ذاته لا معنى له. لماذا؟

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

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

النهج الرئيسي الذي اعتمدناه لهما:) رمز 1 إلى متماثل مضاعفة مباشرة؛ 2) لا يمكن أن يكون رمز تماثلية، وتعبئتها في شكل تماثلية.

وهناك أمثلة قليلة.

يحصل سلسلة عامل المستخدم.

الرقم 7

يمكننا محاكاة الملاح الكائن العالمي مع req.get ( 'عامل المستخدم ") على جانب الملقم يمكن أيضا أن توفر وسيلة أو وظيفة getUserAgent.

يحصل الكوكيز.

الرقم 8

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

والغرض الرئيسي من طلب اياكس الكوكيز يحدث عندما، في طلب متصفح يمكن وضعها لاياكس تلقائيا حزام الكوكيز، لذلك إسكات فقط على كل طلب مقدما الكوكيز اياكس يمكن أن تملأ في الملقم.

معالجة الموجهات إعادة توجيه

الرقم 9

المشهد توجيه أكثر تعقيدا، على الأقل ثلاث طرق:

• 302 الخادم إعادة توجيه: res.redirect (XXX)

• متصفح إعادة توجيه موقع: location.href = الثلاثون وlocation.replace (XXX)

• PushState متصفح إعادة توجيه: history.push (XXX)، وhistory.replace (XXX)

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

5، والهندسة المعمارية IMVC

5.1 هدف IMVC

الهدف هو IMVC تماثلية إلى مستوى الإطار، نطالب أنه يجب تحقيق المهام التالية:

• هي سهلة الاستخدام، ويمكن للمبتدئين بسرعة البدء

• فقط الحفاظ على مدونة ES2015 +

• كلا تطبيق صفحة واحدة، ولكن أيضا تطبيق متعدد الصفحات (SPA + SSR)

• يمكن نشرها في أي طريق تسليم (Basename / RootPath)

• أمر لبدء بيئة تطوير متكاملة

• أمر لاستكمال التعبئة والتغليف / عملية النشر

بعض وظائف تنتمي إلى زمن العملية، بعض الميزات لا تخدم سوى بيئة التطوير. في حين جافا سكريبت هي لغة تفسير، ولكن مرحلة التطوير إلى الجزء الأمامي من هذه الصناعة، وأصبح نموذج التنمية الغنية جدا، سواء في معظم طريقة بسيطة، نوتة بالإضافة إلى المتصفح، يمكنك أيضا استخدام IDE زائد على مجموعة من التطوير والاختبار، وعملية النشر الدعم.

اختيار التكنولوجيا 5.2، IMVC من

• التوجيه: إنشاء التطبيق = التاريخ + مسار إلى التعبير العادي

• عرض: رد فعل = renderToDOM || renderToString

• نموذج: relite = مسترجع مثل مكتبة

• اياكس: متماثل-جلب

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

5.3، لماذا لا تستخدم فقط رد فعل دلو الأسرة؟

كنت قد لاحظت، ونحن نستخدم الكثير تتفاعل التكنولوجيا ذات الصلة، ولكن ليس ما يسمى رد فعل دلو الأسرة وذلك للأسباب التالية:

• رد فعل التيار دلو الأسرة البرية في الواقع، الفيسبوك لا تستخدم

• الرد-راوتر مفهوم من الصعب تلبية متطلبات

• مسترجع غير مناسبة للتطبيقات على نطاق واسع، ولكن السيناريو هدفنا الرئيسي هو للمشاريع الصغيرة والمتوسطة

• ترقية كثيرا ما تؤدي إلى تعلم التكلفة العالية، والحاجة إلى حزم الطابق نظافة API

دلو الأسرة الحالي، سوى مزيج من بعض من شعبية بايل مكتبة المجتمع. الفيسبوك صحيح مع برميل الأسرة تتفاعل | تدفق | تتابع | graphql، حتى لو لم يفعلوا ذلك استخدام تتفاعل تقديم الخادم، وذلك باستخدام PHP.

ونحن نعتقد تتفاعل-راوتر مفهوم على خطأ تماثلية. أنه يتجاهل حقيقة أن كبير: الجانب الخدمي هو الدافع وراء توجيه التوجيه، والتوجيه والرد قيدوا كما عرض، يتم إنشاء مثيل عرض، ومن ثم تحميل المراقب أو الموجه كيف البيانات غير المتزامن طلب ذلك؟

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

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

كما يبعث من جديد، وقال صاحبه في الأماكن العامة: "قد لا تحتاج يبعث من جديد". عند تقديم مسترجع، علينا أن نفكر في ضرورة إدخال.

ليس هناك شك، مسترجع نموذج ممتاز، بنية واضحة وسهلة للمحافظة عليه. ومع ذلك، فإنه هو أيضا مرهقة لتنفيذ وظيفة، قد تضطر إلى تشغيل ملف عبر عدة مجلدات، والقدرة على الاكتمال. هذه التكاليف جلب فوائد كبيرة للتعقيد في التطبيق إلى حد ما، فإننا يمكن أن نفهم حقا. في أوضاع أخرى، التطبيق التعقيد إلى حد ما، فإنه من الصعب للحفاظ على، ويبقى مسترجع الصيانة أيضا قوية، وهذا هو قيمته. (ومن الجدير بالذكر أنه بناء على طبقة إعادة التغليف-مسترجع API مبسطة، وأعتقد أن هذا هو على الارجح نهج خاطئ .Redux شفرة المصدر وبسيطة جدا، ونية واضحة جدا، بالطبع، من الممكن أيضا لتبسيط، ولكن لماذا لا تملكها لا؟ وهو غير مصمم للقيام بذلك عمدا؟ مجموعتك في حالة تلفها الغرض تصميمه؟) قبل استخدام مسترجع للنظر هو أن ننتمي لفئة تطبيقات الويب التطبيق كبير لا؟

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

5.4، وحلت محلها الرد الموجه إنشاء التطبيق

إنشاء التطبيق هو تماثلية إلى مكتبة أدركنا، والذي يتألف من الأجزاء الثلاثة التالية:

• مكتبة قاعدة التفاعل الموجه التي تعتمد على: التاريخ

• مسار إلى التعبير العادي: expressjs مكتبة قاعدة تعتمد

• تحكم: المتحققة خارج عرض (رد فعل) طبقة وطبقة طبقة history.js تعتمد تحكم نموذج إنشاء التطبيق المتنوعة على التفاعل الموجه لإدارة الدولة في تاريخ المتصفح، ومضاعفة expressjs التعبير العادي مسار إلى، لحل المعلمات نمط المسار.

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

5.4.1، فكرة المتماثلة من خلق التطبيق

10

إنشاء التطبيق يتم تنفيذ تجسيد التماثل:

• إدخال عنوان URL التوجيه وفقا لصيغة المقابلة إلى وحدة تحكم وحدة مطابقة

• استدعاء وحدة لوادر إلى وحدة تحكم الحمل، احصل على الدرجة المراقب

• وسمات نموذج عرض المراقب تنتمي إلى فئة

• الجديد وحدة تحكم (الموقع، السياق) لإعطاء تحكم مثال

• استدعاء الأسلوب controller.init، يجب على طريقة عودة مثيل من رأي

• عرض محرك الدعوة وفقا للبيئة إلى أمثلة رأي دوم أو تقديم أتش تي أم أل أو غيرها الأصلي-واجهة المستخدم

العملية المذكورة أعلاه هي الخادم ثابت والمتصفح.

مفهوم التكوين 5.4.2، إنشاء التطبيق

خادم آخر ووضع المتصفح وحدات تحميل ومزامنة الخادم تحميل، ويتم تحميل المتصفح بشكل غير متزامن، عرض المحرك شيء فحكمه مختلف. كيفية التعامل مع هذه التناقضات؟

الجواب التكوين.

التطبيق CONST = createApp ({نوع: "createHistory"، والحاويات: "#root"، والسياق: {isClient: صحيح | كاذبة، isServer: كاذبة | الحقيقية، ... injectFeatures}، محمل: webpackLoader | commonjsLoader، والطرق: الطرق، viewEngine: ReactDOM | ReactDOMServer،}) app.start || app.render (رابط، السياق)

الخادم والمستعرض لكل من الخاص ملف دخولهم: العميل entry.js وserver.entry.js. نحن بحاجة فقط لتوفير تكوينات مختلفة يمكن أن يكون.

في الخادم، تحميل تحكم نهج الوحدة هو commonjsLoader، على الجانب المتصفح، كانت الحمولة وحدة تحكم طريقة webpackLoader.

في خادم والجانب المتصفح، يتم تكوين رأي المحرك أيضا لReactDOM مختلفة وReactDOMServer.

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

5.4.3، الملقم إنشاء التطبيق التقديم

ونحن نعتقد بهذه البساطة، هو الصحيح. تنفيذ قانون إنشاء التطبيق الخادم التقديم على النحو التالي:

التطبيق CONST = createApp (serverSettings) router.get ( '*، المتزامن (مسا، الدقة، المقبل) = >  {{جرب CONST {} محتوى = ننتظر app.render (req.url، serverContext) res.render ( 'التخطيط'، {} محتوى)} صيد (خطأ) {المقبل (خطأ)}})

أي معلومات إضافية، أي رمز إضافي، سياق المدخلات ورابط، أتش تي أم أل سلسلة عودة مع بيانات حقيقية.

5.4.4، بالارض إنشاء التطبيق توجيه الفلسفة

الرد-راوتر تدعم وتشجع الطريق التعشيش، قيمتها المشكوك في تحصيلها. لأنه يزيد من تكلفة قراءة الشفرة، واقتران التعشيش وUI (رد فعل التجمع) بين وحدة التوجيه منهما معا، ليست مرنة.

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

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

// routesexport الافتراضي

كما ترون، طريقنا ليس عنصر المقابلة، ولكن وحدة تحكم. قبل طبقة تحكم جديدة، يمكننا تحقيق قبل مكون مثيل عرض طبقة، يمكنك الحصول على شاشة الأولى عن طريق البيانات تحكم.

next.js هو إطار متجانس، الذي هو في الأساس نسخة مبسطة من IMVC، ولكن طبقة C لها هي رقيقة جدا، وهذا يرتبط ارتباطا مباشرا أسلوب ثابت في عرض عنصر. لأنه يقوم على تكوين التوجيه اسم مشاهدة الملف الحالي، طبقة تحكم بها هي View.getInitialProps أساليب ثابتة لا تؤدي إلا إلى الحصول على الدعائم تهيئة.

هذه الطبقة هي رقيقة جدا، ويمكن أن تكون في الواقع أكثر وفرة، مثل توفير جلب طريقة لتحديد البيئة المبنية، دعم jsonp، ودعم البيانات وهمية لدعم ميزات مهلة معالجة، مثل مخزن ملزمة تلقائيا إلى العرض، مثل توفير أكثر ثراء دورة حياة pageWillLeave (الصفحة سوف يقفز إلى مسار آخر) وwindowWillUnload (نافذة على وشك إغلاق) وهلم جرا.

الكل في الكل، والآثار الجانبية لا يمكن أن يتم تدميرها، ويمكن الحجر الصحي فقط، ونموذج عرض الآن نقية وظيفة ووضع immutabel البيانات دون آثار جانبية، يجب أن يكون لها دور لتولي مهامه مع آثار جانبية. ظهرت طبقة تجريد جديدة المراقب المالي.

بنية الدليل 5.4.5، إنشاء التطبيق

SRC // شفرة المصدر دليل التطبيق-تجريبي // تجريبي دليل التطبيق-ABCD // ABCD مشروع منصة دليل مكونات // مشروع مشترك مكون المشتركة // طريقة تقاسم البند BaseController // البند يرث وحدة تحكم طبقة طبقة قاعدة تحكم المنزل // صفحات معينة controller.js // تحكم model.js // نموذج view.js // عرض * // صفحات أخرى routes.js // اي بي سي شقة مشروع الطريق app- * // البنود الأخرى مكونات // مكون العالمي المشترك المشتركة ملف مشترك // العالمي BaseController // الفئة الأساسية المراقب المالي index.js // شبيبة العالمية مدخل مجلد ثابت // مصدر ثابت كود البناء الهدف routes.js // الطريق شقة العالمي

كما هو مبين أعلاه، إنشاء التطبيق احترام بنية الدليل مسترجع مع مختلف جدا. ومن لا يتفق مع وظائف actionCreator مجردة | actionType | مخفضات | الوسيطة | حاوية لترتيب، لأنه يقوم على الصفحة لتقسيم الصفحة، كل صفحة من ثلاثة عناصر: تحكم، ونموذج وطريقة العرض.

طرق استخدام جدول التوجيه، ومعا سلسلة الصفحة.

إنشاء التطبيق الوضع لاتخاذ "محطة SPA كله"، الملف العالمي مدخل واحد فقط، index.js. الملفات في الدليل SRC كلها من العناصر المشتركة إطار كود طبقة ورمز الأعمال من كل مشروع في حد ذاته هو ضمن المجلد التطبيق-XXX.

والغرض من هذا التصميم هو للحد من تكاليف الهجرة، وتقسيم مرنة ودمج مختلف المشاريع.

• عندما يكون المشروع في مراحله الأولى، فإنه يمكن أن تعلق على بوابة مستودع مشروع آخر، وذلك باستخدام بنيتها التحتية القائمة لتحقيق تنمية سريعة.

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

• عندما تريد دمج المشروعين، ووضعها في نفس الجهاز الهضمي مستودع مختلفة التطبيق-XXX يمكن أن يكون.

• نحن نستخدم التوجيه الجدول routes.js قواعد الوصول المحلية والتكوين إنجن إكس من رابط التنسيق

كل صفحة من controller.js، model.js وview.js والخاص يعتمدون سيتم تعبئتها، في ملف واحد، فقط تطابق عنوان الموقع ناجحة، وسوف نطالب تحميلها. ضمان التعايش التوسع لمشاريع متعددة لن تجلب حجم شبيبة.

5.5 الوضع الأساسي من وحدة تحكم

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

تم تصميم وحدة تحكم كما البرمجة نموذج الطبقة OOP، والغرض الرئيسي هو لجعلها تحمل الآثار الجانبية، والموديل عرض لعقد ظيفية نقية.

تحكم النموذج الأساسي هو على النحو التالي:

الطبقة MyController يمتد BaseController {requireLogin = الحقيقية الدولة // تسجيل الدخول تعتمد، BaseController في المعالجة التلقائية عرض = عرض // طريقة العرض initialState = {العد: 0} // النموذج الأولي الإجراءات initialState الدولة = الإجراءات // إجراءات تغيير حالة النموذج مجموعة من الوظائف handleIncre = = >  {// معالج الأحداث التي تم جمعها تلقائيا، الذي أحيل إلى عرض اسمحوا مكون {التاريخ وتخزين وجلب، والموقع، والسياق} = هذه الوظيفة // الطبقات تتيح {INCREMENT} = store.actions INCREMENT // دعوة العمل، والدولة التحديث يتم تحديث العرض تلقائيا} المتزامن shouldComponentCreate {} // هنا التوثيق، وعودة كاذبة المتزامن componentWillCreate {} // هنا أضعاف جلب componentDidMount البيانات {} // جلب هنا أضعاف pageWillLeave البيانات {} // في هنا منطق تنفيذ windowWillUnload {} // قبل توجيه يقفز بعيدا عن الجبهة حيث تنفيذ قائمة المنطق إغلاق}

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

هيكلها واسطة مع النظرية وصغير برنامج قناة الصغرى مشابهة الى حد ما.

5.6، مسترجع مبسطة نسخة relite

على الرغم من كونه التطبيقات الصغيرة والمتوسطة الحجم البنية التحتية، ونحن لا نستخدم يبعث من جديد، يبعث من جديد ولكن لفكرة ممتازة، أو يمكن استيعابها في.

لذلك، نفذنا نسخة مبسطة من مسترجع، ودعا relite.

• actionType، actionCreator، الاندماج المخفض

• bindActionCreators التلقائي، الذي بني في دعم العمل غير متزامن

السماح EXEC_BY = (الدولة، ومدخلات) = >  {دع قيمة = parseFloat (المدخلات، 10) العودة isNaN (القيمة) الدولة:؟ {... دولة، العد: state.count + قيمة}} السماح EXEC_ASYNC = المتزامن (الدولة، ومدخلات) = >  {تأخير تنتظر (1000) EXEC_BY عودة (الدولة، ومدخلات)} السماح مخزن = createStore ({EXEC_BY، EXEC_ASYNC}، {العد: 0})

ونحن نأمل في الحصول على مسترجع أساسيين: 1) النقي وظيفة، 2) غير قابل للتغيير البيانات.

لذلك تم تصميم العمل على وظيفة بوصفها وظيفة نقية، هو مسترجع اسم وظيفة عمل من نوع، هو جسد مسترجع ظيفة المخفض، وأول حجتها هي الدولة الحالية، انها المعلمة الثانية هي مسترجع actionCreator البيانات المحمولة. و، relite ظائف المدمج مسترجع-الوعد ومسترجع-THUNK، يمكن للمطورين استخدام المتزامن / ننتظر النحو وعمل غير متزامن.

relite يتطلب أيضا دولة ممكن هو غير قابل للتغيير، ومن خلال إضافية المكونات مسجل، وتحقيق ميزة وقت السفر.

5.7 وهندستها متماثل-MVC المرافق

IMVC فوق يصف بعض السمات والخصائص في وقت التشغيل في وصف موجز التالية ما IMVC الهندسة المرافق. كنا:

• نود.جي إس وقت التشغيل، إدارة الحزم الآلية الوقائية الوطنية

• expressjs إطار الخادم

• بابل التعليمات البرمجية المترجمة إلى ES2015 + ES5

• webpack حزم ومضغوط الشفرة المصدرية

• standard.js مواصفات كود الاختيار

• prettier.js + بوابة هوك كود تخطيط السيارات تجميل

• اختبار وحدة المخاوي

5.7.1، وكيفية تنفيذ التعليمات البرمجية في الوقت الحقيقي التحديث الساخنة؟

الهدف: أمر لبدء بيئة تطوير، تعديل التعليمات البرمجية ليست في حاجة لاستئناف عملية

الممارسة: أ webpack تخدم العميل، خدمات الملقم في webpack آخر

العميل: صريح + webpack-ديف الوسيطة المترجمة في الذاكرة

الخادم: الذاكرة خ + webpack + VM وحدة

webpack مترجم ذاكرة الخادم لمحاكاة نظام الملفات، ومن ثم نود.جي إس المدمج في وحدات الجهاز الظاهري بعد تنفيذ الحصول حدة نمطية جديدة

5.7.2، وكيفية التعامل مع CSS تحميلها على الطلب؟

جذور المشكلة: قبل المتصفح سوف ننتظر لموارد دوم استعداد المغلق لتحميل قبل عرض الصفحة

وصف المشكلة: عندما قفزة صفحة واحدة على رابط آخر، والموارد المغلق لها لا تحميل النهائي، وتخطيط الصفحة كما هو موضح الارتباك

الحل: اياكس المغلق تعتبر بيانات مسبقة، في شكل من إدخال الطلب على غرار التسمية

استراتيجية التحسين: محملة مسبقا مع ذاكرة التخزين المؤقت البيانات السياق لتجنب الحمل المتكرر

5.7.3، وكيفية تنفيذ قطع الرمز، تحميل الطلب؟

• لا تستخدم require.ensure جملة webpack فقط

• في متصفح تتطلب يتم ترجمة بوصفها وظيفة من الحمل والتحميل غير متزامن

• في نود.جي إس وتتطلب وجود الحمل متزامن

// webpack.config.js {الاختبار: /controller\.jsx؟$/، محمل: 'حزمة محمل، الاستعلام: {كسول: صحيح، اسم:' - '، REGEXP: التطبيق / - (+) /. المصدر}، واستبعاد: / node_modules /}

5.7.4، إدارة الإصدار كيفية التعامل مع موارد ثابتة؟

• إلى رمز التجزئة لاسم الملف، وإطلاق سراح تدريجي

• توليد جدول الموارد ثابت مع webpack.stats.plugin.js

• stats.json استخدام صريحة من البيانات لتقديم الصفحة

// webpack.config.jsoutput = {المسار: outputPath، اسم: "-.js، chunkFilename:" -.js '}

5.7.5 كيفية إدارة المهام سطر الأوامر؟

• استخدام الآلية الوقائية الوطنية بين النصوص الكاملة بوابة، webpack، اختبار، مهام أخرى أجمل في منطق package.json-المسلسل الموازي

• الآلية الوقائية الوطنية بدء لبدء بيئة تطوير متكاملة

• الآلية الوقائية الوطنية المدى البدء: العميل يبدأ بيئة التطوير دون تقديم من جانب الخادم

• الآلية الوقائية الوطنية المدى بناء أتمتة بداية الترجمة، بناء ونشر المهام ضغط

• الآلية الوقائية الوطنية المدى بناء: تظهر بين همز لنرى ما هي النتائج التي جمعتها التصور webpack-حزمة محلل

6 الخاتمة

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

الكاتب: قو يينغ جي، الأمامي وكتريب البحوث عطلة وإطار التنمية نود.جي إس الشخص المسؤول. مكتبة مفتوحة المصدر من الكتاب لايت تتفاعل، حريصة على دراسة كيفية جعل الطابق التكنولوجيا المتطورة والمهندسين الأمامية تحسين الإنتاجية وخبرة في البرمجة الفعلية.