zoeDylan.js框架-数据底层

时间:2023-03-09 08:50:08
zoeDylan.js框架-数据底层

zoeDylan.js是墨芈自己写的一套前端框架,不过由于墨芈经验不足,所以框架内部代码有些混乱.

墨芈写这套框架的目的是为了存储以后做前端开发过程中的一些代码,简单的说这套框架就是一个大杂烩.

这套框架主要分为3部分:数据底层(zoeDylan.js)、元素交互层(zoeDylan.element.js)和特效层(zoeDylan.**.js)

数据底层主要处理数据,不会存在任何操作DOM元素,数据底层也是这套框架的核心层.

元素交互层主要是处理元素之间的一些数据,不会存在太多的DOM交互操作,也就是这套框架直接访问DOM元素的地方。

特效层主要是现有的元素交互层基础上,增强一些元素交互的功能,比如:banner、下拉框、日历、自定义滚动条等等.(PS:元素交互层特效层的DOM操作是基于JQ,所以使用元素交互层时需要引用JQ框架,后期会把jq的DOM操作修改为纯JS的)

当然,特效层是需要样式表的。

这套框架现在还处于基础搭建状态,后期会不断进行优化和功能增加,因为墨芈时间有限(主要是偷懒),所以墨芈会在后期慢慢的更新,直到第一个版本出来为止。

现在这套框架还处于beta状态,整个框架现在都还是一个胚胎状态。

好了,废话不说了,直接上代码,有需要的童鞋直接拔代码就可以了。

 /*
* @license zoeDylanJS v0.01-beta
* (c) 2014-2015 zoeDylan .Inc
* License: MIT
*/
(function (_extend) {
//扩展
_extend(); var getAttr = function (v) {
for (var i in v) {
console.info('【' + typeof (v[i]) + '】:' + i);
}
},
versions = 'zoeDylanJS v0.01-beta';
var zd = function () {
console.info('versions:' + versions);
getAttr(zd);
};
/*
* 数据操作
*/
//【数据对象,默认参数】配置数据初始化,
zd.option = function (op, def) {
if (!op || op == null) {
return def;
}
if (!def || def == null) {
return op;
}
//循环获取变量
for (var i in op) {
var tmp = op[i];
def[i] = tmp;
}
return def;
}; /*
* GET区
*/ //随机数
zd.getRandom = function () {
return new Date().getTime() * Math.ceil(Math.random() * 100);
};
//【json字符串,是否缓存(true|false)】 '{"id":"1","data":"sdc"}' 将传入值转换为json格式
zd.getJson = function (data) {
var
json = Function('return ' + data)();
return json;
};
//【是否添加缓存true|false,事件】获取一个随机id参数 添加缓存可接受一个事件
zd.getID = function (cache, fn) {
var
id = zd.config.id_random + zd.getRandom();
if (cache) {
id = zd.cache.set(id, fn);
}
return id;
}; /*
* 公用配置、设置、获取等
*/
//配置库
zd.config = (function () {
return {
//框架id属性标识@1
id: 'zoe_id',
//随机id前缀
id_random: 'random_',
//定时器变量前缀@2
timer: 'timer_',
//缓存组变量前缀
cache: 'cache_', /*
* @1:属性标识:用于元素内联的一个自定义属性
* @2:变量前缀:用于缓存区变量的识别
*/
}
})(); //公用库
zd.public = (function () {
return {
//缓存库
cache: {}
}
})(); //缓存配置
zd.cache = (function () {
var //【缓存名称(字符串,可不用),缓存参数】设置缓存 返回:缓存变量名字符串或者|false(失败),
_set = function (name, fn) {
try {
var
_name = typeof (name) == 'string' ? name : zd.config.cache + zd.getRandom(),
_fn = fn || null;
zd.public.cache[_name] = _fn;
return _name;
} catch (e) {
return false;
}
}, //【缓存名称】 获取缓存内容,返回:对应参数|false
_get = function (name) {
var
_name = _nameLegal(name);
if (!_name) {
return false;
}
var
tmp = zd.public.cache[_name];
//是否为空
if (typeof (tmp) != 'undefined') {
return tmp
} else {
return false;
}
},
//【缓存名称】 移除缓存,返回:true|false
_rem = function (name) {
var
_name = _nameLegal(name);
if (!_name) {
return false;
}
delete zd.public.cache[_name];
return true
},
//【缓存名称】 指定缓存是否存在
_atCache = function (name) {
var
_name = _nameLegal(name),
tmp = zd.public.cache[_name];
if (!_name) {
return false;
}
//是否为空
if (typeof (tmp) != 'undefined') {
return tmp
} else {
return false;
}
},
//【缓存名称】名称是否合法
_nameLegal = function (name) {
var
_name = typeof (name) == 'string' ? name : false;
if (_name) {
return _name
} else {
return false;
}
};
return ({
set: _set,
get: _get,
rem: _rem
});
})(); /*
* ajax部分
*/
//【请求的url,完成后执行方法(json数据),错误(),请求类型[默认json]】
zd.ajax = function (url, fn, err) {
var
_url = url,
_fn = fn || function (c) { console.warn(c) },
_err = err || function (c) {
console.warn({
"code": c,
"url": _url
});
};
var ajax = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
ajax.open("get", _url, true);
ajax.onreadystatechange = function () {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
_fn(dgg.getJson(ajax.response || ajax.status));
} else {
_err(ajax.status);
}
}
};
ajax.send();
}; /*
* cookie操作
*/
zd.cookie = (function () {
var
_set = function (name, value, expiresHours) {
value = encodeURIComponent(value);
if (expiresHours > 0) {
var data = new Date();
data.setTime(data.getTime() + (expiresHours * 3600 * 1000));
var expires = "; expires=" + data.toGMTString();
}
else expires = "";
document.cookie = name + "=" + value + expires + "; path=/"; },
_get = function (name) {
var strCookie = document.cookie;
var arrCookie = strCookie.split("; ");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (arr[0] == name) return arr[1];
}
return "";
},
_del = function (name) {
document.cookie = name + "=;expires=" + (new Date(0)).toGMTString() + "; path=/";
};
return ({
//名称、值、保存时间(小时)
set: _set,
get: _get,
del: _del,
rem: _del
});
})(); /*
* 检测
*/
//各种检测
zd.test = (function () {
return ({
//定时器
timer: function (op) {
var
//配置参数 特别注意time和num参数,过小容易导致浏览器卡死
_op = zd.option(op, {
//执行事件
fn: function () { },
//结束事件
overfn: function () { },
//每次执行间隔时间
time: 300,
//执行最大次数
num: 10,
//是否停止【如果不停止则永久运行定时器一直到浏览器关闭或者手动关闭】
stop: true
}),
//缓存名称
_cName = zd.config.timer + zd.getRandom(),
//运行结束
_exit = function () {
//结束时移除定时器名称
window.clearTimeout(zd.public.cache[name]);
zd.cache.rem(_cName);
_op.overfn(_op.num);
},
//【true|false】运行,false结束运行
_run = function (run) {
run = run == false ? run : true;
if (_op.stop) {
_op.num -= 1;
} else {
_op.num += 1;
}
if (_op.num >= 0 && run) {//判断主动关闭或者次数达到限制
zd.public.cache[_cName] = window.setTimeout(function () {
//传出:【当前次数倒数,运行方法】
_op.fn(_op.num, _run);
}, _op.time);
} else {
_exit();
}
},
//初始化
_init = function () {
//设置名称缓存
_cName = zd.cache.set(_cName);
if (!_op.stop) {
_op.num = 0;
}
_run();
};
_init();
return _cName;
}, //【定时器名称】清除定时器
clearTimer: function (name) {
window.clearTimeout(zd.public.cache[name]);
zd.cache.rem(name);
return true;
}
});
})(); //【检测事件,成功事件,失败事件】定时器
zd.timer = function (op) {
return zd.test.timer(op);
}; //【定时器名称】清除定时器
zd.clearTimer = function (name) {
return zd.test.clearTimer(name);
}; //全局变量
window.zd = window.zoe = window.zoeDylan = zd;
})(function () {
/*
* //属性拓展
*/
//取数组中最大和最小值
//[1,2,3].min()
Array.prototype.max = function () { //最大值
return Math.max.apply({}, this)
};
Array.prototype.min = function () { //最小值
return Math.min.apply({}, this)
}; //array.min(1,2,3);
Array.max = function (array) {
return Math.max.apply(Math, array);
};
Array.min = function (array) {
return Math.min.apply(Math, array);
}; //字符串是否是手机号
String.prototype.isPhone = function () {
return /^1[3,5,4,8]\d{9}$/.test(this);
}
//字符串是否是邮箱
String.prototype.isEmail = function () {
return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this);
}
//字符串是否在指定长度内【最小长度,最大长度】null为无限制
String.prototype.size = function (min, max) {
if (min && max) {
return this.length >= min && this.length <= max
} else if (!min && max) {
return this.length <= max;
} else if (min && !max) {
return this.length >= min;
} else if (!min && !max) {
return true;
}
};
//字符串是否在指定大小范围内【最小值,最大值】null为无限制
Number.prototype.size = function (min, max) {
if (min && max) {
return this >= min && this <= max
} else if (!min && max) {
return this <= max;
} else if (min && !max) {
return this >= min;
} else if (!min && !max) {
return true;
}
};
});

zoeDylan.js

 if (typeof (zd) == 'undefined') {
console.error('\n-------------------------------\n using error:undefined zd,please using zd.\n-------------------------------');
} //元素id绑定
//【元素1,元素2[,方法(元素1,元素2)]】
//用于两个元素相互绑定id,默认自动生成一个bind_id,存在 ,bind_id直接绑定 返回:ID
zd.idBind = function (e1, e2, fn) {
var
_idTim = zd.getRandom(),
_fe = $(e1),
_ce = $(e2),
_fn = fn || function (a, b) { },
_id = _fe.attr(zd.config.id) || _idTim,
_bindId = _id; _fe.attr(zd.config.id, _id);
_ce.attr(zd.config.id_bind, _bindId);
_fn(_fe, _ce);
return _id;
}; //元素切换
//【元素,元素内容[,事件(切换元素,内容元素)]】
//
zd.switch = function (fe, ce, fn) {
var
//点击元素
_fec = $(fe),
//点击元素组
_fe = _fec.parent(),
//内容元素
_cec = $(ce),
//内容元素组
_ce = _cec.parent(),
//执行完的事件
_fn = typeof (fn) == 'function' ? fn : function () { },
//初始化
_init = function (n) {
_show(n);
//点击事件
_fec.unbind().click(function () {
_show(_fec.index($(this)));
return false;
});
},
_show = function (n) {
n = typeof (n) == 'number' ? n : 0;
//被点击的元素如果要改变样式请添加一个'sel'的class名称
_fe.children('.sel').removeClass('sel');
_fec.eq(n).addClass('sel');
_cec.hide().eq(n).show();
_fn(_fec.eq(n), _cec.eq(n));
};
return ({
init: _init
})
};

zoeDylan.element.js

特效层代码我就不上, 需要的童鞋可以去http://www.cnblogs.com/Moizd/p/plugin_banner_0.html这里拿代码,不过和现在的版本有过小小的更改,主要是之前数据底层元素交互层在同一个文件上,这里我把两层代码分开写了。

墨芈这篇文章献丑了,大神勿喷,新人看看,有问题的地方希望大家提出来,一起交流交流。

我是WEB前端小菜鸟一枚,上学不学无术,入社会时不小心误入WEB前端这个行列,幸运的是入门的时候没有给我亮起红灯。