مواصفة
هذا هو معيار كتابة التعليمات البرمجية المتبع والمتفق عليه من قبل فريق تطوير الواجهة الأمامية، والذي يهدف إلى تحسين توحيد التعليمات البرمجية وقابلية صيانتها.
المبادئ الأساسية
الامتثال لمعايير الويب، وHTML الدلالي، والفصل بين الهيكل والأداء والسلوك، والتوافق الممتاز من حيث أداء الصفحة، يجب أن يكون الكود موجزًا وواضحًا ومنظمًا، لتقليل تحميل الخادم قدر الإمكان وضمان التشغيل. أسرع سرعة تحليل.
المواصفات العامة
1. بروتوكول التجاهل (الحذف): مثل الخلفية: url(http://www.google.com/images/example); يجب عليك كتابة الخلفية: url(//www.google.com/images/example); تسهيل تبديل http باستخدام بروتوكول https ما لم يكن من الضروري استخدام بروتوكول معين
2. استخدم IDE لتحقيق مسافة بادئة واضحة عند الكتابة. يتم استبدال مفتاح tab بأربع مسافات.
نظرًا لأن أدوات التحرير في الأنظمة المختلفة تفسر علامات التبويب بشكل مختلف، فإن مفتاح tab ضمن Windows يحتل أربع مسافات، بينما في Linux فإنه يشغل ثماني مسافات (ما لم تقم بتعيين شغل مفتاح tab بنفسك. طول الموضع).
على سبيل المثال، نص سامية، يمكنك تعيين مفتاح التبويب في هذه الأداة.
3. استخدم الأحرف الصغيرة لسمات التسمية
4. لا تترك أي مسافات في النهاية لمنع الاختلاف
5. استخدم UTF-8 (بدون قائمة مكونات الصنف) وأضف <meta charset="utf-8″> إلى المستند.
6. استخدم الأحرف الصغيرة ".js" لتسمية الملفات، ويوصي باستخدام "-" بدلاً من "_"
7.TODO (جهة اتصال) وTODO: بند عمل، لا تستخدم @@
مواصفات تحسين HTML
1. مواصفات استخدام html5 <!DOCTYPE html>
2. التنسيق الافتراضي للعلامة <img>: <img src="xxx.png" alt="default text" /> لتجنب مشكلة src=""
3. التنسيق الافتراضي للعلامة <a>: <a href="###" title="Link name">xxx</> ملاحظة: يتم تحديد target="_blank" وفقًا للاحتياجات
4. تحتفظ العلامة <a> بالعناصر النائبة للربط باستخدام ###، راجع: مشكلة العنصر النائب للعلامة
5. عند كتابة عنوان الرابط، يجب تجنب إعادة التوجيه، على سبيل المثال: href="http://itaolun.com/"، أي أنه يجب عليك إضافة "/" بعد عنوان URL.
6. يجب إغلاق كافة العلامات بما يتوافق مع معايير XHTML
7. استخدم دائمًا نفس صيغة الكتابة للشرطة المائلة في نهاية العلامة: <br /> <hr /> انتبه إلى المسافة بين
8. تجنب استخدام العلامات القديمة، مثل: <b> <u> <i> واستبدلها بـ <strong> <em> وما إلى ذلك.
9. استخدم data-xxx لإضافة بيانات مخصصة، مثل: <input data-xxx="yyy"/>
10. تجنب استخدام الرموز الخاصة style="xxx:xxx;" في أوراق الأنماط المضمنة واستخدم كيانات رموز HTML المرجعية
11. يجب إضافة التسميات إلى عناصر النموذج الوصفي (الإدخال، منطقة النص)، مثل <p>الاسم: يجب كتابة <input type="text" id="name" name="name" /></p> بالشكل : < p><label for=”name”>الاسم: </label><input type=”text” id=”name” /></p>
مواصفات تحسين CSS
1. أضف "؛" بعد كل سمة نمط
أداة ضغط مريحة "تجزئة الجملة".
2. تسمية الفصل، استخدم "-" [موصل علامة الطرح] لفصل الحروف الموجودة في الفصل:
الفصل بـ "-" أوضح من استخدام حالة الجمل.
خط المنتج، وحدة المنتج، الوحدة الفرعية، يمكنك أيضًا استخدام هذه الطريقة عند التسمية
المعرف: تسميات CamelCase مثل:
الاسم الأول أعلى تذييل قائمة Box حقوق الطبع والنشر
3. فيما يتعلق باستخدام المساحات، تنطبق القواعد التالية:
.محتوى الفندق {
وزن الخط: غامق؛
} يجب أن تكون هناك مسافة قبل المحدد و{. يجب أن يحتوي اسم السمة على مسافة بعد: يجب أن يكون لاسم السمة مسافة بعد: أحد أسباب إضافة مسافات قبل (ممنوع) هو الجماليات ثانيًا، هناك خطأ في IE 6 كزة علة.
4. (مستحسن) ترتيب كتابة السمات، على سبيل المثال:
.محتوى الفندق {
/* موضع*/
عرض: كتلة؛
الموقف: مطلق؛
اليسار: 0؛
أعلى: 0؛
/* نموذج الصندوق */
العرض: 50 بكسل؛
الارتفاع: 50 بكسل؛
الهامش: 10 بكسل؛
الحدود: 1 بكسل أسود خالص؛
/ *آخر* /
اللون: #efefef؛
}فيما يتعلق بتحديد المواقع، تتضمن السمات الشائعة ما يلي: موضع العرض العائمة العلوية اليسرى، وما إلى ذلك. تتعلق بنموذج الصندوق، وتشمل السمات الشائعة: العرض والارتفاع والهامش والحشو والحدود والسمات الأخرى.
يمكن أن تؤدي الكتابة بهذا الترتيب إلى تحسين أداء المتصفح في عرض DOM. على سبيل المثال، إذا لم يتم تعيين عرض وارتفاع الصورة على صفحة ويب، قبل تحميل الصورة، تكون المساحة التي تشغلها هي 0، ولكن بعد تحميلها. ، ، تم فتح مساحة 0 فجأة، مما سيؤدي إلى إعادة ترتيب العناصر الموجودة تحتها وعرضها، مما يؤدي إلى إعادة الرسم وإعادة التدفق. عندما نكتب CSS، نضع موضع العناصر أولاً، نسمح للمتصفح بمعرفة ما إذا كان العنصر موجودًا داخل تدفق النص أم خارجه، ومكان وجوده في الصفحة، ثم نسمح للمتصفح بمعرفة عرضه وارتفاعه. الحدود، وما إلى ذلك. يتم عرض هذه السمات التي تشغل مساحة وسمات أخرى داخل هذه المنطقة الثابتة، وهذا ما يعنيه ذلك إلى حد كبير
المقالات الموصى بها:
نتائج الاستطلاع: كيف تقوم بترتيب خصائص CSS الخاصة بك؟
http://www.mozilla.org/css/base/content.css
5. (مستحسن) عند كتابة الأنماط لبنية HTML محددة، استخدم اسم العنصر + اسم الفئة
/* جميع الملاحة مكتوبة لـ ul*/
أول.ناف {
...
} ".a div" و".a div.b"، لماذا يعتبر الأخير أفضل؟ إذا تغيرت الاحتياجات وتمت إضافة div إضافي ضمن ".a"، فهل سيؤثر النمط الأولي على divs اللاحقة~
6. (غير مستحسن) استخدم الفلتر في أي (ممنوع) استخدام التعبير
المشكلة الرئيسية هنا هي الكفاءة، ويجب أن توليها اهتمامًا خاصًا وأن تستخدم أشياء أقل تحرق وحدة المعالجة المركزية
7. يتم تمثيل تعليقات CSS بـ "/* */". عند التعليق على سطر واحد، يحتفظ كل من الكائن المشروح وأحرف التعليق السابقة واللاحقة بمسافة ويشغلان سطرًا منفصلاً عند التعليق على أسطر متعددة، وهو تعليق البداية يشغل كل من الحرف وحرف التعليق النهائي سطرًا واحدًا. على سبيل المثال:
/* تعليق CSS */
/*
طاولة {
انهيار الحدود: انهيار؛
}
*/مواصفات تحسين JS
1. فاصل الأسطر
يجب أن يكون كل سطر من التعليمات البرمجية أقل من 120 حرفًا، إذا كان أكثر من هذا الرقم، فيمكنك وضع سطر جديد مثل "." أو "+" في نهاية السطر يجب وضع مسافة بادئة للسطر الجديد بمستوى آخر قبل السطر الجديد.
إذا كانت المعلمات في دالة أو طريقة طويلة، فيجب تقسيمها بشكل مناسب.
يُحظر فواصل الأسطر بين الكلمة الأساسية return والتعبير المراد إرجاعه. على سبيل المثال:
// ما تم إرجاعه فعليًا هو غير محدد، وليس 1
اختبار الوظيفة () {
يعود
1؛
} 2. أسطر التعليمات البرمجية
يمنع كتابة عدة عبارات قصيرة في سطر واحد، أي كتابة عبارة واحدة فقط في سطر واحد.
عبارات مثل if وfor وdo وwhile وswitch وcase وdefault وbreak و continue تحتل سطرًا خاصًا بها.
جميع أجسام الحلقات وبيانات التنفيذ لهيئات الحكم مثل if، for، do، while، وما إلى ذلك يجب أن تكون محاطة بـ "{}"، ولا يُسمح بحذف الأقواس المتعرجة. على سبيل المثال:
// خطأ إذا (i < 5) i += 1;
// صحيح إذا (i < 5) {
أنا += 1
} 3. المحاذاة <br />المحدد {} الخاص بكتلة التعليمات البرمجية، "{" يتبع السطر السابق ويتم فصله بمسافة في المقدمة، "}" يجب أن يشغل سطرًا حصريًا ويكون موجودًا في نفس العمود، بينما يكون محاذاة إلى اليسار مع البيانات التي تشير إليها.
يجب استخدام طريقة المسافة البادئة المذكورة أعلاه في بداية نص الوظيفة، وتعريف الفئة، والبرامج في عبارات if وfor وdo وwhile وswitch وcase.
4. الفضاء
يجب أن تكون هناك مسافة بعد الكلمة الأساسية لتمييز الكلمة الأساسية.
لا يمكن أن تكون هناك مسافات بين أسماء الوظائف وأسماء الطرق والقوس الأيسر "("، على سبيل المثال:
// وظيفة getInfo () { خاطئة
// شفرة
}
// الوظيفة الصحيحة getInfo() {
// شفرة
}عند التصريح عن تعبير دالة، لا يمكن ترك مسافة بين الدالة والقوس الأيسر "("، على سبيل المثال:
// خطأ var user = function () {
// شفرة
}
// صحيح var user = function() {
// شفرة
} أضف مسافة بعد الفاصلة.
عوامل التعيين، وعوامل المقارنة، والعوامل الحسابية، والعوامل المنطقية، وعوامل حقل البت، مثل "="، "+=" ">="، "<="، "+"، "*"، "%" "، " &&"، "||" والعوامل الثنائية الأخرى يجب أن تكون مسبوقة ومتبوعة بمسافات.
لا توجد مسافات قبل وبعد عوامل التشغيل الأحادية مثل "!"، و"~"، و"++"، و"--"، و"&" (عامل العنوان).
لا توجد مسافات قبل وبعد "." و"[]".
5. سطر فارغ
أضف سطرًا فارغًا بعد كل إعلان فئة وفي نهاية كل تعريف دالة.
داخل نص الوظيفة، لا ينبغي فصل البيانات المرتبطة بشكل منطقي بأسطر فارغة، ويجب فصل الأماكن الأخرى بأسطر فارغة.
6. استخدم عوامل شرطية صارمة. استخدم === بدلاً من == و !== بدلاً من !=
7. تجنب الفواصل الإضافية. على سبيل المثال: فار آر = [1,2,3,]
8. يجب أن تنتهي جميع العبارات بفاصلة منقوطة، باستثناء، function، if، Switch، Try، while.
9. ضع القوس المتعرج الأيسر في نهاية السطر والقوس المتعرج الأيمن في بداية السطر.
10. لا يُنصح باستخدام new لإنشاء الأنواع التالية من الكائنات: new Number، new String، new Boolean، new Object (استبدل بـ {})، مصفوفة جديدة (استبدل بـ []).
11. يجب أن يكون هناك مسافة بعد "،" بين أعضاء المصفوفة.
12. يُحظر استخدام تسمية الكلمات الرئيسية المحجوزة لجافا سكريبت في js/json، مما قد يتسبب بسهولة في حدوث أخطاء في IE. الكلمات الرئيسية (فاصل، حالة، التقاط، متابعة، افتراضي، حذف، القيام، آخر، أخيرًا، من أجل، وظيفة، إذا، في، مثيل، جديد، إرجاع، تبديل، هذا، رمي، محاولة، typeof، var، void، while ، مع)، الكلمات الرئيسية (مجردة، منطقية، بايت، شار، فئة، يخدع st، مصحح الأخطاء، مزدوج، التعداد، تصدير، يمتد، fimal، float، goto، Implements، import، int، واجهة، طويلة، mative، حزمة، خاصة، محمية، عامة، قصيرة، ثابتة، فائقة، متزامنة، رميات، عابرة، متقلب).
13. يوصى باستخدام "+" كموصل للسطر الجديد بدلاً من "".
14. يُحظر استخدام المعلومات السريعة في الأوصاف اللغوية العامة، ويجب أن تكون موجزة وواضحة. عند رؤية المعلومات، يمكنك تحديد موقع الخطأ على الفور. على سبيل المثال، عند مطالبة معلومات المستخدم بالإبلاغ عن خطأ، استخدم "هذا المستخدم غير موجود "بدلاً من "البيانات التي تم إرجاعها بواسطة الخلفية غير صحيحة"، "مهلة الشبكة".