ما هو حاليا أفضل تكوين HTML / CSS / JavaScript؟

StackOverflow https://stackoverflow.com/questions/1481022

سؤال

أنا أحصل على أكثر في مسج وكذلك وضعت HTML / JavaScript / CSS الموقع التي أستخدمها لجميع الاختبارات الخاصة بي.

منذ أن تتحول هذه الاختبارات في النهاية إلى PHP و ASP.NET MVC المواقع الإلكترونية، أود استخدام هذه الفرصة للحصول على أساسيات أسفل مرة أخرى للمتصفحات الحديثة ومعايير الويب قبل بناء لغات البرمجة النصية على رأسها.

لقد اخترت استخدام:

  • XHTML 1.0. صارم
  • UTF-8. التشفير
  • مراجع عدد قليل من CSS قدر الإمكان (ضع كل شيء في 1 CSS ملف لسرعة التحميل)
  • كقليل من المراجع جافا سكريبت قدر الإمكان (1 ملف جافا سكريبت بالإضافة إلى مرجع قاعدة رمز مسج - أفترض باستخدام غوغل قاعدة رمز مسج هي أفضل الممارسات للسرعة)
  • أتحقق من التعليمات البرمجية الخاصة بي وأنا أقصدها مع http://validator.w3.org.

هل هناك أي شيء آخر أحتاج إلى النظر فيه؟

هنا مثال على أحد مواقع الاختبار الخاصة بي:

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text XHTML Page</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="javascript/main.js"></script>       

    </head>

<body>
    <h1 class="highlightTitle">Text</h1>
    <p class="main">First</p>
    <p>Second</p>
    <p id="selected" class="regular">Third</p>
    <p>Fourth</p>

<form action="">
    <div>
        <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
        <input type="button" value="highlight title" onclick="highlightTitle()" />
        <p>here is another paragraph</p>
    </div>
</form>

</body>
</html>

Main.cs:

p.highlighted {
    background-color:orange;
}
h1.highlightTitle {
    background-color:yellow;
}
h1.deselected {
    background-color:#eee;
}
p.regular {
    font-weight: bold;
}

Main.js:

google.load("jquery", "1.3.2");

function highlightIt() {
    $('#selected')
        .toggleClass('highlighted');
}

function countThem() {
    alert("there are " + $("p.main").size() + " paragraphs");
}

function highlightTitle() {
    $("h1").toggleClass("deselected");
}
هل كانت مفيدة؟

المحلول

أنا شخصيا أود أن أرتبط بحدث Click عبر JQuery لضمان فصل جيد، مثل هذا:

$("#yourId").bind("click", highlightIt);

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

راجع للشغل يمكنك أيضا استخدام الأحداث المخصصة وأسماء أسماء الأحداث:

$("#yourId").bind("beforeHighlighting", doSomething);

يتم تشغيله من قبل

$("#yourId").trigger("beforeHighlighting");

و 

$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);

// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");

هث اليكس

نصائح أخرى

حرك ال <script> كتل إلى اسفل الصفحة.

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

عادة ما أذهب مع (كل من CSS و JS):

ملف عام واحد:

  • project.css.css.

واحد لكل صفحة:

  • project_welcome.css.

وأي مكونات خاصة (عناصر تحكم تسجيل الدخول، طرق عرض المنطقة الإعلانية، إلخ) لديها منفصلة واحدة أيضا.

وبهذه الطريقة يمكنك تطبيق بعض التقنيات التنظيمية ولن تتمكن من إدارة مجنون هذا الملف الكبير الفردي.

هث اليكس

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

تحقق من هذا: http://stevesouders.com/hpws/rule-js-bottom.php.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top