jQuery で Ready メソッドをシミュレートし、CSS と JS のオンデマンド読み込みを実装するサンプル code_jquery
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
コードをコピー
コードは次のとおりです:
/**
*
* パラメータのタイプを決定します
* 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. メソッドの呼び出し
console.log('css がロードされました') ;
});
loadScript('http://www.jb51.net/apps/tbtx/miiee/js/jQuery.js', function(){
console.log(' js 読み込み完了');
});
ready(function(){
console.log('dom の準備ができました!');
});

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









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

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

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

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

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

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

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