بنية تطبيق JavaScript على الويب منفردة؟

Question

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

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

--

(هذا السؤال أدى إلى اقتراحين لاستخدام AJAX ، وهو أمر ضروري من الواضح لأي شيء آخر غير التطبيق الأكثر تافهة للصفحة.)

Answer 1

العمارة MVC من puremvc/js هي المنظمة البحرية الدولية الأكثر أناقة. لقد تعلمت الكثير منه. لقد وجدت أيضا بنية تطبيق JavaScript القابلة للتطوير بقلم نيكولاس زكاس مفيد في البحث عن خيارات الهندسة المعمارية من جانب العميل.

نصائح أخرى

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

Answer 2

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

http://boilerplatejs.org/

يعالج مخاوف تطوير JavaScript المشتركة مثل:

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

إلخ.

Answer 3

الطريقة التي أقوم بإنشائها التطبيقات:

• إطار extjs ، تطبيق صفحة واحدة ، كل مكون محدد في ملف JS منفصل ، تم تحميله عند الطلب
• كل مكون يتصل بخدمة الويب المخصصة الخاصة به (أحيانًا أكثر من واحد) ، يجلب البيانات إلى متاجر ExtJS أو هياكل بيانات خاصة بالأغراض
• يستخدم العرض مكونات extJS القياسية ، حتى أتمكن من ربط المتاجر بالشبكات ، وأشكال التحميل من السجلات ، ...

ما عليك سوى اختيار إطار JavaScript ، واتبع أفضل ممارساته. المفضلة هي extjs و gwt ، ولكن ymmv.

لا تدحرج الحل الخاص بك لهذا الغرض. الجهد المبذول لتكرار ما تفعله أطر عمل JavaScript الحديثة كبيرة جدًا. من الأسرع دائمًا تكييف شيء موجود من بناء كل شيء من الصفر.

Answer 4

Question - What makes an application complex ? 

الإجابة - استخدام كلمة "معقدة" في السؤال نفسه. وبالتالي ، سيكون الميل الشائع هو البحث عن حل معقد منذ البداية.

Question - What does the word complex means ?

الإجابة - أي شيء غير معروف أو مفهوم جزئيًا. مثال: نظرية الجاذبية حتى اليوم معقدة بالنسبة لي ولكن ليس للسيد إسحاق نيوتن الذي اكتشفها في عام 1655.

Question - What tools can I use to deal with complexity ?

الإجابة - الفهم والبساطة.

Question - But I understand my application . Its still complex ?

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

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

الجواب - لأنه ،

-> SPA ليس نوعًا من التكنولوجيا الأساسية التي تم اختراعها حديثًا والتي نحتاج إليها لإعادة اختراع العجلة للحصول على الكثير من الأشياء التي نقوم بها في تطوير التطبيقات.

-> إنه مفهوم مدفوع بالحاجة إلى أداء أفضل وتوافر وقابلية التوسع وقابلية لتطبيقات الويب.

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

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

Question - What about the use of Frameworks ?

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

Question - Can you suggest one of the many approaches to SPA architecture ?

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

• مصدر البيانات: نماذج / مجموعات من النماذج

• ضع علامة على تقديم البيانات: القوالب

• التفاعل مع التطبيق: الأحداث

• التقاط الدولة والتنقل: التوجيه

• المرافق والأدوات والمكونات الإضافية: المكتبات

اسمحوا لي أن أعرف ما إذا كان هذا ساعد بأي شكل من الأشكال ونتمنى لك التوفيق في بنية السبا الخاصة بك !!

Answer 5

أفضل ما يجب فعله هو النظر إلى استخدامات مثال الأطر الأخرى:

TODODVC يعرض العديد من أطر عمل السبا.

Answer 6

يمكنك استخدام إطار عمل JavaScript MVC http://javaScriptMvc.com/

Answer 7

تطبيق الويب الذي أعمل عليه حاليًا يستخدم jQuery ولن أوصي به لأي تطبيق ويب كبير على الويب. تستخدم معظم الأطر IE Dojo و Yahoo و Google وغيرها مساحات الأسماء في مكتباتهم ولكن JQuery لا ، وهذا عيب كبير.

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

وأود أن أوصي بتطبيق نمط MVC على JavaScript/HTML الخاص بك ، وربما يمكن أن يتم معظم نموذج كائنك لـ JavaScript باعتباره JSON الذي تعود إليه بالفعل من الخادم عبر AJAX ويستخدم Javascirpt JSON لتقديم HTML.

أوصي بقراءة كتاب Ajax أثناء العمل لأنه يغطي معظم الأشياء التي ستحتاج إلى معرفتها.

Answer 8

أنا استخدم Samm.JS في العديد من تطبيقات صفحة واحدة بنجاح كبير

Answer 9

سأذهب مع jQuery MVC

Answer 10

الدفع http://bennadel.com/projects/cormvc-jquery-framework.htm بن حاد للغاية ، وإذا كنت تتجول على مدونته ، فلديه بعض المشاركات اللطيفة حول كيفية تجميع CORMVC ولماذا.

Answer 11

البديل: ألق نظرة على itsnat

فكر في JavaScript ولكن رمز نفسه في Java في Server مع نفس واجهات برمجة تطبيقات DOM ، في الخادم أسهل في إدارة التطبيق الخاص بك دون عميل/جسور مخصصة لأن واجهة المستخدم والبيانات معا.

Answer 12

أو إلقاء نظرة على https://github.com/flosse/scaleapp

Answer 13

Nikaframework يسمح لك بإنشاء تطبيق صفحة واحدة. يسمح لك أيضًا بالكتابة لغة البرمجة, CSS (ساس), جافا سكريبت في ملفات منفصلة وحملها في ملف إخراج واحد فقط في النهاية.

Answer 14

أود أن أوصي بالاستكشاف نعمان. يتيح لك استخدام "أفضل الممارسات" الحالية لمشروعك الجديد.

فمثلا:

إذا قررت استخدام Angular.js ، فهناك أ مولد نعم, ، يمنحك هيكلًا للتوجيه ، ووجهات النظر ، والخدمات ، وما إلى ذلك ، يسمح لك أيضًا باختبار الكود الخاص بك ، وما إلى ذلك ، وما إلى ذلك.

إذا قررت استخدام العمود الفقري ، الخروج هذا المولد