做这个主要是自己玩和自己用。所以没想兼容什么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
不喜欢我的全局变量 可以象上面那样
alfred.reset("xxxxx") 你想放什么自己放。
技术狠烂。求师傅指点。。。。。。。
-------无代码,生活不完美。
开始 到结束 只是那么个过程。结束了 就忘记吧。