框架设计中的主体函数

　　JS 这个后产物种真的是让人纠结。现在的狠多人用JQUERY。但jquery对模块管理，依赖管理。已经需求加载。这些都无视了。GG的closure YAHOO！的 YUI没有哪个象他那样大胆的捆绑那么多的方法到一个整个文件而且又对函数不进行区块分离。以至于jquery天生就不能用到大项目。插件的缺失。（有人说jquery的插件多如牛毛，可是垃圾插件比牛毛还多。。你的系统不臃肿么？？？）很多人喜欢它是因为它的接口很好。一口多用。即可以设置，又可以读取，设置可以多手段。取出的又很实际。这样的接口现在很多的公司也开始模仿。我在想做的就是在JQUERY的接口思路上。用closure DOJO YUI这样的大型架构思路来做个自己的库。选择器这样的东西基本随便找个库都有吧。可是接口人们总是觉得不爽。我开始发现自己工作之后的时间不仅仅是可以用来打个DOTA-酱油。我们需要不断努力。一起做出非常棒的插件。看看jquery的成就。相信。我在我师傅的指导下。一定成功。

　　下面是主体控制函数和一些公用方法。包括 抛异常，打日志。扩展，遍历。设置方法模型路径。获取模型（之前必须设置才可以获取不然抛异常）判断（数据）。

修正

(function(window,undefined){  
var_toString = {}.toString,  
_is,  
_writeScript,  
_listUrl,  
_scriptMap = {  
method_url : {},//method --> url <method : url ><1 : 1 >  
url_method : {},//url --> method <url : [method,method] ><1 : n >  
visited : {},  
writted : {},  
wait_write:[]  
},  
_readyFnx = [],  
alfred = function(){//自己单独使用也可以。象jquery  
alfred.ready.apply(window,arguments);  
};  
//私有函数开始  
_is = function(it,type){//复杂的可以自己进行设置。正则匹配。  
returntype.test(_toString.call(it).toLowerCase());  
};  
_waitReady = function(){  
//等结束。如果结束了。直接跳出循环。其实就是利用JS的这个特性。  
if(document.readyState != "loaded" &&document.readyState != "complete")  
{  
vartime = setTimeout(arguments.callee,0);  
return;  
}  
clearTimeout(time);  
}  
_checkReady = function(){  
//处理参数  
for(vari=0;i<arguments.length;i++)  
{  
_readyFnx.push(arguments[i]);  
}  
varcallback = _readyFnx.shift();  
//支持高级事件的  
if(document.addEventListener)  
{  
document.addEventListener("DOMContentLoaded",function(){  
_waitReady();  
document.removeEventListener("DOMContentLoaded",arguments.callee,false);  
callback.apply(window,_readyFnx);  
});  
returnthis;  
}  
//支持事件则用事件处理 IE  
if(document.attachEvent)  
{  
document.attachEvent( "onreadystatechange", function(){  
_waitReady();  
document.detachEvent( "onreadystatechange",arguments.callee);  
callback.apply(window,_readyFnx);  
});  
returnthis;  
}  
//不支持的则看不在 iframe 下时候的特殊属性。看 JSCRIPT MSDN。  
if(document.documentElement.doScroll &&window == window.top)  
{  
try 
{  
document.documentElement.doScroll("left","top");  
}  
catch(e)  
{  
setTimeout(arguments.callee, 0);  
return;}  
callback.apply(window,_readyFnx);  
returnthis;  
}  
};  
_listUrl = function(){  
varl = _scriptMap.visited,i;  
//对我们的URL 进行筛选 。主要防止多次添加访问过的依赖库。  
for(i inl){  
if(!_scriptMap.writted[i])  
{  
_scriptMap.wait_write.push(i);  
}  
}  
_scriptMap.wait_write.reverse();  
_writeScript();  
};  
_writeScript = function(){  
//写入我们的JS 了。  
varhead = document.getElementsByTagName("head").item(0),len = _scriptMap.wait_write.length;  
for(vari;_scriptMap.wait_write.length&&(i=_scriptMap.wait_write.shift());) {  
varscript = document.createElement("script"),  
url = i || "";  
script.setAttribute("async",true);//高级浏览器支持HTML5特性  
script.setAttribute("type","text/javascript");  
script.setAttribute("src",url);  
head.appendChild(script);  
_scriptMap.writted[url] = true;//这里无所谓，只要有这个URL就可以  
};  
};  
alfred.extend = function(){  
vardeep = false,  
len,  
options, name, src, copy, copyIsArray, clone,  
target = arguments[0] || {},  
i = 1;  
len = arguments.length;  
if(!len)  
{  
returnthis;  
}  
if(alfred.isBoolean(target))  
{  
deep = arguments[0];  
to = arguments[1];  
i = 2;  
}  
if(!(alfred.isObject(target) || alfred.isFunction(target))) {  
target = {};  
}  
if(len = i)  
{  
target = this;  
--i;  
}  
for(;i<len;i++) {  
if((options=arguments[i])!==null)  
{  
for(name inoptions) {  
copy = options[name];  
src = target[name];  
if(src){throw"Becareful : you are rewrite the "+_handle+"."+name+"!"}  
if(copy===target) {continue}  
if(deep &© &&(alfred.isObject(copy) || (copyIsArray = alfred.isArray(copy))))  
{  
if(copyIsArray)  
{  
copyIsArray = false;  
clone = src &&alfred.isArray(src) ? src : [];  
}  
else 
{  
clone = src &&alfred.isObject(src) ? src : [];  
}  
target[ name ] = alfred.extend( deep, clone, copy );  
}  
elseif( copy !== undefined )  
{  
target[name] = copy;  
}  
}  
}  
}  
};  
alfred.isNumber = function(it){return_is(it,/^[object number]$/)};  
alfred.isString = function(it){return_is(it,/^[object string]$/)};  
alfred.isFunction = function(it){return_is(it,/^[object function]$/)};  
alfred.isObject = function(it){return_is(it,/^[object object]$/)};  
alfred.isArray = function(it){return_is(it,/^[object array]$/)};  
alfred.isBoolean = function(it){returntypeofit ==='boolean'};  
alfred.isDom = function(it){return_is(it,/^[object htmlw+]$/)};  
alfred.extend({  
author : "alfred",  
version : 1.01,  
global : window,  
doc : window.document,  
reset : function(it){alfred.global[it]=alfred;},  
log : function()  
{  
if(window.console &&console.log)  
{  
returnconsole.log.apply(window,arguments)  
}  
},  
error : function(name,value)  
{  
throw{"name":name,"message":value};  
},  
require : function(method)  
{  
varm2u = _scriptMap.method_url,  
u2m = _scriptMap.url_method,  
r;  
if(!(m2u[method])){throw"Error : you need setMethod first"}  
if(!_scriptMap.visited[m2u[method][0]] &&!_scriptMap.writted[m2u[method][0]]) {  
//haven't be visited or write  
_scriptMap.visited[m2u[method][0]] = true;  
//use an beautiful code in here  
for(; m2u[method][1].length &&(r=m2u[method][1].shift());)  
{  
alfred.require(r);  
}  
_listUrl();  
}  
},  
setMethod : function(url,method,rely)  
{  
vari, method = alfred.isArray(method)? method:[method],  
rely = alfred.isArray(rely)?rely:[rely];  
if(url &&!_scriptMap.url_method[url]){  
_scriptMap.url_method[url] = method;  
 
for(;method.length&&(i=method.shift());) {  
_scriptMap.method_url[i] = {"0" : url, "1" : rely};  
}  
returnthis;  
}  
throw"Error : you are setMethod in an old method";  
},  
ready : function(){  
_checkReady.apply(window,arguments);  
},  
each : function(arg,callback){  
for(vari inarg){  
if(arg[i])  
{  
callback.call(arg[i],i);  
}  
}  
returnarg;  
}  
});  
window.alfred = alfred;  
})(window) 

 　　用的时候先引入这个文件。然后需要类似这样设置

alfred.setMethod("basic.js",["alfred","alfred.global","alfred.doc","alfred.reset","alfred.log","alfred.isNumber",  
"alfred.isFunction","alfred.isArray","alfred.isObject","alfred.isString","alfred.isBoolean",  
"alfred.require","alfred.setMethod","alfred.extend"],[]); 

　　这样设置了以后就可以告诉下面的JS 我已经提供了这些方法。随意alfred.require("alfred.reset"); 就可以把文件拉进页面注册好。

　　页面内是这样的。

<!DOCTYPE html> 
<html> 
<head> 
<title> 
</title> 
</head> 
<body> 
<script type="text/javascript" src="base.js"></script> 
<script type="text/javascript" src="deps.js"></script> 
<script type="text/javascript"> 
alfred.reset("$");  
$.require("alfred.dom");  
$(function(){  
vara = $.dom("<div id='test' style='width:200px;height:200px;background:red;'> adf</div>");  
$.dom("body").prepend(a);  
})  
</script> 
</body> 
</html> 

　　alfred.reset 是为了方便自己设置方法名字。这样我们几乎可以象jquery一样使用了。

　　alfred.reset("$");

　　$.require("alfred.dom");

　　$.dom("div a span:first-child").append("hello alfred");

　　就 可以这样用了。。

　　如果感觉这样不爽。欢迎各位朋友来交流下。我刚学JS 不是很久。所以技艺不高，研究不深。忘各位来指点下。互相提高。QQ:164864042

　　-------无代码 ，生活不***。

　　开始 到结束 只是那么个过程。结束了 就忘记吧。

原文链接：http://www.cnblogs.com/AlfredLee/archive/2012/01/17/base-js.html

【编辑推荐】

1. 上网抢不到火车票，你该骂谁？
2. 牛人分享网上订火车票的小技巧:Firefox+Firebug
3. 大型JavaScript应用程序架构模式
4. 京东今天还在用.NET架构的原因是什么？
5. 系统架构师谈企业应用架构之服务层