ホームページ ウェブフロントエンド 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 までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

Vue におけるプレースホルダーの意味 Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue におけるプレースホルダーの意味

vueでスペースを書く方法 vueでスペースを書く方法 Apr 30, 2024 am 05:42 AM

vueでスペースを書く方法

vueでdomを取得する方法 vueでdomを取得する方法 Apr 30, 2024 am 05:36 AM

vueでdomを取得する方法

jsでのスパンの意味は何ですか jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

jsでのスパンの意味は何ですか

jsでレムは何を意味しますか jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

jsでレムは何を意味しますか

vueに画像を導入する方法 vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

vueに画像を導入する方法

スパンタグの機能とは何ですか スパンタグの機能とは何ですか Apr 30, 2024 pm 01:54 PM

スパンタグの機能とは何ですか

ブラウザのプラグインは何語で書かれていますか? ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザのプラグインは何語で書かれていますか?

See all articles