框架設計中的主體函數

作者：2012 AlfredLee 2012-01-18 10:20:42

今天我們將談到的是框架設計中的主體函數，包括主體控制函數和一些公用方法。包括拋異常，打日志。

　　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

【編輯推薦】

上網搶不到火車票，你該罵誰？
牛人分享網上訂火車票的小技巧:Firefox+Firebug
大型JavaScript應用程序架構模式
京東今天還在用.NET架構的原因是什么？
系統架構師談企業應用架構之服務層

責任編輯：彭凡來源：博客園

框架設計