zoeDylan.js框架-数据底层
2024-05-12 21:48:11
zoeDylan.js是墨芈自己写的一套前端框架，不过由于墨芈经验不足，所以框架内部代码有些混乱.
墨芈写这套框架的目的是为了存储以后做前端开发过程中的一些代码,简单的说这套框架就是一个大杂烩.
这套框架主要分为3部分：数据底层(zoeDylan.js)、元素交互层(zoeDylan.element.js)和特效层(zoeDylan.**.js)。
数据底层主要处理数据，不会存在任何操作DOM元素，数据底层也是这套框架的核心层.
元素交互层主要是处理元素之间的一些数据，不会存在太多的DOM交互操作，也就是这套框架直接访问DOM元素的地方。
特效层主要是现有的元素交互层基础上，增强一些元素交互的功能，比如：banner、下拉框、日历、自定义滚动条等等.（PS：元素交互层和特效层的DOM操作是基于JQ，所以使用元素交互层时需要引用JQ框架，后期会把jq的DOM操作修改为纯JS的）
当然，特效层是需要样式表的。
这套框架现在还处于基础搭建状态，后期会不断进行优化和功能增加，因为墨芈时间有限（主要是偷懒），所以墨芈会在后期慢慢的更新，直到第一个版本出来为止。
现在这套框架还处于beta状态，整个框架现在都还是一个胚胎状态。
好了，废话不说了，直接上代码，有需要的童鞋直接拔代码就可以了。
1 /*
2 * @license zoeDylanJS v0.01-beta
3 * (c) 2014-2015 zoeDylan .Inc
4 * License: MIT
5 */
6 (function (_extend) {
7 //扩展
8 _extend();
9
10 var getAttr = function (v) {
11 for (var i in v) {
12 console.info('【' + typeof (v[i]) + '】:' + i);
13 }
14 },
15 versions = 'zoeDylanJS v0.01-beta';
16 var zd = function () {
17 console.info('versions:' + versions);
18 getAttr(zd);
19 };
20 /*
21 * 数据操作
22 */
23 //【数据对象,默认参数】配置数据初始化,
24 zd.option = function (op, def) {
25 if (!op || op == null) {
26 return def;
27 }
28 if (!def || def == null) {
29 return op;
30 }
31 //循环获取变量
32 for (var i in op) {
33 var tmp = op[i];
34 def[i] = tmp;
35 }
36 return def;
37 };
38
39 /*
40 * GET区
41 */
42
43 //随机数
44 zd.getRandom = function () {
45 return new Date().getTime() * Math.ceil(Math.random() * 100);
46 };
47 //【json字符串,是否缓存（true|false）】 '{"id":"1","data":"sdc"}' 将传入值转换为json格式
48 zd.getJson = function (data) {
49 var
50 json = Function('return ' + data)();
51 return json;
52 };
53 //【是否添加缓存true|false,事件】获取一个随机id参数 添加缓存可接受一个事件
54 zd.getID = function (cache, fn) {
55 var
56 id = zd.config.id_random + zd.getRandom();
57 if (cache) {
58 id = zd.cache.set(id, fn);
59 }
60 return id;
61 };
62
63 /*
64 * 公用配置、设置、获取等
65 */
66 //配置库
67 zd.config = (function () {
68 return {
69 //框架id属性标识@1
70 id: 'zoe_id',
71 //随机id前缀
72 id_random: 'random_',
73 //定时器变量前缀@2
74 timer: 'timer_',
75 //缓存组变量前缀
76 cache: 'cache_',
77
78 /*
79 * @1:属性标识：用于元素内联的一个自定义属性
80 * @2:变量前缀：用于缓存区变量的识别
81 */
82 }
83 })();
84
85 //公用库
86 zd.public = (function () {
87 return {
88 //缓存库
89 cache: {}
90 }
91 })();
92
93 //缓存配置
94 zd.cache = (function () {
95 var
96
97 //【缓存名称(字符串,可不用),缓存参数】设置缓存 返回：缓存变量名字符串或者|false(失败)，
98 _set = function (name, fn) {
99 try {
100 var
101 _name = typeof (name) == 'string' ? name : zd.config.cache + zd.getRandom(),
102 _fn = fn || null;
103 zd.public.cache[_name] = _fn;
104 return _name;
105 } catch (e) {
106 return false;
107 }
108 },
109
110 //【缓存名称】 获取缓存内容,返回：对应参数|false
111 _get = function (name) {
112 var
113 _name = _nameLegal(name);
114 if (!_name) {
115 return false;
116 }
117 var
118 tmp = zd.public.cache[_name];
119 //是否为空
120 if (typeof (tmp) != 'undefined') {
121 return tmp
122 } else {
123 return false;
124 }
125 },
126 //【缓存名称】 移除缓存,返回：true|false
127 _rem = function (name) {
128 var
129 _name = _nameLegal(name);
130 if (!_name) {
131 return false;
132 }
133 delete zd.public.cache[_name];
134 return true
135 },
136 //【缓存名称】 指定缓存是否存在
137 _atCache = function (name) {
138 var
139 _name = _nameLegal(name),
140 tmp = zd.public.cache[_name];
141 if (!_name) {
142 return false;
143 }
144 //是否为空
145 if (typeof (tmp) != 'undefined') {
146 return tmp
147 } else {
148 return false;
149 }
150 },
151 //【缓存名称】名称是否合法
152 _nameLegal = function (name) {
153 var
154 _name = typeof (name) == 'string' ? name : false;
155 if (_name) {
156 return _name
157 } else {
158 return false;
159 }
160 };
161 return ({
162 set: _set,
163 get: _get,
164 rem: _rem
165 });
166 })();
167
168 /*
169 * ajax部分
170 */
171 //【请求的url,完成后执行方法(json数据),错误(),请求类型[默认json]】
172 zd.ajax = function (url, fn, err) {
173 var
174 _url = url,
175 _fn = fn || function (c) { console.warn(c) },
176 _err = err || function (c) {
177 console.warn({
178 "code": c,
179 "url": _url
180 });
181 };
182 var ajax = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
183 ajax.open("get", _url, true);
184 ajax.onreadystatechange = function () {
185 if (ajax.readyState == 4) {
186 if (ajax.status == 200) {
187 _fn(dgg.getJson(ajax.response || ajax.status));
188 } else {
189 _err(ajax.status);
190 }
191 }
192 };
193 ajax.send();
194 };
195
196 /*
197 * cookie操作
198 */
199 zd.cookie = (function () {
200 var
201 _set = function (name, value, expiresHours) {
202 value = encodeURIComponent(value);
203 if (expiresHours > 0) {
204 var data = new Date();
205 data.setTime(data.getTime() + (expiresHours * 3600 * 1000));
206 var expires = "; expires=" + data.toGMTString();
207 }
208 else expires = "";
209 document.cookie = name + "=" + value + expires + "; path=/";
210
211 },
212 _get = function (name) {
213 var strCookie = document.cookie;
214 var arrCookie = strCookie.split("; ");
215 for (var i = 0; i < arrCookie.length; i++) {
216 var arr = arrCookie[i].split("=");
217 if (arr[0] == name) return arr[1];
218 }
219 return "";
220 },
221 _del = function (name) {
222 document.cookie = name + "=;expires=" + (new Date(0)).toGMTString() + "; path=/";
223 };
224 return ({
225 //名称、值、保存时间(小时)
226 set: _set,
227 get: _get,
228 del: _del,
229 rem: _del
230 });
231 })();
232
233 /*
234 * 检测
235 */
236 //各种检测
237 zd.test = (function () {
238 return ({
239 //定时器
240 timer: function (op) {
241 var
242 //配置参数 特别注意time和num参数，过小容易导致浏览器卡死
243 _op = zd.option(op, {
244 //执行事件
245 fn: function () { },
246 //结束事件
247 overfn: function () { },
248 //每次执行间隔时间
249 time: 300,
250 //执行最大次数
251 num: 10,
252 //是否停止【如果不停止则永久运行定时器一直到浏览器关闭或者手动关闭】
253 stop: true
254 }),
255 //缓存名称
256 _cName = zd.config.timer + zd.getRandom(),
257 //运行结束
258 _exit = function () {
259 //结束时移除定时器名称
260 window.clearTimeout(zd.public.cache[name]);
261 zd.cache.rem(_cName);
262 _op.overfn(_op.num);
263 },
264 //【true|false】运行,false结束运行
265 _run = function (run) {
266 run = run == false ? run : true;
267 if (_op.stop) {
268 _op.num -= 1;
269 } else {
270 _op.num += 1;
271 }
272 if (_op.num >= 0 && run) {//判断主动关闭或者次数达到限制
273 zd.public.cache[_cName] = window.setTimeout(function () {
274 //传出：【当前次数倒数,运行方法】
275 _op.fn(_op.num, _run);
276 }, _op.time);
277 } else {
278 _exit();
279 }
280 },
281 //初始化
282 _init = function () {
283 //设置名称缓存
284 _cName = zd.cache.set(_cName);
285 if (!_op.stop) {
286 _op.num = 0;
287 }
288 _run();
289 };
290 _init();
291 return _cName;
292 },
293
294 //【定时器名称】清除定时器
295 clearTimer: function (name) {
296 window.clearTimeout(zd.public.cache[name]);
297 zd.cache.rem(name);
298 return true;
299 }
300 });
301 })();
302
303 //【检测事件,成功事件,失败事件】定时器
304 zd.timer = function (op) {
305 return zd.test.timer(op);
306 };
307
308 //【定时器名称】清除定时器
309 zd.clearTimer = function (name) {
310 return zd.test.clearTimer(name);
311 };
312
313 //全局变量
314 window.zd = window.zoe = window.zoeDylan = zd;
315 })(function () {
316 /*
317 * //属性拓展
318 */
319 //取数组中最大和最小值
320 //[1,2,3].min()
321 Array.prototype.max = function () { //最大值
322 return Math.max.apply({}, this)
323 };
324 Array.prototype.min = function () { //最小值
325 return Math.min.apply({}, this)
326 };
327
328 //array.min(1,2,3);
329 Array.max = function (array) {
330 return Math.max.apply(Math, array);
331 };
332 Array.min = function (array) {
333 return Math.min.apply(Math, array);
334 };
335
336 //字符串是否是手机号
337 String.prototype.isPhone = function () {
338 return /^1[3,5,4,8]\d{9}$/.test(this);
339 }
340 //字符串是否是邮箱
341 String.prototype.isEmail = function () {
342 return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this);
343 }
344 //字符串是否在指定长度内【最小长度,最大长度】null为无限制
345 String.prototype.size = function (min, max) {
346 if (min && max) {
347 return this.length >= min && this.length <= max
348 } else if (!min && max) {
349 return this.length <= max;
350 } else if (min && !max) {
351 return this.length >= min;
352 } else if (!min && !max) {
353 return true;
354 }
355 };
356 //字符串是否在指定大小范围内【最小值,最大值】null为无限制
357 Number.prototype.size = function (min, max) {
358 if (min && max) {
359 return this >= min && this <= max
360 } else if (!min && max) {
361 return this <= max;
362 } else if (min && !max) {
363 return this >= min;
364 } else if (!min && !max) {
365 return true;
366 }
367 };
368 });zoeDylan.js
1 if (typeof (zd) == 'undefined') {
2 console.error('\n-------------------------------\n using error:undefined zd,please using zd.\n-------------------------------');
3 }
4
5 //元素id绑定
6 //【元素1,元素2[,方法(元素1,元素2)]】
7 //用于两个元素相互绑定id,默认自动生成一个bind_id,存在 ,bind_id直接绑定 返回:ID
8 zd.idBind = function (e1, e2, fn) {
9 var
10 _idTim = zd.getRandom(),
11 _fe = $(e1),
12 _ce = $(e2),
13 _fn = fn || function (a, b) { },
14 _id = _fe.attr(zd.config.id) || _idTim,
15 _bindId = _id;
16
17 _fe.attr(zd.config.id, _id);
18 _ce.attr(zd.config.id_bind, _bindId);
19 _fn(_fe, _ce);
20 return _id;
21 };
22
23 //元素切换
24 //【元素,元素内容[,事件(切换元素,内容元素)]】
25 //
26 zd.switch = function (fe, ce, fn) {
27 var
28 //点击元素
29 _fec = $(fe),
30 //点击元素组
31 _fe = _fec.parent(),
32 //内容元素
33 _cec = $(ce),
34 //内容元素组
35 _ce = _cec.parent(),
36 //执行完的事件
37 _fn = typeof (fn) == 'function' ? fn : function () { },
38 //初始化
39 _init = function (n) {
40 _show(n);
41 //点击事件
42 _fec.unbind().click(function () {
43 _show(_fec.index($(this)));
44 return false;
45 });
46 },
47 _show = function (n) {
48 n = typeof (n) == 'number' ? n : 0;
49 //被点击的元素如果要改变样式请添加一个'sel'的class名称
50 _fe.children('.sel').removeClass('sel');
51 _fec.eq(n).addClass('sel');
52 _cec.hide().eq(n).show();
53 _fn(_fec.eq(n), _cec.eq(n));
54 };
55 return ({
56 init: _init
57 })
58 };zoeDylan.element.js
特效层代码我就不上， 需要的童鞋可以去http://www.cnblogs.com/Moizd/p/plugin_banner_0.html这里拿代码，不过和现在的版本有过小小的更改，主要是之前数据底层和元素交互层在同一个文件上，这里我把两层代码分开写了。
墨芈这篇文章献丑了，大神勿喷，新人看看，有问题的地方希望大家提出来，一起交流交流。
我是WEB前端小菜鸟一枚，上学不学无术，入社会时不小心误入WEB前端这个行列，幸运的是入门的时候没有给我亮起红灯。
转载于:https://www.cnblogs.com/zoeDylan/p/zoeDylan_0.html
zoeDylan.js框架-数据底层相关推荐
- 数据可视化js框架 d3.js入门
数据可视化js框架 d3.js入门 [一] 选择元素绑定数据 1.下载.引入d3.js 2.d3.select():选择所有指定元素的第一个 3.d3.selectAll() :选择指定元素的全部 e ...
- dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
- 前端Js框架 UI框架汇总 特性 适用范围 选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
- 13 款惊艳的 Node.js 框架——第1部分
2019独角兽企业重金招聘Python工程师标准>>> [编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 AP ...
- 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
转载需经本人同意且标注本文原始地址:https://zhaomenghuan.github.io/blog/nodejs-eggjs-usersytem.html 前言 近来公司需要构建一套 EMM( ...
- 本地存储和移动端js框架及bootstrap简介
本地存储和移动端js框架 文章目录 本地存储和移动端js框架 一.本地存储 1.cookie 2.localStorage 3.sessionStorage 二.jquery UI 三.移动端js事件 ...
- 前端Js框架汇总【转】
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- Ext JS框架入门
Ext JS框架入门 一.概述: ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架. 功能丰富 ...
- 借鉴一些关于js框架的东西
八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...
最新文章
- 【廖雪峰Python学习笔记】高阶函数
- .net Remoting(1)基本内容
- JS----JavaScript中的递归函数
- C语言 abort 函数 - C语言零基础入门教程
- SpringBoot 2.x ShardingSphere分库分表实战
- 一次函数的斜率公式_【海广教育数学口诀】初中数学学不会？公式这样记，让你做题效率翻倍！...
- Ubuntu下安装 Mysql
- vscode配置Git管理工具GitLens
- 雨笋教育干货分享：0day漏洞利用及抓取的姿势
- Android Studio gradle 自定义签名设置
- 关于java基础知识的代码引用
- 东莞市中考计算机考试试题,东莞中考信息技术特长生考试程序内容及评分标准...
- linux修改用户uid gid
- 2022-2028全球与中国侧装车载摄像头市场现状及未来发展趋势
- 用python输出所有的玫瑰花数_用python实现输出3位水仙花数、玫瑰花数、
- Oracle 从入门到精通系列 - 思维导图计划
- wps时间戳转换成日期
- Python爬虫入门-小试ImagesPipeline爬取pixabay和煎蛋之为什么是‘404’
- 用js来判断用户端浏览器（判断QQ浏览器、谷歌浏览器）方法
- 技术人员如何创业《四》—— 打造超强执行力团队
热门文章
- python numpy np.array_Python | numpy | np.split()与np.array_split()函数
- hashmap删除指定key_HashTable和HashMap的区别详解
- python获取文件字节数_python关于文件操作中的字符个数和字节数
- if else语句_你敢信？if语句执行完，竟然也会执行else语句
- c语言串口通信_stm32 串口通信收发说明
- 和远程ip_【漏洞预警】Windows TCP/IP远程执行代码漏洞（CVE202016898）
- html input 字体颜色_input使用小技巧
- 用c51语言把连续字节做比较,C51优化设计之循环语句（转）
- web前端开发职业技能证书_1+x证书web前端开发职业技能等级标准1
- java移动接口发短信_天天都会写接口(interface)，但它的用途和好处有多少人能说得清楚？