zoeDylan.js是墨羋自己寫的一套前端框架，不過由于墨羋經(jīng)驗不足，所以框架內(nèi)部代碼有些混亂.

墨羋寫這套框架的目的是為了存儲以后做前端開發(fā)過程中的一些代碼,簡單的說這套框架就是一個大雜燴.

這套框架主要分為3部分：數(shù)據(jù)底層(zoeDylan.js)、元素交互層(zoeDylan.element.js)和特效層(zoeDylan.**.js)。

數(shù)據(jù)底層主要處理數(shù)據(jù)，不會存在任何操作DOM元素，數(shù)據(jù)底層也是這套框架的核心層.

元素交互層主要是處理元素之間的一些數(shù)據(jù)，不會存在太多的DOM交互操作，也就是這套框架直接訪問DOM元素的地方。

特效層主要是現(xiàn)有的元素交互層基礎(chǔ)上，增強一些元素交互的功能，比如：banner、下拉框、日歷、自定義滾動條等等.（PS：元素交互層和特效層的DOM操作是基于JQ，所以使用元素交互層時需要引用JQ框架，后期會把jq的DOM操作修改為純JS的）

當然，特效層是需要樣式表的。

這套框架現(xiàn)在還處于基礎(chǔ)搭建狀態(tài)，后期會不斷進行優(yōu)化和功能增加，因為墨羋時間有限（主要是偷懶），所以墨羋會在后期慢慢的更新，直到第一個版本出來為止。

現(xiàn)在這套框架還處于beta狀態(tài)，整個框架現(xiàn)在都還是一個胚胎狀態(tài)。

好了，廢話不說了，直接上代碼，有需要的童鞋直接拔代碼就可以了。

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 * 數(shù)據(jù)操作 22 */ 23 //【數(shù)據(jù)對象,默認參數(shù)】配置數(shù)據(jù)初始化, 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 //循環(huán)獲取變量 32 for (var i in op) { 33 var tmp = op[i]; 34 def[i] = tmp; 35 } 36 return def; 37 }; 38 39 /* 40 * GET區(qū) 41 */ 42 43 //隨機數(shù) 44 zd.getRandom = function () { 45 return new Date().getTime() * Math.ceil(Math.random() * 100); 46 }; 47 //【json字符串,是否緩存（true|false）】 '{"id":"1","data":"sdc"}' 將傳入值轉(zhuǎn)換為json格式 48 zd.getJson = function (data) { 49 var 50 json = Function('return ' + data)(); 51 return json; 52 }; 53 //【是否添加緩存true|false,事件】獲取一個隨機id參數(shù) 添加緩存可接受一個事件 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 * 公用配置、設(shè)置、獲取等 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:屬性標識：用于元素內(nèi)聯(lián)的一個自定義屬性 80 * @2:變量前綴：用于緩存區(qū)變量的識別 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 //【緩存名稱(字符串,可不用),緩存參數(shù)】設(shè)置緩存 返回：緩存變量名字符串或者|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 //【緩存名稱】 獲取緩存內(nèi)容,返回：對應(yīng)參數(shù)|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,完成后執(zhí)行方法(json數(shù)據(jù)),錯誤(),請求類型[默認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 //配置參數(shù) 特別注意time和num參數(shù)，過小容易導致瀏覽器卡死 243 _op = zd.option(op, { 244 //執(zhí)行事件 245 fn: function () { }, 246 //結(jié)束事件 247 overfn: function () { }, 248 //每次執(zhí)行間隔時間 249 time: 300, 250 //執(zhí)行最大次數(shù) 251 num: 10, 252 //是否停止【如果不停止則永久運行定時器一直到瀏覽器關(guān)閉或者手動關(guān)閉】 253 stop: true 254 }), 255 //緩存名稱 256 _cName = zd.config.timer + zd.getRandom(), 257 //運行結(jié)束 258 _exit = function () { 259 //結(jié)束時移除定時器名稱 260 window.clearTimeout(zd.public.cache[name]); 261 zd.cache.rem(_cName); 262 _op.overfn(_op.num); 263 }, 264 //【true|false】運行,false結(jié)束運行 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) {//判斷主動關(guān)閉或者次數(shù)達到限制 273 zd.public.cache[_cName] = window.setTimeout(function () { 274 //傳出：【當前次數(shù)倒數(shù),運行方法】 275 _op.fn(_op.num, _run); 276 }, _op.time); 277 } else { 278 _exit(); 279 } 280 }, 281 //初始化 282 _init = function () { 283 //設(shè)置名稱緩存 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 //取數(shù)組中最大和最小值 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 //字符串是否在指定長度內(nèi)【最小長度,最大長度】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 //字符串是否在指定大小范圍內(nèi)【最小值,最大值】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 //【元素,元素內(nèi)容[,事件(切換元素,內(nèi)容元素)]】 25 // 26 zd.switch = function (fe, ce, fn) { 27 var 28 //點擊元素 29 _fec = $(fe), 30 //點擊元素組 31 _fe = _fec.parent(), 32 //內(nèi)容元素 33 _cec = $(ce), 34 //內(nèi)容元素組 35 _ce = _cec.parent(), 36 //執(zhí)行完的事件 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 //被點擊的元素如果要改變樣式請?zhí)砑右粋€'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這里拿代碼，不過和現(xiàn)在的版本有過小小的更改，主要是之前數(shù)據(jù)底層和元素交互層在同一個文件上，這里我把兩層代碼分開寫了。

墨羋這篇文章獻丑了，大神勿噴，新人看看，有問題的地方希望大家提出來，一起交流交流。

我是WEB前端小菜鳥一枚，上學不學無術(shù)，入社會時不小心誤入WEB前端這個行列，幸運的是入門的時候沒有給我亮起紅燈。

轉(zhuǎn)載于:https://www.cnblogs.com/zoeDylan/p/zoeDylan_0.html

總結(jié)

以上是生活随笔為你收集整理的zoeDylan.js框架-数据底层的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。