0

これは、より多くのベストプラクティスの質問です。

私は最近、これまで行ってきた一連のプロジェクトにHTML5ボイラープレートを使い始めましたが、最近、問題になる可能性のあるものを発見しました。別の開発者は、特定の機能がページの読み込みで機能しないため（つまり、jQuery $ .ajaxを使用するフォーム）、ドキュメントの下部にJSファイルを読み込む際に問題が発生し、使いやすさの問題が発生する可能性があることに気付きました。このような一般的な問題に対処するための最善の方法について、いくつか意見を聞きたいと思いました。Paul Irishとその友人たちがこのシステムを本当に考え、絶えず改良していることを知っているので、私はHTML5ボイラープレートを使用しています。

問題の例：サイトのホームページに、jQuery$.post関数を使用してフォームの値を送信するニュースレター登録フォームがあります。ユーザーは値を入力して送信を押すことができますが、jsがロードされていないため、操作性の問題が発生するため、アクションは実行されません。

サイトの下部に含まれているJSを操作するための最良の方法は何ですか？

4

3 に答える 3

3

理想的には、アクション/アクティビティの唯一のイネーブラーとしてJSを使用するべきではありません。サイトは、JSが存在するかどうかに関係なく機能する機能で作成する必要があります。JSはその余分なレイヤーを追加する必要があります。このルールに従えば、JSをどこに含めるかは重要ではありません。

とにかく、@ thrtydotが述べたように下部に含めると、わずか数秒の違いがあります（HTMLが長すぎて、ページの上部とJSが読み込まれる領域の間に大きなギャップがある場合を除きます-その場合、あなたは心配するより大きな懸念を持っています）そして長期的には問題ではないはずです

于 2011-03-09T18:17:07.867 に答える
2

私の推奨事項は次のとおりです。

  • すべての SCRIPT 要素をページの下部に配置します
  • jQueryスクリプトを最初のSCRIPT要素に入れる
  • 2 番目の SCRIPT 要素に、できるだけ早く利用できるようにする動作の ready() ハンドラーを含めます。

そのようです：

<script src="http://ajax.googleapis.com/.../jquery.min.js"></script>  
<script>
    $(function() {
        // bind the handler to the newsletter submit button
        // etc.
    });
</script>
<!-- all other external and inline scripts should be below this line -->
<script src="pluginA.js"></script>
<script src="pluginB.js"></script>
<script>
    $(function() {
        // other page load code
    });
</script>

これはあなたができる最善のことです。

ところで、ユーザーはとにかく最初の数秒間はページが壊れていることを期待しています。私はこれをFacebook、Youtubeなどで常に経験しています...

于 2011-03-09T19:12:41.300 に答える
0

Ajaxフォームを使用すると、送信イベントまたはクリックイベントをバインドして、Ajax呼び出しを発生させることができます。そして、そのバインディングは、DOMがロードされたときにのみ実行できます（jqueryreadyメソッドを使用）。したがって、コードはHTML本文がレンダリングされた後に実行されます。つまり、本文の下部にコードをロードできます。

Ajax機能がバインドされる前にユーザーが送信しようとする問題が発生している場合は、バインドが発生するまでボタンを視覚的に「無効」状態にすることができます。

ただし、スクリプトファイルをヘッドにロードすることで、すべてのレンダリングをブロックし、ユーザーが空白のページを取得できるようにします。一般に、機能を待つ必要がある場合でも、コンテンツを取得する方が良いエクスペリエンスです。

于 2011-03-09T18:16:56.967 に答える