我的模块加载系统 v6
模块系统是我框架的核心模块的一部分，与domReady彻底地整合在一起。当然核心模块还提供了其他常用方法，如数组化，类型判定，简单的事件绑定...本版本主要是对类型判定进行优化与重写模块加载，以更优雅的方式处置循环依赖的问题。
(function(global,DOC){
var
_dom = global.dom,
hash = "#",
namespace = escape(DOC.URL.split(hash)[0]),
HEAD = DOC.head || DOC.getElementsByTagName("head")[0],
class2type = {
"[object HTMLDocument]" : "Document",
"[object HTMLCollection]" : "NodeList",
"[object StaticNodeList]" : "NodeList",
"[object IXMLDOMNodeList]": "NodeList",
"[object DOMWindow]" : "Window" ,
"null" : "Null" ,
"NaN" : "NaN" ,
"undefined" : "Undefined"
},
toString = class2type.toString;
/**
* 糅杂，为一个对象添加更多成员
* @param {Object} target 目标对象
* @param {Object} source 属性包
* @param {Boolean|undefined} override
* @return {Object} 目标对象
*/
function mix(target, source, override) {
var key, ride = (override === void 0) || override;
for (key in source) {
if (ride || !(key in target)) {
target[key] = source[key];
}
}
return target;
}
/**
* @class dom
* dom Framework拥有两个命名空间,
* 第一个是escape(DOC.URL.split("#")[0])，根据页面的地址动态生成
* 第二个是dom，我们可以使用别名机制重写它
* @namespace dom
*/
var dom = function(expr,context){
if(typeof expr === "function"){
dom.ready(expr, true);
}else{
if(!dom.fn)
throw "must load the 'node' module!"
return new dom.fn.init(expr,context);
}
}
mix(dom,{
uuid:1,
HTML:DOC.documentElement,
HEAD:HEAD,
rword:/[^, ]+/g,
rreadystate: /loaded|complete|undefined/i,
"@name":"dom",
"@debug":true,
"@emitter": DOC.dispatchEvent ? "addEventListener" : "attachEvent",
/**
* 别名机制(相当于jquery的noConflict)
* @param {String} name 新的命名空间
*/
exports: function(name) {
_dom && (global.dom = _dom);
name = name || dom["@name"];
dom["@name"] = name ;
global[name] = global[namespace] = this;
},
/**
* 数组化
* @param {ArrayLike} nodes 要处理的类数组对象
* @param {Number} start 可选。要抽取的片断的起始下标。如果是负数，从后面取起
* @param {Number} end 可选。规定从何处结束选取
* @return {Array}
*/
slice: function (nodes, start, end) {
for(var i = 0,n = nodes.length, result = []; i < n; i++){
result[i] = nodes[i];
}
if (arguments.length > 1) {
return result.slice(start , (end || result.length));
} else {
return result;
}
},
/**
* curry化
* @param {Any} a
* @return {Function} 新函数
*/
K:function (a) {
return function() {
return a;
};
},
/**
* 用于取得数据的类型或判定数据的类型
* @param {Any} obj 要检测的东西
* @param {String} str 要比较的类型
* @return {String|Boolean}
*/
type : function(obj, str){
var result = class2type[ (obj == null || obj !== obj )? String(obj) : toString.call(obj) ] || obj.nodeName || hash;
if( result.charAt(0) === hash){//兼容旧式浏览器与处理个别情况,如window.opera
if(obj.window==obj){
result = 'Window'; //返回构造器名字
}else if(obj.nodeType === 9) {
result = 'Document';//返回构造器名字
}else if( obj.callee ){
result = 'Arguments';//返回构造器名字
}else if(isFinite(obj.length) && obj.item ){
result = 'NodeList';//处理节点集合
}else if(obj.open && obj.send ){
result = "XMLHttpRequest";
}else{
result = toString.call(obj).slice(8,-1);
}
}
if(str){
return str === result;
}
return result;
},
/**
* 用于调试
* @param {String} s
*/
log:function(s){
global.console && global.console.log(s);
},
/**
* 生成键值统一的对象，用于高速化判定
* @param {Array} array
* @param {Number} val 可选，默认为1
* @return {Object}
*/
oneObject : function(array, val){
if(typeof array == "string"){
array = array.match(dom.rword) || []
}
var result = {},value = val !== void 0 ? val :1;
for(var i=0,n=array.length;i < n;i++){
result[array[i]] = value;
}
return result;
}
});
"Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList,XMLHttpRequest".replace(dom.rword,function(name){
class2type[ "[object " + name + "]" ] = name;
});
// http://wp.moooori.com/archives/1911
var
rmodule = /([^(\s]+)\(?([^)]*)\)?/,
// rreadystate = /loaded|complete|undefined/i,
method = DOC.dispatchEvent ? "onload" : "onreadystatechange",
stack = [],//用于放置负回调
checks = [],//用于放置正向回调或模块本身的wrapper函数
status = {};//用于记录每个模块加载状态0 未注册 1 已注册 2 已加载 3已执行
/**
* 用于模拟opera的script onerror
* http://d.hatena.ne.jp/NeoCat/20110206/1296934235
* @param {String} name 模块名
* @param {String} url 模块的路径
* @param {Element} node 为加载这个模块临时生成的script节点
*/
function fixOperaError(name, url, node){
var iframe = DOC.createElement("iframe");
var code = '<script src="'+dom.baseURL+'"><\/script>'+
'<script src="'+url+'" onload="this.ownerDocument.x = 1"><\/script>';
iframe.style.display = "none";
HEAD.appendChild(iframe);
var d = iframe.contentDocument;
iframe.onload = function(){
if(d.x == void 0){
removeScript(name, node, true);
}
iframe.onload = null;//opera无法在iframe被事件绑定时被移除
HEAD.removeChild(this);
};
try{
d.write(code);
d.close();
}catch(e){};
}
//执行并移除所有依赖都具备的模块或回调
function resolveCallbacks(){
for(var i = 0, obj; i < checks.length; i++){
obj = checks[i];
for(var name in status){
if(status[name] == 3 && obj.deps["@"+name]){
delete obj.deps["@"+name];
obj.length--;
dom["@debug"] && dom.log(obj.length+" "+name);
}
}
if(!obj.length){
obj.callback()
checks.splice(i--,1);
}
}
}
/**
* 为加载模块而临时生成一个script节点
* @param {String} name 模块名
* @param {String} url 模块的路径
*/
function appendScript(name, url){
var node = DOC.createElement("script");
url = url || dom.basePath +"/"+ name + ".js" + (dom.DEBUG ? "?t="+new Date : "");
node.charset = "utf-8";
node.async = true;
node.onerror = function(){
removeScript(name, this, true);
}
node[method] = function(){
if (dom.rreadystate.test(this.readyState) ){
for(var i =0 ; i < checks.length ;i++){
resolveCallbacks()
}
removeScript(name, this );
}
}
node.src = url+"?timestamp="+(+new Date);
global.opera && fixOperaError(name, url, node);
HEAD.insertBefore(node,HEAD.firstChild);
}
/**
* 移除临时生成的script节点
* @param {String} name 模块名
* @param {Element} node 为加载这个模块临时生成的script节点
* @param {Boolean} error 是否加载失败
*/
function removeScript(name, node, error){
var parent = node.parentNode;
if(parent && parent.nodeType === 1){
if(error || status[name] === 1){
dom.stack('dom.log("fail to load module [ '+name+' ]")');
dom.stack(true);//打印错误堆栈
}
if (node.clearAttributes) {
node.clearAttributes();
} else {
node[method] = node.onerror = null;
}
parent.removeChild(node);
}
}
mix(dom, {
mix:mix,
//绑定事件(简化版)
bind : DOC.dispatchEvent ? function(el, type, fn, phase){
el.addEventListener(type,fn, phase);
} : function(el, type, fn){
el.attachEvent("on"+type, function(){
fn.call(el,event);
});
},
stack:function(fn){
if(fn === true){
while(fn = stack.pop()){
fn();
}
}else if(typeof fn === "string"){
stack.push(new Function(fn));
}else if(typeof fn === "function"){
stack.push(fn);
}
},
/**
* <a href="http://www.cnblogs.com/rubylouvre/archive/2011/02/10/1950940.html">核心模块所在路径</a>
* @property
* @type String
*/
basePath:(function(url, scripts, node){
scripts = DOC.getElementsByTagName("script");
node = scripts[scripts.length - 1]
url = node.hasAttribute ? node.src : node.getAttribute('src', 4);
dom.baseURL = url;
return url.substr( 0, url.lastIndexOf('/'));
})(),
/**
* 请求模块
* @param {String|Array} deps 依赖列表，如果是字符串请用逗号隔开，如果要指定具体路径请写到小括号中
* @param {Function} module 正向回调
* @param {Function} errback 负向回调
* @param {Boolean} ready 是否延迟到DOM树建完才执行回调函数
*/
require:function(deps,callback,errback){
var names = [];
(deps +"").replace(dom.rword,function(url,name,match){
match = url.match(rmodule);
name = match[1];
if(!status[name]){ //防止重复生成节点与请求
status[name] = 1;
if(name !== "ready"){
appendScript(name,match[2]);//加载JS文件
dom.stack(errback);//压入错误堆栈
}
}
if(!names["@"+name]){//防止"node,oop,node"的情况
names.push(name);
names["@"+name] = 1;
}
});
this.provide(names,callback);
},
/**
* 定义模块
* @param {String} name 模块名
* @param {String} dependList 依赖列表
* @param {Function} module 模块本身
*/
define:function(name,deps,callback){
if(typeof deps == "function"){//处理只有两个参数的情况
callback = deps;
deps = "";
}
status[name] = 2;
function wrap(){
status[name] = 3;
//这里必须把已添加了新能力的dom命名空间对象传入去,放便其他模块第一时间能使用这些新能力
callback();
}
wrap._name = name;
//如果是空字符串则置换为空数组
this.require(deps,wrap);
},
/**
* 装配模块
* @param {Array} array 模块列表
* @param {Function} callback 回调函数
*/
provide:function(names,callback){
checks.unshift({
name:callback._name || "",
callback:callback,
deps:names,
length:names.length
});
}
});
/**
* domReady机制
* @param {Function} fn 回调函数
* @param {Boolean} more 是否加载指定的模块
*/
var Ready = dom.ready = function(fn){
if ( Ready.list) {
Ready.list.push( fn );
}else{
fn();
}
};
Ready.list = [];
function fireReady(){
if(Ready.list){
for(var i=0, fn;fn = Ready.list[i++];)
fn();
status.ready = 3;
delete Ready.list;
}
};
function doScrollCheck() {
try {
dom.HTML.doScroll("left");
fireReady();
} catch(e) {
setTimeout( doScrollCheck, 0);
}
};
//开始判定页面的加载情况
if ( DOC.readyState === "complete" ) {
fireReady();
}else {
dom.bind(DOC, (DOC.dispatchEvent ? "DOMContentLoaded" : "readystatechange"), function(){
if (DOC.dispatchEvent || DOC.readyState === "complete") {
fireReady();
}
});
try {
//http://bugs.jquery.com/ticket/4787 http://cmc3.cn/
//在IE6下,内嵌页面如果重设了document.domain，访问window.frameElement抛错，
//但是经过多次try catch后，才能访问该值
var toplevel = global.frameElement == null;
} catch(e) {};
if ( dom.HTML.doScroll && toplevel ) {
doScrollCheck();
}
}
dom.exports();
})(this,this.document);
//2011.7.11
//@开头的为私有的系统变量，防止人们直接调用
//dom.check改为dom["@emitter"]
//dom.namespace改为dom["@name"]
//去掉无用的dom.modules
//优化exports方法
每个模块的定义如下(请确保模块名与文件名要一致)：
(function(global,DOC){
var dom = global[escape(DOC.URL.split("#")[0])];
dom.define("class", "lang",function(){
dom.log("class模块")
});
})(this,this.document);
使用：
//这里的回调函数会class模块加载后，并且待到domReady之后执行。
//http://www.cnblogs.com/rubylouvre/archive/2011/07/12/2104777.html by 司徒正美
dom.require("class,ready",function(){
alert(1000)
});
相关链接我的模块加载系统 v5