做这个主要是自己玩和自己用。所以没想兼容什么IE7--

View Code

(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:[]
},
_isReady = false,
alfred = {
author : "alfred",
version : 1.01,
global : this,
doc : this.document,
reset : function(it){alfred.global[it]=alfred;},
log : function()
{
if(window.console && console.log){
return console.log(arguments)
}
},
isNumber : function(it){return _is(it,/^\[object number\]$/)},
isString : function(it){return _is(it,/^\[object string\]$/)},
isFunction : function(it){return _is(it,/^\[object function\]$/)},
isObject : function(it){return _is(it,/^\[object object\]$/)},
isArray : function(it){return _is(it,/^\[object array\]$/)},
isBoolean : function(it){return typeof it ==='boolean'},
isDom : function(it){return _is(it,/^\[object html\w+\]$/)},
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";
},
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;
}
};
};
};
},
ready : function(callback){
_checkReady(callback);
},
each : function(arg,callback){
for(var i in arg){
if(arg[i])
{
callback.call(arg[i],i);
}
}
return arg;
}
};

//私有函数开始
_is = function(it,type){
return type.test(_toString.call(it).toLowerCase());
};
_waitReady = function(){
if(document.readyState != "loaded" && document.readyState != "complete")
{
var time = setTimeout(arguments.callee,0);
return;
}
clearTimeout(time);
}
_checkReady = function(callback){
if(document.addEventListener)
{
document.addEventListener("DOMContentLoaded",function(){
_waitReady();
callback();
});
}
if(document.attachEvent)
{
document.attachEvent( "onreadystatechange", function(){
_waitReady();
callback();
} );
}
};
_listUrl = function(){
var l = _scriptMap.visited,i;
for(i in l){
_scriptMap.wait_write.push(i);
}
_scriptMap.wait_write.reverse();
_writeScript();
};
_writeScript = function(){
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);
script.setAttribute("type","text/javascript");
script.setAttribute("src",url);
head.appendChild(script);
_scriptMap.writted[url] = true;
};
};
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"],[]);
alfred.setMethod("query/query.js",["alfred.dom","alfred.dom.fn","alfred.dom.fn.init","alfred.dom.fn.extend","alfred.dom.fn.item","alfred.dom.fn.eq","alfred.dom.fn.append","alfred.dom.fn.prepend","alfred.dom.fn.find","alfred.dom.fn.attr","alfred.dom.fn.html","alfred.dom.fn.each","alfred.dom.fn.size","alfred.dom.fn.sort","alfred.dom.fn.push","alfred.dom.fn.splice","alfred.dom.fn.length","alfred.dom.fn.context","alfred.dom.fn.size"],[]);

复制代码

下面这是简单的选择器。没写兼容，没做什么调试。懒的写。喜欢自己研究或者和我研究的朋友欢迎乔装打扮过来互相吹牛。

View Code

(function(window,alfred,undefined){

var slice = Array.prototype.slice,
    indexOf = Array.prototype.indexOf,
    trim = String.prototype.trim,
    _creat = /^\<(\w+)(\s.*)+\>(.*)\<\/\1\>$/,
    trim = trim ?
        function(text) {
            return text == null ?
                "" :
                trim.call( text );
        } :

        // Otherwise use our own trimming functionality
        function(text) {
            return text == null ?
                "" :
                text.toString().replace(/^\s+/,"").replace(/\s+$/,"");
        };
    alfred.dom = function(){
        return new alfred.dom.fn.init(arguments);
    };

    alfred.dom.fn = alfred.dom.prototype = {
        constructor : alfred.dom,
        init : function(){
            var arg = arguments[0],
                select = arg[0],
                doc = arg[1] || alfred.doc,//选择区域控制
                dom;
            //没有输入 或输入为 “”
            if(!select)
            {
                return this;
            }
            if ( select === "body" && document.body ) {
                this.context = document.body;
                this[0] = document.body;
                this.select = select;
                this.length = 1;
                return this;
            }

            //输入就是DOM 直接封装到选择器方便增加函数。
            if (select.nodeType)
            {
                this.context = this[0] = select;
                this.length = 1;
                return this;
            }
            if(select.context)
            {
                for(var i =0;i<select.length;i++)
                {
                    this[i] = select[i];
                }
                this.context = select.context;
                this.length = select.length;
                return this;
            }
            // 如果是为HTML5 选择ID 为了安全 强制限制输入ID 类型 #ID
            if (alfred.isBoolean(arg[1]))
            {
                this.context = this[0] = document.getElementById(select.replace("#",""));
                this.length = 1;
                return this;
            }
            // 不是绘图模式。是个字符
            if (alfred.isString(select))
            {
                // 如果是创建个属性。千万不要在里面乱搞空格。'style="width: 12px; "'
                if (_creat.test(select))
                {
                    dom = _creat.exec(select.replace(/\s+/g," ").replace(/\'|\"/g,"").replace(/\;\s/g,";").replace(/\:\s/g,":"));
                    this.context = this[0] = document.createElement(dom[1]);
                    this.length = 1;
                    var i = dom[2].replace(/^\s+/,"").replace(/\s+$/,"").split(" "),j;
                    for(; i.length && (j = i.shift().split("="));)
                    {
                        this.attr(j[0],j[1]);
                    }
                    this.html(dom[3]);
                    return this;
                }
                else//亲，你要选择DOM 了。。
                {
                    dom = alfred.dom.fn.find(select,doc);
                    for(i in dom){i==='item' ? "" : this[i] = dom[i];}
                    this.context = dom;
                    return this;
                }
            }
        },
        context : "",
        length : 0,
        push : Array.prototype.push,
        sort: [].sort,
        splice: [].splice,
        extend : alfred.extend
    };
//回归绑定和继承到init上。这样就可以实现扩展了。 jquery 就是这样做的。
alfred.dom.fn.init.prototype = alfred.dom.fn;
alfred.dom.fn.extend({
    size : function(){return this.length},
    item : function(){
        var _doms = {
            length     : 0,
            context :[],
            sort     : [].sort,
            splice     : [].splice
        };
        for (var i = 0; i < arguments.length;i++) {
            _doms[i] = this[i];
            _doms.context.push(this[i]);
        }
        _doms.length = i;
        return _doms;
    },
    eq:function(){
        return alfred.dom(this.item.apply(this,arguments));
    },
    find : function(select,context){
        //如果你的浏览器给力的话。 
        if(document.querySelectorAll)
        {
            return context.querySelectorAll(select);
        }
        throw "Error please use the webkit or mozilla browser or IE8+"// 以后完善 暂时不支持
    },
    attr : function(){
        var args =arguments;
        if(args.length===1)
        {
            this.each(function(){
                this.getAttribute(args[0])
            });
        }
        if(args.length===2)
        {
            this.each(function(){
                this.setAttribute(args[0],args[1]);
            });
        }
        return this;
    },
    html:function(it){
        if(it){
        var it = alfred.isObject(it)&& it.context ? it[0] : it;
        this.each(function(){this.innerHTML = it;});    
        return this;
        }
        return this.innerHTML;
    },
    each : function(callback){
        for(var i in this){
            if(this[i].nodeType)
            {
                callback.call(this[i],i);
            }
        }
        return this;
    },
    append:function(it){
        this.each(function(){
            if(alfred.isString(it))
            {
                this.innerHTML += it;
            }
            if(it.nodeType)
            {
                this.appendChild(it);
            }
            if(it.context)
            {
                for(var i =0;i<it.length;i++)
                {
                    this.appendChild(it[i]);
                }
            }
            return this;
        });
        return this;
    },
    prepend : function(it){
        this.each(function(){
            if(alfred.isString(it))
            {
                this.innerHTML = it+this.innerHTML;
            }
            if(it.nodeType)
            {
                this.insertBefore(it,this.firstChild);
            }
            if(it.context)
            {
                for(var i =0;i<it.length;i++)
                {
                    this.insertBefore(it[i],this.firstChild);
                }
            }
        });
        return this;
    },
    bind : function(type,callback){
        if(alfred.isDom(this))
        {
            if(document.attachEvent)
            {
                this.attachEvent("on"+type,callback);
            }
            if (document.addEventListener)
            {
                this.attachEvent(type,callback,false);
            }                
        }
        if(!alfred.isString(this)&&!alfred.isNumber(this))
        {
            this[type] = this[type] || [];
            this[type].push(callback);
        }
        return this;
    },
    trigger : function(type,data){
        if(alfred.isDom(this))
        {
            if(document)
            {
                
            }
            if(document)
            {
                
            }
        }
        if(!alfred.isString(this)&&!alfred.isNumber(this))
        {
            for(var i=0;i<this[type].length;i++)
            {
                this[type][i]();
            }
        }
        return this;
    },
    unbind : function(type){
        if(alfred.isDom(this))
        {
            if(document.removeEventListener)
            {
                this.removeEventListener(type)
            }
            if(document.detachEvent)
            {
                this.detachEvent("on"+type);
            }
        }
        if(!alfred.isString(this)&&!alfred.isNumber(this))
        {
            this[type]=[];
        }
    },
});
})(window,alfred)

下面的是我的测试代码。首先是主函数的。

<!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");

$.ready(function(){
    var a = $.dom("<div id='test' style='width:200px;height:200px;background:red;'> adf</div>");
    $.dom("body").prepend(a);
})
</script>
</body>
</html>

复制代码

下面是选择器的

<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<a>
<div>first</div>
</a>
</div>
<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");
$.ready(function(){
        var div = alfred.dom('<div id="a" class="b">adf</div>');
    alfred.dom("div a")
    .append("this is a test")
    .prepend(div)
    .append(div)
    .attr("id","name");            

});    
</script>
</body>
</html>

复制代码

文件的路径要在数据库文件对应就可以进行require  或者自己手动setMethod

不喜欢我的全局变量 可以象上面那样