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框架-数据底层的更多相关文章

  1. dva框架使用mock.js模拟数据 + fetch请求数据

    what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

  2. 前端Js框架汇总

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  3. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  4. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

  5. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  6. 13 款惊艳的 Node.js 框架——第1部分

    [编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 API 以及实时应用的开发流程.本文系国内 ITOM 管理平台 OneAPM ...

  7. 前端Js框架汇总【转】

    概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...

  8. 借鉴一些关于js框架的东西

    八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...

  9. 进阶攻略|最全的前端开源JS框架和库

    新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一种主流的 Javascript框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响 ...

随机推荐

  1. Ubuntu15.04装机配置脚本

    #!/bin/bash echo "vim" sudo apt-get install vim cp -r ./vim/.vim ~/ cp ./vim/.vimrc ~/ ech ...

  2. Aptana studio 3前端开发编辑器推荐

    直接进入主题,先上图 这就是我Apatana studio 3的默认界面,推荐此工具的原因主要有以下几点: 1.可以集成Emmet,快速编写HTML+CSS,做到效率倍增. 2.Jquery 自动完成 ...

  3. 仅IE6中链接A的href为javascript协议时不能在当前页面跳转

    切页面时有时用链接A来替代按钮,这样做有几个好处 鼠标放上时默认有手状效果(不用添加cursor:pointer) 可以添加低版本IE都支持的伪类 如果点击时页面要整体刷新,即跳转,这时IE6则不尽人 ...

  4. mysql大小写问题

    以前做企业项目的时候,用的都是oracle数据库,在新公司项目用的是mysql,有关mysql大小写的问题 1   windows下默认mysql是不区分大小写的,要想让其支持大小写.更改方法 在my ...

  5. 微信微博分享注意事项(sharesdk)

    0.(重要)如果接入多渠道可以考虑微博微信appid appkey等信息放到服务端,方便临时修改又可避免很多渠道时替换ShareSDK.xml文件出错. 但是cocos2dx-2.x版本使用代码配置a ...

  6. linux 删除已输入的命令行

    ctrl + w —往前删除一个单词,光标放在最末尾ctrl + k —删除到末尾,光标放在最前面(可以使用ctrl+a) —————————————————————-华丽的分割线ctl + u 删除 ...

  7. Hive conf issue

    Hive --hiveconf v1="test" --hiveconf v2 -e "select * from ${hiveconf:v1} where col1=' ...

  8. USACO section1.1 Broken Necklace

    /* ID: vincent63 LANG: C TASK: beads */ #include <stdio.h> #include<stdlib.h> #include&l ...

  9. 关键路径 SDUTOJ 2498

    SDUTOJ 2498 AOE网上的关键路径 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 一个无环的有向图称为无环图(Dire ...

  10. Resharper团队协作之TODO

    TODO 需求 首先我想跟大家分享一下我们团队的代码检查流程. 1. 项目经理随时会检查成员的代码,如果发现有不符合规范的代码,会在注释里面加todo.比如,假设leo的代码不符合规范,那么项目经理就 ...