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前端这个行列,幸运的是入门的时候没有给我亮起红灯。

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. c#的序列化与反序列化

    这是反序列化的代码 using System.Runtime.Serialization.Json; public static T deserialize<T>(String s) { ...

  2. k-means算法初识

    基础知识: K-means聚类算法 聚类,简单地说就是把相似的东西分到一组.同 Classification (分类)不同,对于一个 classifier ,通常需要你告诉它“这个东西被分为某某类”. ...

  3. hdu 2199 Can you solve this equation?(二分搜索)

    Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  4. NOIP2011提高组 聪明的质监员 -SilverN

    题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...

  5. java操作excel文件

    采用POI操作excel API:http://poi.apache.org/apidocs/org/apache/poi/hssf/usermodel/HSSFCell.html poi包:http ...

  6. 矩阵乘法快速幂 codevs 1574 广义斐波那契数列

    codevs 1574 广义斐波那契数列  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond   题目描述 Description 广义的斐波那契数列是指形如 ...

  7. hdu 5833 Zhu and 772002 ccpc网络赛 高斯消元法

    传送门:hdu 5833 Zhu and 772002 题意:给n个数,每个数的素数因子不大于2000,让你从其中选则大于等于1个数相乘之后的结果为完全平方数 思路: 小于等于2000的素数一共也只有 ...

  8. Sql助手

    1. Visual Studio .net 的智能感知非常好用,但是在Sql Server中却没有.安装了这个小软件,就可以使用智能感知了. 此软件适用于主流的的数据库,如:Sql Server,DB ...

  9. UICollectionView移动

    collectionView在iOS9中发布了一个可以移动cell的新特性,实现如下: 1.创建collectionView并设置代理 - (UICollectionView *)collection ...

  10. S2--《深入.NET平台和C#编程》

    第一章    深入.NET框架 1.1  Microsoft  .NET框架概述 .NET框架的优势 * 提供了一个面向对象的编程环境,完全支持面向对象编程,.NET 框架提高了软件的可复用性,可扩展 ...