現在最適な HTML/CSS/JavaScript 構成は何ですか?
-
18-09-2019 - |
質問
私は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 アレックス
他のヒント
CSS ファイルと JS ファイル全般に関しては、開発中にすべての JS ファイルを 1 つのファイルに結合することはありません。1 つの大きな JS ファイルで開発するのは非常に困難です。むしろ、オンザフライまたは展開中にそれらを組み合わせるモジュールを使用してください。
私は通常、(CSS と JS の両方) を使用します。
1 つの一般的なファイル:
- プロジェクト.css
そしてページごとに 1 つ:
- プロジェクト_ようこそ.css
また、特別なコンポーネント (ログイン コントロール、広告エリア ビューなど) にも個別のコンポーネントがあります。
そうすれば、いくつかの整理テクニックを適用でき、単一の大きなファイルの管理に夢中になることはなくなります。
HTHアレックス
私は、JSは、bodyタグの下に呼び出して置くことをお勧めします。あなたのスクリプトがハングしている場合は、そのページには、事実の後の行動(JS)の負荷をロードしてみましょうことができます。私はスピードが大幅にこの方法で改善することに気付きました。
このチェックアウト: http://stevesouders.com/hpws/rule-js -bottom.phpする