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前端这个行列,幸运的是入门的时候没有给我亮起红灯。
zoeDylan.js框架-数据底层的更多相关文章
- dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- 原生js实现数据双向绑定
最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...
- 前端Js框架 UI框架汇总 特性 适用范围 选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 13 款惊艳的 Node.js 框架——第1部分
[编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 API 以及实时应用的开发流程.本文系国内 ITOM 管理平台 OneAPM ...
- 前端Js框架汇总【转】
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- 借鉴一些关于js框架的东西
八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...
- 进阶攻略|最全的前端开源JS框架和库
新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一种主流的 Javascript框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响 ...
随机推荐
- 详细的图文教程来实现 eclipse环境下如何配置tomcat,并且把项目部署到Tomcat服务器上
很多初学,尤其自学JavaWeb的朋友首次在eclipse下配置tomcat时,总会有种难下手的感觉,在此,通过图文解说的方法,最直观的向大家演示一遍该配置过程. 第一部分:eclipse环境下如何配 ...
- httpclient访问网站时设置Accept-Encoding为gzip,deflate返回的结果为乱码的问题
近期迷恋上httpclient模拟各种网站登陆,浏览器中的开发者工具中查看请求头信息,然后照葫芦画瓢写到httpclient的请求中去,requestheader中有这么一段设置: Accept-En ...
- Centos 6.5(64bit)上安装Vertica single node
在Win8上使用虚拟机Virtualbox安装Centos6.5,想在上面安装vertica. 以下记录了我在安装的过程中遇到的问题与一些解决方案. 1.安装Centos的时候遇到了一个恼人的问题,即 ...
- myeclipse中运行tomcat报错java.lang.NoClassDefFoundError
有关myeclipse的小问题,在myeclipse中运行tomcat时显示已启动,但是无法访问localhost:8080/,显示404错误.在控制台中发现报错代码如下: java.lang.NoC ...
- NOIP2008 普及组T3 传球游戏 解题报告-S.B.S.
题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同 ...
- codeforces 487C C. Prefix Product Sequence(构造+数论)
题目链接: C. Prefix Product Sequence time limit per test 1 second memory limit per test 256 megabytes in ...
- Android数据存储(二)----PreferenceFragment详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- 一个完整的JENKINS下的ANT BUILD.XML文件
网上看见的,确实很全,该有的基本都覆盖到了.自己拿来稍微改改就可以用了. 注:property中的value是你自己的一些本地变量.需要改成自己的 <?xml version="1.0 ...
- C# 程序性能提升篇-1、装箱和拆箱,枚举的ToString浅析
前景提要: 编写程序时,也许你不经意间,就不知不觉的使程序代码,发生了装箱和拆箱,从而降低了效率,不要说就发生那么一次两次,如果说是程序中发生了循环.网络程序(不断请求处理的)等这些时候,减少装箱和拆 ...
- Beaufort密码
博福特密码,是一种类似于维吉尼亚密码的替代密码,由弗朗西斯·蒲福(Francis Beaufort)发明.它最知名的应用是M-209密码机.博福特密码属于对等加密,即加密演算法与解密演算法相同 博福特 ...