框架设计---主体函数

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){//复杂的可以自己进行设置。正则匹配。
    return type.test(_toString.call(it).toLowerCase());
};
_waitReady = function(){
//等结束。如果结束了。直接跳出循环。其实就是利用JS的这个特性。
    if(document.readyState != "loaded" && document.readyState != "complete")
    {
        var time = setTimeout(arguments.callee,0);
        return;
    }
    clearTimeout(time);
}
_checkReady = function(){
    //处理参数
    for(var i=0;i<arguments.length;i++)
    {
        _readyFnx.push(arguments[i]);
    }
    var callback = _readyFnx.shift();
    //支持高级事件的
    if(document.addEventListener)
    {
        document.addEventListener("DOMContentLoaded",function(){
            _waitReady();
            document.removeEventListener("DOMContentLoaded",arguments.callee,false);
            callback.apply(window,_readyFnx);
        });
        return this;
    }
    // 支持事件则用事件处理 IE
    if(document.attachEvent)
    {
        document.attachEvent( "onreadystatechange", function(){
        _waitReady();
        document.detachEvent( "onreadystatechange",arguments.callee);
        callback.apply(window,_readyFnx);
        });
        return this;
    }
    //不支持的则看不在 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);
        return this;
    }
};
_listUrl = function(){
    var l = _scriptMap.visited,i;
    //对我们的URL 进行筛选 。主要防止多次添加访问过的依赖库。
    for(i in l){
        if(!_scriptMap.writted[i])
        {
            _scriptMap.wait_write.push(i);    
        }
    }
    _scriptMap.wait_write.reverse();
    _writeScript();
};
_writeScript = function(){
    //写入我们的JS 了。
    var head = document.getElementsByTagName("head").item(0),len = _scriptMap.wait_write.length;
    for (var i;_scriptMap.wait_write.length&&(i=_scriptMap.wait_write.shift());) {
        var script = 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(){
    var deep = false,
        len,
        options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1;
    len = arguments.length;
    if (!len) 
    {
        return this;
    }
    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 in options) {
                copy = options[name];
                src = target[name];
                if(src){throw "Becareful : you are rewrite the "+_handle+"."+name+"!"}
                if (copy===target) {continue}
                if (deep && copy && (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 );
                }
                else if ( 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){return typeof it ==='boolean'};
alfred.isDom = function(it){return _is(it,/^\[object html\w+\]$/)};

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)
        {
            return console.log.apply(window,arguments)
        }
    },
    error : function(name,value)
    {
        throw {"name":name,"message":value};
    },
    require : function(method)
    {
        var m2u = _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)
    {
        var i, 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};
            }
            return this;
        }
        throw "Error : you are setMethod in an old method";
    },
    ready : function(){
        _checkReady.apply(window,arguments);
    },
    each : function(arg,callback){
        for(var i in arg){
            if(arg[i])
            {
                callback.call(arg[i],i);
            }
        }
        return arg;
    }
});
window.alfred = alfred;
})(window)

(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){//复杂的可以自己进行设置。正则匹配。
    return type.test(_toString.call(it).toLowerCase());
};
_waitReady = function(){
//等结束。如果结束了。直接跳出循环。其实就是利用JS的这个特性。
    if(document.readyState != "loaded" && document.readyState != "complete")
    {
        var time = setTimeout(arguments.callee,0);
        return;
    }
    clearTimeout(time);
}
_checkReady = function(){
    //处理参数
    for(var i=0;i<arguments.length;i++)
    {
        _readyFnx.push(arguments[i]);
    }
    var callback = _readyFnx.shift();
    //支持高级事件的
    if(document.addEventListener)
    {
        document.addEventListener("DOMContentLoaded",function(){
            _waitReady();
            document.removeEventListener("DOMContentLoaded",arguments.callee,false);
            callback.apply(window,_readyFnx);
        });
        return this;
    }
    // 支持事件则用事件处理 IE
    if(document.attachEvent)
    {
        document.attachEvent( "onreadystatechange", function(){
        _waitReady();
        document.detachEvent( "onreadystatechange",arguments.callee);
        callback.apply(window,_readyFnx);
        });
        return this;
    }
    //不支持的则看不在 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);
        return this;
    }
};
_listUrl = function(){
    var l = _scriptMap.visited,i;
    //对我们的URL 进行筛选 。主要防止多次添加访问过的依赖库。
    for(i in l){
        _scriptMap.wait_write.push(i);
    }
    _scriptMap.wait_write.reverse();
    _writeScript();
};
_writeScript = function(){
    //写入我们的JS 了。
    var head = document.getElementsByTagName("head").item(0),len = _scriptMap.wait_write.length;
    for (var i;_scriptMap.wait_write.length&&(i=_scriptMap.wait_write.shift());) {
        var script = 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(){
    var deep = false,
        len,
        options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1;
    len = arguments.length;
    if (!len) 
    {
        return this;
    }
    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 in options) {
                copy = options[name];
                src = target[name];
                if(src){throw "Becareful : you are rewrite the "+_handle+"."+name+"!"}
                if (copy===target) {continue}
                if (deep && copy && (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 );
                }
                else if ( 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){return typeof it ==='boolean'};
alfred.isDom = function(it){return _is(it,/^\[object html\w+\]$/)};

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)
        {
            return console.log.apply(window,arguments)
        }
    },
    error : function(name,value)
    {
        throw {"name":name,"message":value};
    },
    require : function(method)
    {
        var m2u = _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());)
            {
                require(r);
            }
            _listUrl();
        }
    },
    setMethod : function(url,method,rely)
    {
        var i, 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};
            }
            return this;
        }
        throw "Error : you are setMethod in an old method";
    },
    ready : function(){
        _checkReady.apply(window,arguments);
    },
    each : function(arg,callback){
        for(var i in arg){
            if(arg[i])
            {
                callback.call(arg[i],i);
            }
        }
        return arg;
    }
});
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(){
    var a = $.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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-------无代码 ，生活不完美。