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

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' であることです。

コードをコピー


コードは次のとおりです。

if ( e.type === ' readystatechange' && (document.readyState !== 'interactive' && document.readyState !== 'complete') ) { return;}

さまざまなインタラクションと完了ステータスブラウザ 出現順序は、ブラウザとページのコンテンツによって異なります。 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 の準備ができました!');
});