2

document.ready()jQueryとネイティブjavascript onload()メソッドには違いがあることを知っています。その結果、準備ができdocument.ready()ている間に初期化を行うために使用したいと思います。DOM

ただし、jQueryライブラリによって提供される追加の機能は必要ありません。jQuery-1.7.2.min.jsのサイズが94.8kbであるとすると、特にモバイルデバイスで読み込み時間が遅れる可能性がありますが、メソッドのみを提供するjQueryのさらに圧縮されたバージョンを取得する方法はありdocument.ready()ますか？

そうでない場合、同様の機能を提供できる他のライブラリはありますか？

また、モバイル版のjQueryがあることは知っていますが、このページはPCとモバイルデバイスの両方に対応しているため、モバイル版がPCでうまく機能するかどうかはわかりません。私はそれが互換性があるなら、おそらくこれが行く方法だと思いますか？

ありがとうございました！

4

5 に答える 5

5

Zepto.js を見てみるといいかもしれません。たったの 8.4k です...

http://zeptojs.com/

彼らのサイトから -- 「Zepto は、最新のブラウザ向けの最小限の JavaScript ライブラリであり、大部分が jQuery と互換性のある API を備えています。jQuery を使用している場合は、Zepto の使用方法を既に知っています。」

IE サポートに関する限り、IE で使用して jQuery に戻すことができるフォールバックがあります...

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
于 2012-05-29T01:10:49.227 に答える
3

スクリプト ライブラリがキャッシュされるように、スクリプトに CDN を使用します。CDN のスクリプトと、CDN が利用できない場合のフォールバック スクリプトを次に示します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

CDN を使用する利点の一部

  • 低帯域幅
  • スクリプトはキャッシュされます
  • 何千回もダウンロードされた小さなスクリプト ファイルでさえ、帯域幅メーターに顕著な影響を及ぼし始めます。
  • ウェブサーバーへの接続/ヒットが少なくなり、レイテンシが向上します
于 2012-05-29T01:10:41.153 に答える
1

</body>あなたが求めていたものとはまったく異なりますが、別の解決策は、本文の最後、終了タグの直前にスクリプトを含めることです。これにより、jQueryの縮小バージョンを含める必要がなくても同じ結果が得られます。

document.ready関数のポイントは、DOMの準備ができた後、つまりブラウザーがすべてのhtmlを解析し、JavaScriptから操作できるようになった後に呼び出されることです。JSコードを本文の最後に配置すると、同じ効果が得られます。これは、ブラウザーがドキュメントの解析中にJavaScriptを検出したときにJavaScriptを実行し、JSを実行すると、既に解析されたDOM要素にアクセスできるためです。

コメントでこのアイデアについて言及したときに、コードをどのように実行するかを尋ねたので、簡単な例を次に示します。

// CHANGE THE FOLLOWING:

$(document).ready(function() {
    var myField = document.getElementById("someId");
    alert(myField.value);
});

// TO BE

var myField = document.getElementById("someId");
alert(myField.value);

上記がインラインに含まれているか（ただし、スクリプトブロック内に含まれているか）、本文の最後にある限り、スクリプトタグに含まれている外部JSファイルに含まれているかは関係ありません。

唯一の問題は、コードが関数内に含まれていないため、グローバル変数が作成されることです。これは、将来、他の外部ライブラリを含める場合、変数を次のように定義しようとする可能性があるため、原則として避けたいものです。同じ名前。この問題を回避するには、すぐに呼び出される無名関数式でコードをラップします。

(function() {
    var x = "these variables are not global",
        myField = document.getElementById("someId");
    alert(myField.value);

    function test() {
        alert("this function isn't global either");
    }
    test();
})();

余分な括弧に注意してください-無名関数の周りのものはそれを関数宣言ではなく関数式にし（つまり名前は必要ありません）、最後にあるものは関数をすぐに呼び出します。

現在読んでいるStackOverflowページのページソースを表示するだけで、JSを本文の最後に配置する実際の例を見ることができます。

于 2012-05-29T02:28:36.070 に答える