我的模块加载系统第5版
本版本更换更好的状态查询机制与列队机制，去除定时器检测，性能更优，体积更小，功能更强。下面是广告时间：
- 无阻塞加载，使用的是script标签注入方式（还有HTML5的async属性，虽然不知其到底发挥多少威力），并在脚本加载成功后自动移除这些临时生成的标签。
- 按需加载，每一个模块都放进一个与它同名的JS文件中，没有必要为使用某个API而载入整个框架。
- 每个模块自行处理依赖关系，用户不用操心调用了这个模块还要调用哪几个相关模块，核心模块也不用为这些配置而膨胀（如YUI2，dojo）。
- 并行加载，简单解释为加载是无序的，解释执行时（模块本身是个curry函数）由依赖关系强制排队。效果图：
//http://www.cnblogs.com/rubylouvre/archive/2011/04/10/2011175.html by 司徒正美 dom.require("ecma,lang,support,deferred,oop,brower",function(){ dom.log("执行回调函数") });
- 负向回调，dom.require拥有三个参数，模块列表，正向回调，负向回调。正向回调在所有指定的模块都加载成功后执行，负向回调用于万一有某个加载失败时调用。IE6-8通过一个映射查询解决script.onerror问题，opera则利用iframe与两个script成功模拟script.onerror，其他浏览器则直接用script.onerror。
- 错误堆栈机制，有时我们不但要看负向回调有没有执行，还要查一下因为那个模块没有成功加载而导致失败，这时它就大派用场了。
- 连domReady的联袂使用。我们先看一下YUI丑鄙的使用方式吧：
YUI().use("module1",function(){ //action 1 }) ; YUI().use("module2",function(){ //action 2 }) ; YUI().use("module3,module4",function(){ //action 3 })它让我们的业务代码布满了这种结构，通常我们更希望像jQuery那样一个函数体写完$(function(){})，看dom Framework是怎么解决的！
//在加载所有模块后并待到domReady才执行回调函数 dom.ready(function(){ //......... },true); //这种方式必须加模node模块才行 dom(function(){ },true); //我们还可以指定要加载的模块 dom.$$modules = ["ecma","lang","support","deferred","oop","brower"] dom.ready(function(){},true);
由于比较懒，直接把我的核心模块放出来吧,包含了别名机制,错误堆栈,并行加载器,domReady与一些常用函数!
//http://www.cnblogs.com/rubylouvre/archive/2011/04/10/2011175.html by 司徒正美
"use strict";
(function(global,DOC){
var _dom = global.dom;
var namespace = escape(DOC.URL.split("#")[0]);
var HEAD = DOC.head || DOC.getElementsByTagName("head")[0];
var to_s = {}.toString;
/**
* @class dom
* dom Framework拥有两个命名空间,
* 第一个是escape(DOC.URL.split("#")[0])，根据页面的地址动态生成
* 第二个是dom，我们可以使用别名机制重写它
* @namespace dom
*/
global.dom = global[namespace] = {
/**
* 糅杂，为一个对象添加更多成员
* @param {Object} target 目标对象
* @param {Object} source 属性包
* @param {Boolean|undefined} override
* @return {Object} 目标对象
*/
mix : function(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;
},
/**
* 系统变量，默认的命名空间
* @property
* @type string
*/
$$name:"dom",
/**
* @property
* @type Element
*/
HTML:DOC.documentElement,
/**
* @property
* @type Element
*/
HEAD:HEAD,
/**
* 别名机制
* @param {String} name 新的命名空间
*/
alias: function(name) {
_dom && (global.dom = _dom);
dom.$$name = name || dom.$$name;
global[dom.$$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 = typeof obj;
result = result.charAt(0).toUpperCase() + result.slice(1);
if(result === 'Object' || (result === 'Function' && obj.exec) ){//safari chrome中 type /i/ 为function
if(obj===null) result = 'Null';
else if(obj.globaldow==obj) result = 'globaldow'; //返回globaldow的构造器名字
else if(obj.callee) result = 'Arguments';
else if(obj.nodeType === 9) result = 'Document';
else if(obj.nodeName) result = (obj.nodeName+'').replace('#',''); //处理元素节点
else if(!obj.constructor){
if("send" in obj && "setRequestHeader" in obj){//处理IE5-8的宿主对象与节点集合
result = "XMLHttpRequest"
}else if("length" in obj && "item" in obj){
result = 'NodeList';
}else{
result = 'Unknown';
}
}else result = to_s.call(obj).slice(8,-1);
}
if(result === "Number" && isNaN(obj)) result = "NaN";
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){
var result = {},value = val !== void 0 ? val :1;
for(var i=0,n=array.length;i < n;i++){
result[array[i]] = value;
}
return result;
}
}
// =============================并行加载器================================
var reg_module = /([^(\s]+)\(?([^)]*)\)?/;
var reg_readystate = /loaded|complete|undefined/i;
var method = DOC.dispatchEvent ? "onload" : "onreadystatechange";
var stack = [];//用于放置负回调
var callbacks = [];//用于放置正向回调或模块本身的wrapper函数
var modules = {};//用于记录每个模块加载状态0 未注册 1 已注册 2 已加载 3已执行
/**
* 用于模拟opera的script onerror
* @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);
};
d.write(code);
d.close();
}
//执行并移除所有依赖都具备的模块或回调
function resolveCallbacks(){
for(var i = 0, callback; i < callbacks.length; i++){
callback = callbacks[i];
if(callback() == true){
callbacks.splice(i--,1);
}
}
}
/**
* 为加载模块而临时生成一个script节点
* @param {String} name 模块名
* @param {String} url 模块的路径
*/
function appendScript(name, url){
var node = DOC.createElement("script"), callback;
url = url || dom.$$basePath +"/"+ name + ".js";
node.charset = "utf-8";
node.async = true;
node.onerror = function(){
removeScript(name, this, true);
}
node[method] = function(){
if (reg_readystate.test(this.readyState) ){
resolveCallbacks();
removeScript(name, this );
}
}
node.src = url;
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 || modules[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);
}
}
dom.mix(dom, {
/**
* 需要加载的模块
* @property
* @type Array
*/
$$modules: ["ecma","lang","oop","support","query","node"],
/**
* 用于打印与存放错误消息
* @param {Boolean|String|Function} fn
*/
$$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){
try{
a.b.c();
}catch(e){
url = e.fileName || e.sourceURL;//针对firefox与safari
}
if(!url){
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} dependList 依赖列表，如果是字符串请用逗号隔开，如果要指定具体路径请写到小括号中
* @param {Function} module 正向回调
* @param {Function} errback 负向回调
* @param {Boolean} ready 是否延迟到DOM树建完才执行回调函数
*/
require:function(dependList,callback,errback, ready){
var names = [], i = 0, match, name, url;
if(typeof dependList === "string"){
dependList = dependList.split(",");
}
while((url = dependList[i++])){
match = url.match(reg_module);
name = match[1];
if(!modules[name]){ //防止重复生成节点与请求
modules[name] = 1;
appendScript(name,match[2]);//加载JS文件
this.$$stack(errback);//压入错误堆栈
}
names.push(name);
}
ready && names.push("ready");
this.provide(names,callback);
},
/**
* 声明模块
* @param {String} name 模块名
* @param {Array} dependList 依赖列表
* @param {Function} module 模块本身
*/
declare:function(name,dependList,callback){
modules[name] = 2;
// dom.log("加载"+name+"模块成功");
this.require(dependList,function(){
callback();
// dom.log("执行"+name+"模块成功");
modules[name] = 3;
});
},
/**
* 提供模块
* @param {Array} array 模块列表
* @param {Function} callback 回调函数
*/
provide:function(names,callback){
var fn = function(){
var i = 0, name
while((name = names[i++])){
if(modules[name] !== 3){
return false;
}
}
callback();
return true;
}
// fn.toString = dom.K(callback+"");//用于调试
callbacks.unshift(fn);
}
});
// =============================domReady================================
/**
* domReady机制
* @param {Function} fn 回调函数
* @param {Boolean} more 是否加载指定的模块
*/
var Ready = dom.ready = function(fn, more){
if(more === true){
dom.require(dom.$$modules, fn, 0, true);
fn = function(){
dom.log("dom.ready!")
modules.ready = 3;
resolveCallbacks();
}
}
if ( Ready.list) {
Ready.list.push( fn );
}else{
fn();
}
};
Ready.list = [];
function fireReady(){
if(!dom.isReady){
dom.isReady = 1;
for(var i=0, fn;fn = Ready.list[i++];)
fn();
delete Ready.list;
}
}
function doScrollCheck() {
if ( !dom.isReady ) {
try {
dom.HTML.doScroll("left");
fireReady();
} catch(e) {
setTimeout( doScrollCheck, 0);
}
}
}
//开始判定页面的加载情况
if ( DOC.readyState === "complete" ) {
fireReady();
}else if(DOC.addEventListener ){
dom.bind = function (el, type, fn) {
el.addEventListener(type, fn, false);
};
dom.bind(DOC,"DOMContentLoaded",function fn(){
DOC.removeEventListener( "DOMContentLoaded", fn , false );
fireReady();
})
}else if(DOC.attachEvent){
dom.bind = function (el, type, fn) {
el.attachEvent('on' + type, dom.K(fn.call(el,event)));
};
dom.bind(DOC,"readystatechange", function fn(){
if (DOC.readyState == "complete") {
DOC.detachEvent("onreadystatechange", fn );
fireReady();
}
});
try {
var toplevel = global.frameElement == null;
} catch(e) {};
if ( dom.HTML.doScroll && toplevel ) {
doScrollCheck();
}
}
})(this,this.document);
我们可以以下面的格式定义其他模块:
//test.js
(function(global,DOC){
var dom = global[escape(DOC.URL.split("#")[0])];
dom.declare("test", ["string"],function(){
dom.log("test_module");
});
})(this,this.document);
//string.js
;
(function(global,DOC){
var dom = global[escape(DOC.URL.split("#")[0])];
dom.declare("string", [],function(){
dom.log("string_module");
});
})(this,this.document);
Tag 我的模块加载系统第5版
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架