6

私は jQuery にもっと慣れてきたので、すべてのテストに使用するHTML/Javascript/CSS ベース サイトをセットアップしました。

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

私は使用することを選択しました：

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

他に考慮すべきことはありますか？

以下は、私のテスト Web サイトの 1 つの例です。

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");
}
4

4 に答える 4

5

個人的には、jQuery 経由でクリック イベントにバインドして、次のように適切に分離します。

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

このようにして、複数のイベント ハンドラーにバインドできます。onclick AFAIK を使用するだけの場合、使用できるハンドラーは 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 アレックス

于 2009-09-26T11:32:56.737 に答える
5

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

于 2009-09-26T11:28:34.823 に答える
4

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

私は通常（CSSとJSの両方）を使用します：

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

  • プロジェクト.css

および 1 ページに 1 つ:

  • project_welcome.css

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

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

HTH アレックス

于 2009-09-26T11:36:11.597 に答える
0

body タグの下に JS 呼び出しを配置することをお勧めします。スクリプトがハングしている場合は、ページが読み込まれ、ビヘイビア (JS) が事後に読み込まれます。この方法で速度が大幅に向上することに気付きました。

これをチェックしてください：http://stevesouders.com/hpws/rule-js-bottom.php

于 2009-09-28T03:52:54.860 に答える