zoeDylan.js框架-数据底层
浏览数：27 /
时间：2015年06月09日
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 });
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 };
特效层代码我就不上， 需要的童鞋可以去http://www.cnblogs.com/Moizd/p/plugin_banner_0.html这里拿代码，不过和现在的版本有过小小的更改，主要是之前数据底层和元素交互层在同一个文件上，这里我把两层代码分开写了。
墨芈这篇文章献丑了，大神勿喷，新人看看，有问题的地方希望大家提出来，一起交流交流。
我是WEB前端小菜鸟一枚，上学不学无术，入社会时不小心误入WEB前端这个行列，幸运的是入门的时候没有给我亮起红灯。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
