مقالة مقدمة من wulin.com (www.vevb.com): ما مدى عمق الماء في الصفحة الأمامية؟
أي شخص يعمل على الإنترنت يكتب بشكل أساسي بضعة أسطر من HTML. يمكن للأشخاص الذين استخدموا Word أيضًا أن يصنعوا صفحات منتظمة مع Dreamweaver ، لذلك سيعتقد معظم الناس بطبيعة الحال أن تطوير الصفحات ليس لديه الكثير من المحتوى الفني وبسيط للغاية. لا يقتصر الأمر على هذا الفهم المشترك ، ولكن هناك أيضًا العديد من الشكوك للممارسين: لا توجد مشكلة في تنفيذ الصفحة الأمامية ؛ التوافق ، الحالات الصغيرة ؛ تكامل الصور ، وقد تم استخدامه طوال الوقت ... ما هي المشكلات الأخرى التي يمكن العثور عليها؟ تتم مناقشة الزجاجة والسقوف والتحولات والطرق الخارجية على نطاق واسع بين الممارسين. هل حقا لا مشكلة؟ تم إنشاء مركز التكنولوجيا في الواجهة الأمامية عبر البريد الإلكتروني لعدة سنوات ، ويبدو أن هناك موضوعات لا حصر لها للمناقشة ، وغالبًا ما تكون هناك أفكار جديدة لتشجيع الجميع. إذن ما هي متطلبات تطوير الصفحة وما يجب القيام به ، ومدى عمق المياه هنا ، دعنا نغرفها.يبدو أن تصور الواجهة الأمامية للصفحة يتنوع في أوقات مختلفة. في الأيام الأولى للإنترنت ، كانت السيارات الصغيرة لا تزال أغلى من المنازل ، وكانت كعكات السمسم والفيرميسيلي تستخدم فقط لتناول الطعام ، واستخدمت الكريسان فقط لصنع الشاي. في ذلك الوقت ، كان نمط تصميم الصفحة عازبًا نسبيًا ، وكانت متطلبات الصفحة المقابلة بسيطة نسبيًا. كان المتصفح في ذلك الوقت في الأساس عالم IE6. كان JavaScript فقط مرادفًا لصفحة الويب المؤثرات الخاصة. صفحة HTML نفسها لم تجذب الكثير من الاهتمام. يبدو أنه طالما يمكنك استخدام Div أو حتى جدول لإضافة CSS إلى تحديد المواقع المساعدة للصورة ، سيكون من الجيد حجز محتوى الصفحة ، وكان هذا المفهوم موجودًا لفترة طويلة. مع إثراء محتوى الصفحة ، وتطوير نمط التصميم ، والزيادة في تعقيد التفاعل ، وتطبيق AJAX وتحديث المتصفحات جعل الجميع ينتبهون إلى الصفحات الأساسية نفسها مرة أخرى. ثم ما تتم مناقشته بشدة هو توافق المتصفح. عند مواجهة المشكلات ، فإن الشيء الأكثر شغوفًا هو البحث عن الاختراقات على الإنترنت ، ثم توبيخ IE6 و 7 ... بعد القيام بكل هذه الأشياء ، يبدو أنني واجهت عنق الزجاجة مرة أخرى وبدأت في العثور على مخرج. لنبدأ بهذه المرحلة.
إن تنفيذ العروض هو الوظيفة الأساسية
يتم التعبير عن المسودة المرئية من خلال رمز الصفحة ، والذي يتضمن مطالبين أساسيين: 1. يمكن أن يعكس حقًا المسودة المرئية ؛ 2. يمكن أن تكون متوافقة من خلال المتصفح. لتحقيق هذين المطالب ، نحتاج إلى الحصول على موقف التفاصيل ودرجة معينة من مهارات الصفحة. إذا استطعنا إكمال هذين المحتلين ، فيمكننا إدخال صفوف الممارسين في الواجهة الأمامية للصفحة ، ولكن هذا يعني أننا يمكن أن نكون مؤهلين لتطوير الصفحة؟ لا ، لقد بدأت للتو!
التواصل مع المصممين ومشاركة المشروع
التواصل مهم. اسمحوا لي أن أطرح بعض الأسئلة أولاً: هل ناقشنا مع المصممين أن بعض التأثيرات لها تأثير أكبر على كفاءة تقديم المتصفحات المنخفضة؟ هل سبق لك أن ناقشت بعض الآثار التي يمكن تنفيذها في CSS3 لجعل الهيكل أكثر إيجازًا وواضحًا؟ هل سبق لك أن اتبعت التوازن في الكود والرؤية؟ إن تطوير الواجهة الأمامية للصفحة مخصص للمستخدمين الأساسيين ، ويتم تطبيق الكود المكتوب أيضًا مباشرة على المتصفح. نحن ملزمون بأن نكون مسؤولين عن الاستقرار وتقديم كفاءة الصفحة. غالبًا ما نواجه تصميم المشروع تحت ضغط التقدم العام ويتم التصميم في وقت واحد مع التطوير الأمامي للصفحة. في هذا الوقت ، من الضروري الحصول على أكبر قدر ممكن من معلومات المشروع وفهم ما يتعين علينا القيام به. يمكن أن تساعدنا هذه في التفكير تمامًا في إعادة الاستخدام والتوسع في الإطار.
بنية صفحة جيدة
كتابة هيكل الصفحة يشبه بناء أساس بناء. جودة رمز CSS ، وتطوير JS ، وتطوير الخلفية ، وتوسيع الصفحة المستقبلية ، والتكرار وتعديل الصفحة. بعد أن تحصل على المسودة المرئية ، لا تكون مشغولاً بالبدء ومراقبة وفكر أكثر. قم أولاً بتحليل التصميم ، وقسم الإطار ، ثم خطط للهيكل ، واكتب الرمز. لا سيما في المشاريع واسعة النطاق ، فإن الاستخدام العقلاني للتطوير المعياري له فوائد كبيرة سواء تم تنفيذه في الصيانة الشاملة أو الموسعة.
حول الاختراق
يبحث العديد من الطلاب أكثر عبر الإنترنت عن الاختراقات عند تطوير الصفحات. سواء كنا نعتمد بالكامل على الاختراقات لتحقيق توافق الصفحة ، فإن الإجابة هي لا. غالبًا ما يصف الناس IE6 قولنا أننا أخبرنا كذبة ، لكن علينا أن نقول لمئات أخرى أكاذيب أخرى لتحقيق هذه الكذبة. عدم إنكار أن IE6 غالبًا ما يجعلنا نتقيأ دماء في أفواهنا ، لكن هذا لا يعني أننا يمكن أن نشعر بالراحة من خلال استخدام المزيد من الأكاذيب للتعويض عنها. في معظم الحالات ، يمكنك ضبط بنية HTML عن طريق تغيير أفكارك ، أو استخدام بعض CSS غير المبررة ولكنها آمنة نسبيًا لقتل الاختراقات. لا يمكن لأحد أن يتنبأ عند استخدام الاختراق سيؤدي إلى سقوطنا في ضربة كبيرة. على سبيل المثال ، يؤدي تشغيل التصميم أو الموقف: النسبي يمكن أن يساعد في حل العديد من مشاكل IE6.
رمز جميل
في الوقت الحاضر ، فإن العديد من مشاريع الويب لها وظائف معقدة وسيصبح مقياس الكود الخاص بهم ضخمًا. كيفية تحسين التنمية التعاونية والصيانة هي مشكلة نواجهها. نحتاج إلى التفكير في تحسين التخطيط الموحد ، ويجب أن نطور عادات تطوير الكود الجيدة حتى نكون مرتاحين عند مواجهة المواقف المختلفة. إن النظر إلى رمز الصفحة ، ورؤية استخدام التسمية المعقولة ، والتعليقات التوضيحية الجيدة ، وهيكل رمز واضح ، و CSS الدقيقة لا يحبون تقدير العمل الفني فحسب ، بل يقلل أيضًا من تكاليف الاتصال لتطوير مجرى النهر والتطوير التعاوني. ما سبب عدم القيام بذلك؟ لإعطاء مثال سلبي: تعاطي Div مشكلة نموذجية الآن. عد لمعرفة عدد العلامات التي تستخدمها؟ يجب أن تستخدم الدلالات المختلفة رمز العلامة المقابل ، وخاصة HTML5 يوفر علامات دلالية أكثر ثراء. انهم جميعا في انتظار التهمة في ساحة المعركة. دعونا نحررهم!
تطوير صفحة يمكن الوصول إليها
إمكانية الوصول وسهولة الاستخدام هي أشياء ذاتية وسهلة الاستخدام. قد لا تظهر الصفحات التي يبدو أن الأشخاص العاديين المقدمة بشكل مثالي بالضرورة لاعتبارها بين المجموعات الخاصة. يجب أن نشعر بالذنب عندما يستخدم المكفوفين برنامج قراءة الشاشة للدخول إلى حلقة داخل منطقة معينة من الصفحة. لا يمكن القول إلا أن مواقع الويب المحلية تولي اهتمامًا أقل بكثير لهذا ، الأمر الذي يتطلب منا العمل معًا للسماح لمزيد من الناس بالشعور بحماسنا. >
ضمان الكفاءة
كجزء حدودي نسبيًا من تطوير المشروع ، قد يلزم إكمال تطوير الصفحة في أقرب وقت ممكن للحصول على وقت للمشروع ، مما يتطلب منا تحسين الكفاءة قدر الإمكان. إذا كنت ترغب في القيام بذلك بشكل جيد ، فيجب عليك أولاً شحذ أدواتك. بالإضافة إلى تكوين الخبرة العملية وعادات الرمز التي يمكن أن تساعدنا في تحسين الكفاءة ، إذا كنت ترغب في تحسين قدرتك على التحكم في تقدم تطورك ، فهناك العديد من الأدوات الإضافية التي يمكن أن تساعدنا في تطوير الصفحات. على سبيل المثال ، يمكن أن يساعدنا استخدام أقل أو SASS في توسيع وتنظيم CSS ، وتحسين كفاءة كتابة CSS بشكل كبير وزيادة الصيانة. على سبيل المثال ، يمكنك استخدام كتل الإكمال التلقائي والرمز المخصص ل Zen Coding للسماح لك بتوجيه سيفك كما لو كنت تطير. لقد رأيت حتى الكلمات الرئيسية Code Clock التي تعمل على تحسين سرعة التطوير من خلال طرق الإدخال المخصصة. إذا قمت باستكشاف المزيد ، فستجد بالتأكيد الأداة الأنسب لنفسك.
تحسين الخوادم
يتطلب تطوير الصفحة أيضًا فهم تحسين الخادم وتقليل العبء على الخادم. على سبيل المثال ، يعد CSS Sprite مثالًا نموذجيًا لتقليل عدد طلبات الخادم. في التطوير الأمامي لصفحة البريد الإلكتروني لـ Netease ، نقوم باستمرار بإجراء تحسينات مختلفة ، مثل البحث باستمرار عن توازن بين حجم الملف ورقم طلب الخادم ؛ من أجل تحسين استخدام ذاكرة التخزين المؤقت قدر الإمكان ، تم اعتماد ترقيات التصحيح ؛ كانت أسماء الفئة مملوءة وضغطها لتجنب التسمية الطويلة المفرطة ؛ تم استخدام BASE64 لتقليل عدد الطلبات ، وغيرها من التدابير. هذه هي نتائج المفاضلات الشاملة والتحسينات الشاملة يجب النظر فيها في جميع الجوانب. لأنه عندما يصل عدد زيارات الصفحة إلى ترتيب معين من حيث الحجم ، فإن أصغر التحسين سيحقق نتائج كبيرة ، وحتى أصغر مشكلة قد تشكل كارثة ضخمة.
احتضان HTML5
هذا هو حقبة مليئة بالفرص. أدى ظهور عصر HTML5 إلى خلق فرصًا أكبر مع صعود الإنترنت عبر الهاتف المحمول ، وهناك الكثير من الأشياء التي تستحق التعلم والاكتشاف. يوفر HTML5 واجهة API JS الغنية ، والتي نحتاج إلى دراستها ؛ اجتذبت روعة CSS3 اهتمامًا كافيًا ، وهو ما نحتاج إلى دراسته ؛ تتطلب كيفية تطوير صفحات أكثر قابلية للتكيف على الأجهزة المحمولة أن ندرس ...
ابقى فضولي ابقى مغامر
كلما جرفت الماء ، وجدت أن القاع لا يزال عميقًا وأن القاع لم يكن قاعًا. كلما درست المحتوى أعلاه ، كلما وجدت أن المزيد من الجبال والأنهار تحتاج إلى تسلقها. ابق جائعًا ، واستخدم عينيك لاكتشاف واكتشاف ، وإثراء مهاراتك باستمرار للعثور على الموقف واختراق الاختناقات. كما يقول المثل ، فقط من خلال بناء منزل رفيع المستوى ، يمكنك تحقيق نتائج طبيعية. تم تشكيل هذا المقال لأنني ناقشت مشكلة عنق الزجاجة مع زملائي من قبل. كنت أرغب في العثور على المواقع لنفسي وللطلاب في الواجهة الأمامية للصفحة لفرز أفكاري. خذ عقوبة السجن من خطاب الرئيس التنفيذي لشركة Apple في ستانفورد ، وابق جائعًا وابقى أحمق وشاركه مع الجميع.