ホームページ ウェブフロントエンド jsチュートリアル jQuery で Ready メソッドをシミュレートし、CSS と JS のオンデマンド読み込みを実装するサンプル code_jquery

jQuery で Ready メソッドをシミュレートし、CSS と JS のオンデマンド読み込みを実装するサンプル code_jquery

May 16, 2016 pm 05:21 PM
css jquery js

1.ready 関数の実装
jQuery クラス ライブラリやその他のクラス ライブラリで、ready メソッドをよく使用しますが、それらがどのように実装されているかを考えることがあります。 jQuery のソース コードには多くのモジュールが含まれており、コード (レベルが限られているため) を理解するのが困難です。いくつかの本の内容を組み合わせて要約しました。
まず、ready 関数の実装アイデアについて説明します。
変数 ready は式によって代入されます。この無名関数では、最初に処理関数をバインドします。各ブラウザのイベントに値を代入し(イベントの非同期ハンドラに応じて決定されます)、クロージャ内で主にisReadyの値を判断して操作を実行します。 dom 構造の準備ができている (isReady === true) 場合、コールバックが実行されます。それ以外の場合、イベント ハンドラーが実行されるときに、コールバックがキュー (funs) に追加され、関数が実行されます。キュー内の関数を順番に実行した後、キューをクリアする必要があります (funs = null)。
コードをコピー コードは次のとおりです。

varready = (function(){
var isReady = false,
funs = [];
関数ハンドル (e) {
if ( isReady ) {
return;
}
if ( e.type = == 'readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) {
length; i ) {
funs[i].call(document);
document.addEventListener( 'DOMContentLoaded', handle, false );
document.addEventListener( 'readystatechange', handle, false );
document.addEventListener( 'load', handle, false );
}
else if ( document.attachEvent ) {
document.attachEvent( 'onreadystatechange', handle );
document.attachEvent( 'onload', handle );
}
return function準備完了 (コールバック) {
if ( isReady ) {
callback.call(document);
}
else {
funs.push(callback);
}
} ;
}());


追記:
この関数コードは、権威あるガイドブックを参照しているだけです。唯一の違いは、追加の判定 document.readyState !== 'interactive' であることです。



コードをコピー


コードは次のとおりです。さまざまなインタラクションと完了ステータスブラウザ 出現順序は、ブラウザとページのコンテンツによって異なります。 document.readyState !== 'interactive' が追加された場合、どのステージが最初に出現してもよいことを意味します。より早く実行されます。


2. CSS をオンデマンドでロードします。js

は jQuery ソース コードを参照し、パラメーターの型を返す型関数を書き込みます。


コードをコピー
コードは次のとおりです:

/**
*
* パラメータのタイプを決定します
* createTime: 2013/9/18
*
*/
関数型 (obj) {
var classTypes, objectTypes;
if ( obj == null ) {
return String(obj) ;
}
classTypes = {};
objectTypes = ('ブール数値文字列関数配列日付 RegExp オブジェクト エラー').split(' ');
for ( var i = 0, len = objectTypes.length; i < len i ) {
classTypes[ '[object ' objectTypes[i] ']' ] = objectTypes[i].toLowerCase();
}
if ( obj === 'object' || typeof obj === 'function' ) {
var key = Object.prototype.toString.call(obj);
return classTypes[key];
}
return typeof obj;
}

复制代码代码如下:

// css按必要追加ダウンロード
function loadCss (cssUrl, callback) {
var elem, bl,
isExecuted = false; // ie9 中、コールバック実行两次
if ( cssUrl == null ) {
return String(cssUrl);
}
elem = document.createElement('link'),
elem.rel = 'stylesheet';
if ( type(callback) === 'function' ) {
bl = true;
}
// ie
関数ハンドル() {
if ( elem.readyState === 'loaded' || elem.readyState === 'complete' ) {
if (bl && !isExecuted) {
callback();
isExecuted = true;
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl && !isExecuted) {
elem.onload = callback;
isExecuted = true;
}
elem.href = cssUrl;
document.getElementsByTagName('head')[0].appendChild( elem);
}
// js按必要追加ダウンロード
function loadScript(scriptUrl, callback) {
var elem, bl,
isExecuted = false; // 在ie9中、コールバック実行两次
if (scriptUrl == null) {
return String(fn);
}
elem = document.createElement('script');
if ( type(callback) === 'function' ) {
bl = true;
}
// for ie
function handle(){
var status = elem. readyState;
if (status === 'loaded' || status === 'complete') {
if (bl && !isExecuted) {
callback();
isExecuted =本当です。
}
elem.onreadystatechange = null;
}
}
elem.onreadystatechange = handle;
// for 非ie
if (bl & & !isExecuted) {
elem.onload = callback;
isExecuted = true;
}
elem.src = scriptUrl;
document.getElementsByTagName('head')[0].appendChild(elem);
}

追記: link 要素と script 要素がロードされているかどうかを判断するときは、主にloadイベントに依存します。IE9未満のブラウザでは、IEは 要素。readyState 状態によって、要素がロードされているかどうかが決まります。また、不思議なことに、ie9 (およびおそらく他のブラウザ バージョン) では、要素にloadイベントとreadystatechangeイベントの両方があるため、変数 isExecuted If がコードに追加されます。コールバックが実行されると、コールバックの 2 回の実行を避けるために実行されなくなります。

3. メソッドの呼び出し
コードをコピー コードは次のとおりです。 :
loadCss('http://www.jb51.net/apps/tbtx/miiee/css/base.css', function(){
console.log('css がロードされました') ;
});
loadScript('http://www.jb51.net/apps/tbtx/miiee/js/jQuery.js', function(){
console.log(' js 読み込み完了');
});
ready(function(){
console.log('dom の準備ができました!');
});

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

See all articles