現在最適な HTML/CSS/JavaScript 構成は何ですか?

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

質問

私はjQueryにもっと興味を持っているので、 HTML/JavaScript/CSSベースのサイト すべてのテストにこれを使用します。

これらのテストは最終的には PHP および ASP.NET MVC Web サイトを構築する前に、この機会を利用して、最新のブラウザーと Web 標準の基本を再度理解してから、その上にスクリプト言語を構築したいと考えています。

使用することを選択しました:

  • XHTML 1.0 厳しい
  • UTF-8 エンコーディング
  • CSS 参照をできるだけ少なくします (すべてを 1つのCSSファイル 読み込み速度のため）
  • JavaScript の参照をできるだけ少なくする (1つのJavaScriptファイル プラス、jquery コードベースリファレンス - を使用すると仮定します。 グーグル jQuery コードベースは速度のベストプラクティスです)
  • コードをビルドしながらチェックします http://validator.w3.org

他に考慮する必要があることはありますか?

これは私のテスト Web サイトの例です。

インデックス.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;
}

メイン.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");
}
役に立ちましたか？

解決

個人的に私はこのような素敵な分離を確保するためのjQueryを経由して、クリックイベントに結合します 

$("#yourId").bind("click", highlightIt);
あなたは、複数のイベントハンドラにバインドすることができます。

この方法で。あなただけのonclickを使用している場合は私の知る限り、あなたは今まで1つのハンドラを使用することができます。

ところであなたはまた、カスタムイベントとイベントの名前空間を使用することができます：

$("#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");

HTH アレックス

他のヒント

ページの下に<script>ブロックを移動します。

CSS ファイルと JS ファイル全般に関しては、開発中にすべての JS ファイルを 1 つのファイルに結合することはありません。1 つの大きな JS ファイルで開発するのは非常に困難です。むしろ、オンザフライまたは展開中にそれらを組み合わせるモジュールを使用してください。

私は通常、(CSS と JS の両方) を使用します。

1 つの一般的なファイル:

  • プロジェクト.css

そしてページごとに 1 つ:

  • プロジェクト_ようこそ.css

また、特別なコンポーネント (ログイン コントロール、広告エリア ビューなど) にも個別のコンポーネントがあります。

そうすれば、いくつかの整理テクニックを適用でき、単一の大きなファイルの管理に夢中になることはなくなります。

HTHアレックス

私は、JSは、bodyタグの下に呼び出して置くことをお勧めします。あなたのスクリプトがハングしている場合は、そのページには、事実の後の行動（JS）の負荷をロードしてみましょうことができます。私はスピードが大幅にこの方法で改善することに気付きました。

このチェックアウト： http://stevesouders.com/hpws/rule-js -bottom.phpする

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top