دعنا نتحدث عن ما تعرفه بالفعل.
هذا مقالتي الأولى عن حبري وأنا لست كاتبة. لكن بالنظر إلى
Frontend 2018: نتائج العام ، وصلت الأيدي إلى الأناقة وبدأت الكتابة.
أي مهمة صعبة تتكون من تلك البسيطة.
القدرة على القيام بالتحلل بشكل صحيح أمر لا بد منه .
سأقود المناقشة حول مثال معظم المشاريع من التجربة الشخصية.
أنا متأكد من أنك ستقول: "
لكننا لا نملكها على الإطلاق ، ونعمل بشكل سريع ومنطقي وقابل للقراءة ، إن إنشاء الأنماط باستخدام js ليس نوعًا من الإضافات ، إنه من المألوف ، ولكن المطورين الأماميون ليسوا بحاجة ، لأن مزود Feofan النهائي قدم شكلاً ممتازًا في php "لكن لا يزال.
التعيينG1. العباقرة الذين يمكنهم ، باستثناءات ، حالة رائعة خاصة.
م *. الفكر
هذا لا يمكن قراءته
لذلك دعونا نبدأ!
M1. دبلجة الكود سيئة.M2. يجب أن تفكر دائمًا 100 خطوة للأمام.على سبيل المثال ، في بداية المشروع ، نأخذ في الاعتبار حالته بعد 5 سنوات.
من الواضح ، عند بدء تشغيل شبكة اجتماعية ، يمكننا أن نقول على الفور أنه بالإضافة إلى إصدار الويب سيكون هناك تطبيقات للهاتف المحمول وتطبيقات سطح المكتب. من هنا ...
م 3 يجب كتابة جزء الخادم مرة واحدة فقط. (م 1)وبما أننا نمتلك نسخة من الويب والجوال وسطح المكتب ...
M4. يتعامل جانب الخادم مع البيانات.لا ينبغي أن يقرر جانب الخادم أي زر سيتم رسمه ولونه الذي يجب أن يكون.
قالب الرسالة أو ملف html الذي [يمكن] يتم تحميله عند تحميل صفحة للفهرسة بواسطة محرك بحث يعمل أيضًا مع البيانات. للأسف ، يجب عليك معالجة html هناك (نظرًا لمتطلبات الفهرسة ، على سبيل المثال) ، ولكن هذه مشكلة أخرى.
في الواقع ، يمكن للمرء أن ينقل المجموعة الأولية من الملفات (html ، js ، css) والبيانات. أي وهنا لا يشارك الظهر في التخطيط.
هنا حدث الانهيار الأول للمشروع: تم قطع جزء الخادم. لن أجادل في اللغة المكتوبة بها ، وكيف يتم ترتيب الهندسة المعمارية (أرجو أن أتذكر MVC). هذا ليس من أعمالي ...
M5. يجب على الجميع فعل شيء خاص بهم.تغطي الأكوام الكاملة بعض المشاريع ، وهنا يمكنك مناقشة هذه النقطة ، لكن بالإشارة إلى (M2) تم تشكيل موقفي هنا: من الأرخص أن يكون لديك مهنيان في مجال عملك بدلاً من إعادة كتابة المشروع في عام واحد. بالطبع ، هناك عباقرة (G1) يقومون بمتابعة كل مكان ، لكن هناك مثل هذه الوحدات ، مما يعني أنه لا يمكنك أخذهم في الحجج "كما ينبغي أن تكون".
أنا أيضا رقاقة بعيدا عن هذه الكعكة فرع من المصمم ، قابليتها للاستخدام والتعاون.
تفهم بشكل صحيح ، يمكن للبائع العادي للواجهة الأمامية نشر علامة فارقة بشكل مستقل ، مع التركيز على مليون تمثيلي وخياله ، لكننا نتحدث عن مشاريع جادة على (M2) ، لذلك لا تملق نفسك :) (G1)
حسنًا ، لدينا بيانات (api ، كل الأساليب اللازمة ، إلخ ، إلخ) ، لدينا مخططات - ولنبدأ.
في ضوء الحقائق الحديثة - أود أن أقدم فرعًا آخر. للأسف ، لكن نسبة كبيرة من الباعة الأماميين الجدد إما لا يعرفون كيفية العمل مع التخطيط ، أو لا يعرفون js. لقد أجريت عددًا كبيرًا من المقابلات ، ومن الغريب أن ألاحظها. لذلك ، يمكن تقسيم الجبهات إلى "مصممي تخطيط" و "مصممي غير تخطيط؟".
M6. يجب أن يكون التطوير في أكثر من ملفقل لي ، من الواضح؟ نعم بالتأكيد!
M7. تنقسم الجبهة إلى جزأين: الجزء الذي يعمل مع البيانات ، والآخر الذي يعرضها.قد لا يكون لدينا هذا أو ذاك الجزء. على سبيل المثال: أن تكون معروضة فقط (صفحة ثابتة) أو تكون فقط بيانات (نص في وحدة التحكم ، وما إلى ذلك).
أنا هنا أقترح الاستخلاص والعرض: أنت شخص بيتزا. تتلقى المكالمات ، ووضع الجبن بشكل جميل وتأخذها إلى المشتري. يشير المنطق إلى أنك غير فعال بشكل خاص (M1). ولكن إذا عمل شخصان آخران معك ، فسيكون ذلك أكثر برودة! واحد يتلقى المكالمات (يعمل مع البيانات) ، والثاني يأخذ (العرض) ، والثالث يضع الجبن بشكل جميل :) (أسلوب العرض التقديمي)
بالفعل سمعت "CEP" من عام 2012 ، "من الواضح" ، ولكن دعونا مرة أخرى ...
M8. JS تعمل مع البيانات.إنه يسمي الخلفية ويقبل الترتيب ولا يهمه كيف توضع الجبنة هناك. ربما البيتزا غير موجودة على الإطلاق ، ربما يقوم فقط بإجراء مسح للبيتزا في السنة؟
M9. تمثيل HTMLيُظهر البيتزا للعميل ، كما يقبل التعليقات (الأموال والمراجعات) ويمررها إلى المسؤول (JS).
M10. CSS - تصميم العرضالمسافة البادئة بين شريحتين من الجبن.
لاحظ أن المسؤول على الهاتف لا يوضح كيفية تكديس الجبن ، ولا تحتوي البيتزا على شخص يتحدث على الهاتف. أي محاولة لمعالجة الأنماط باستخدام js ، أو التعامل مع js باستخدام html هي في البداية وظيفة إضافية ، إنها سيئة في البداية. تم اختراع الفصول ومعالجة الأحداث لسبب ما.
يمكنك وضع فصل: ببروني ، سلامي ، لكن ليس من اختصاصك أن تقرر كيفية وضع جبنة ببروني.
يمكنك إخماد الربط: إذا تعرضت للركل ، ولم تدفع ، أخبر المسؤول. ولكن لا يشق المسؤول في البيتزا. هو وحده ، وهناك العديد من البيتزا! إذا كان لديك العديد من البيتزا مثل المشغلين ، ثم M1.
وهكذا ، والتي مسؤولة عن js ، css ، html - اكتشفنا ذلك.
يمكنك الآن طرح فروع كاملة من الأسئلة: كيفية طبخ البيتزا ، وكيفية تقديمها بشكل أسرع وأكثر ملاءمة ، وكيفية التحدث إلى العملاء عبر الهاتف.
أريد أن أحدد بطريقة أو بأخرى الكلمة العصرية "
المكون ". في الواقع ، حتى الزر العادي هو بالفعل "مكون" ، لكنني سأعيد تعريف هذا بأمثلة واضحة. الزر عبارة عن زر ومكون:
1. مشاركة المعاينة
2. التعليق
3. ملف معاينة
4. التصويت على habr
5. كتلة "الشواغر"
6. نص هتمل للنشر ، استعراض ، ندوة
الخ
M11. عنصر يجب أن تبدو هي نفسها في كل مكان.أينما تنشر معاينة للنشر ، على الصفحة التي تفتحها ، يجب أن تبدو هي نفسها. حكم ثلاثة ألوان. كل شيء يجب أن يكون معترف بها للمستخدم.
التعديلات - التغييرات القسرية ، إذا لزم الأمر. صنع باستخدام المغلق.
أم هو مكون آخر
(على سبيل المثال ، قد تختلف معاينة المنشور في العمود الأيمن عن معاينة المنشور في أسفل الصفحة).
مسييه 12 يتكون المكون من [html] و [js] و [css].كل جزء من الأجزاء اختياري.
M13. بغض النظر عن عدد مثيلات المكون نفسه ، يجب تسجيل الأنماط مرة واحدة فقطعلى سبيل المثال ، يتم تسجيل معاينة المنشور على اليمين ومعاينة المنشور أدناه ومعاينة المنشور في الإشعار والأنماط مرة واحدة فقط.
M14. يجب تسجيل القاعدة فقط في مكون jsعلى سبيل المثال ، معالجات الأحداث عند النقر على الأزرار ، والبيانات اللازمة للعرض. يجب تقديم كل شيء آخر.
M15. قد يتكون المكون من مكوناتعلى سبيل المثال ، قائمة المنشورات.
M16. الأنماط المأخوذة في ملف منفصليتم تخزين هذه الملفات مؤقتًا ، بالإضافة إلى ذلك ، لن يكون هناك أي إغراء لكتابتها في السطر ، وبالتالي فهي مكررة.
M17. يجب ربط أنماط المكونات خلال الفئات الرئيسية وفقطتشبه صفحة أي موقع العديد من الصناديق ذات الأحجام المختلفة ، والتي تشبه دمى التعشيش المدمجة في بعضها البعض.
المربع هو مكون.
لديك مربع مع صناديق والعناصر. لن تحتاج أبدًا إلى التفكير في كيفية وصف العناصر الداخلية لصندوق متداخل. صف هذا فقط.
اخترعوا هنا مجموعة من الدراجات ، ولكن أيها السادة ، لن تكون هناك مشكلة في الأسماء ، بمجرد تحديد مجموعة المكونات لنفسك. إذا قمت بفتح VKontakte وحساب عدد المكونات هناك ، حسنا ، يمكنك حساب 30 قطعة. (لا تعتمد على فيسبوك ، فهناك ألم فقط).
لا يمكن أن تأتي مع أسماء 30 فئة؟ وهو محق في ذلك ، لا يوجد شيء يمكن التوصل إليه:
M18. سيقوم أشخاص آخرون بقراءة التعليمات البرمجية الخاصة بك.لذلك الاسم الطبيعي هو أفضل اسم
على سبيل المثال
1. المشاركات القائمة
2. قائمة التعليقات
3. قائمة الأخبار
4. بعد المعاينة
5. تعليق المعاينة
6. الأخبار معاينة
7. بعد التفاصيل
8. تعليق التفاصيل
9. أخبار التفاصيل
صعبة بشكل لا يصدق ، هاه؟ والشيء الرئيسي هو غير مفهومة ويصعب الحفاظ عليها
وحول "قراءة الآخرين" أيضا إلغاء الاشتراك:
مسييه 19 هتمل ، شبيبة ، يجب أن يتم تخزينها بشكل منفصل!إذا احتجت إلى الجمع بينهما ، فابحث عن حل مختلف عن كتابتها في ملف واحد.
الرد هو الأكثر إثارة للاشمئزاز من حيث قابلية القراءة التي رأيتها!تم تقسيم الصفحة الموجودة على "صناديق" ، وكيفية تخزين الملفات - تمت مناقشتها. ماذا بعد؟
M20. لا توجد حالات خاصة تقريبًاوإذا حدث ذلك ، فغالبًا سيأتي مدراءك إلى العمل ويقولون "من الضروري تعديل التنفيذ بناءً على طلب العميل". حل المهام على أوسع نطاق ممكن.
على سبيل المثال ، في عملنا ، بصرف النظر عن المشروع ، نفصل على الفور بعض المهام: التقاويم ونماذج المدخلات والنوافذ المنبثقة وقوائم الحشوات المختلفة وعرض الملفات والأدوات المصغرة الأخرى التي تتفاعل مع المستخدم. لقول "وظائف الحرف"
M21. كتابة النمط يتطلب التحللالعالم لم يمنحنا فقط رائعة ، ساس.
يحتوي مشروعك على مجموعة ثابتة من الخطوط والألوان والظلال ، وجميع المشاريع الجادة تقريبًا بها أنظمة ألوان ، لذلك عند كتابة أنماط ، يتم تحديد كل ذلك. وهنا ما يلي هو المهم
مسييه 22 إذا كنت تريد تغيير لون الخط (وما إلى ذلك) ، فعليك فقط إجراء تعديلات في مكان واحدفي الختام ، أود أن أذكر مشكلة واحدة مهمة.
M23. الصياغة الصحيحة للمشكلة تؤدي إلى الحل الصحيح.ربما لن يكون هناك css-in-js ، facebook وشيء يجب عدم استدعاؤه.
أتمنى لك كل يوم سعيد!