javascriptモジュールのロードについての思索2
6496 ワード
何日か考えてみたら、「書類とモジュール」という問題を思い出しました.私たちのモジュールは確かにJSファイルに書いています.これらのモジュールはコアモジュールと周辺モジュールに分けられます.コアモジュールはもちろんメインファイルに書かれています.最も重要な論理、キャリア、列、名前空間ビルダーなどが含まれています.しかし、一つのファイルが一つのモジュールだけに存在すると、これはあまりにも無駄であり、請求法が多すぎるため、複数のモジュールが一つのファイルに「共生」する場合があります.メインファイルにあるコア以外のモジュールを内囲モジュールと呼びます.他の内囲と外郭はあまり区別がないです.ただ所在書類が違っています.便利さのために内部モジュールは外周モジュールに依存しないでください.
しかし、私たちはScriptタグでJSファイルを引用すると、中のスクリプトをがやがやと実行します.最も主要なロジックは気にせずに解析できます.しかし、内囲モジュールに対しては、論理は関数体に置いてあり、制御流はそれらの上をかすめていくだけで、中のものには触れられない.このモジュール名とコールバック関数との関連付けられた構成は、処理関数(以下、useという)に入り、処理列に追加されます.依存性がある場合は、モジュールに依存するファイルがロードされているかどうかを検出し、ファイルがロードされていない場合は、このモジュールはフレームの名前空間に組み込まれていることを検出し、最後にコールバック関数を実行します.
上の分析から分かるように、この中の操作は大体においていくつかの種類に分けられます.ファイルのロード、モジュールの組み立てと実行のコールバックは順番にしか実行できません.多くの種類のライブラリのフレームワークを総合して、提供される解決策はこの2つです.動的script挿入とAjaxフィードバック解析です.ダイナミックscript挿入とは、scriptノードを生成し、ターゲットsrcを設定し、headノードに挿入することである.document.writeを使わない理由は、bodyに挿入されたものであり、多くの欠陥があります.具体的にはこの文章を参照してください. Ajaxフィードバック解析は、XMLHttpオブジェクトを利用して、戻ってきたレスポンスTextを再度グローバル解析することである.グローバル解析を行うには、Windows.eval(標準ブラウザ)またはwindow.execScript(IE)、またはもう一つのscriptタグを使って解析を行う必要があります.この方法は多くの互換性のある問題に対処する必要があることが分かります.また、ドメインをまたぐ問題にも…. 私の立場は明らかになりました.第一種類を使います.しかし、scriptタグはコールバックの処理について多くの問題があります.
ドジョウであれ、JSANであれ、またはYUIであれ、ましてやusings.js、require.js、packages.jsなどの小众のライブラリであれ、モジュール名(パッケージ名)をurlに変换する仕组みがある.例えば:
しかし、私たちはScriptタグでJSファイルを引用すると、中のスクリプトをがやがやと実行します.最も主要なロジックは気にせずに解析できます.しかし、内囲モジュールに対しては、論理は関数体に置いてあり、制御流はそれらの上をかすめていくだけで、中のものには触れられない.このモジュール名とコールバック関数との関連付けられた構成は、処理関数(以下、useという)に入り、処理列に追加されます.依存性がある場合は、モジュールに依存するファイルがロードされているかどうかを検出し、ファイルがロードされていない場合は、このモジュールはフレームの名前空間に組み込まれていることを検出し、最後にコールバック関数を実行します.
上の分析から分かるように、この中の操作は大体においていくつかの種類に分けられます.ファイルのロード、モジュールの組み立てと実行のコールバックは順番にしか実行できません.多くの種類のライブラリのフレームワークを総合して、提供される解決策はこの2つです.動的script挿入とAjaxフィードバック解析です.
var script = dom.genScriptNode();
script.src = url
dom.head().appendChild(script);
script.onload = script.onreadystatechange = function(){
if ((!this.readyState) || this.readyState == "loaded" || this.readyState == "complete" ){
if(!dom.done[name]){
alert(" 1")
dom.head().removeChild(script)
}
callback();
}
}
script.onerror = function(){
script.onload = script.onerror = undefined;
alert(" 2")
dom.head().removeChild(script)
}
ドジョウであれ、JSANであれ、またはYUIであれ、ましてやusings.js、require.js、packages.jsなどの小众のライブラリであれ、モジュール名(パッケージ名)をurlに変换する仕组みがある.例えば:
"query"====>"http://localhost:3000/javascripts/dom/query.js"
var module = "dom."+item,url;
// dom.node(http://www.cnblogs.com/rubylouvre/dom/node.js)
var _u = module.match(/\(([^)]+)\)/);
url = _u && _u[1] ? _u[1] : dom.getBasePath()+"/"+ module.replace(/\./g, "/") + ".js";
var script = dom.genScriptNode();
script.src = url
dom.head().appendChild(script);
var scope = dom.namespace(module,true)
//..........
// /dom/query.js
dom.use("query",function(){
arguments.callee._attached = true;
dom.query = function(selector,context){
context = context || document
try{
var els = context.querySelectorAll(selector);
return dom.filter(els,function(el){
return el.nodeType === 1
})
}catch(e){
alert(" querySelectorAll")
}
}
},{
use:["collection"]
});
// /dom/collection.js
dom.use("collection",function(){
arguments.callee._attached = true;
dom.filter = function(array, fn, scope){
var result = [],ri = 0;
for (var i = 0,n = array.length; i < n; i++){
if(fn.call(scope || array[i],array[i],i,array)){
result[ ri++] = array[i];
}
}
return result;
}
dom.each = function(){/**/}
dom.map = function(){/**/}
dom.keys = function(){/**/}
//.....
})
dom.ready(function(){
dom.use("query", function(){
var els =dom.query("p")
alert(els)
});
});
dom.use("collection",function(){
arguments.callee._attached = true;
dom.filter = function(){/**/}
dom.each = function(){/**/}
dom.map = function(){/**/}
dom.keys = function(){/**/}
//.....
})
if(!fn._attached){//
fn();
}
dom.loaded.collection = true;
dom.use("collection",function(){
arguments.callee._attached = true;
dom.filter = function(){/**/}
dom.each = function(){/**/}
dom.map = function(){/**/}
dom.keys = function(){/**/}
//.....
})