dhtmlx5源码解析(一)全局方法分析 dhtmlxValidation&&浏览器类型
2017-07-21 17:05
666 查看
dhtmlx是套收费的js全端,公司已经使用了好几年,一直没抽空仔细看看源码,为了react控件封装必须先读取一遍源码。把dhtmlx.js解压缩后,代码大概是7万行代码,吓坏本宝宝了。
dhtmlx源码提供了2个大的window属性,一个是window.dhx4,一个是window.dhtmlx,还有些比较小的window属性,比如window.dhtmlxValidation,说实话我觉得没必要把对象都定义为window的属性来传一道啊,没发觉有啥优势。
这节先分析下它的dhtmlxValidation代码。
该代码主要是用于校验的,在node.js下竟然报错,仔细看看代码才发现,大神也有打盹的时候。
改造下,并且用es6的语法进行实现。
dhtmlx将许多公用函数都存放在window.dhx对象中,比如浏览器类型的判断。
dhtmlx源码提供了2个大的window属性,一个是window.dhx4,一个是window.dhtmlx,还有些比较小的window属性,比如window.dhtmlxValidation,说实话我觉得没必要把对象都定义为window的属性来传一道啊,没发觉有啥优势。
这节先分析下它的dhtmlxValidation代码。
if (!window.dhtmlxValidation){ dhtmlxValidation = function () { }; dhtmlxValidation.prototype = { isEmpty: function (a) { return a == "" }, isNotEmpty: function (a) { return (a instanceof Array ? a.length > 0 : !a == "") }, isValidBoolean: function (a) { return !!a.toString().match(/^(0|1|true|false)$/) }, isValidEmail: function (a) { return !!a.toString().match(/(^[a-z0-9]([0-9a-z\-_\.]*)@([0-9a-z_\-\.]*)([.][a-z]{3})$)|(^[a-z]([0-9a-z_\.\-]*)@([0-9a-z_\-\.]*)(\.[a-z]{2,5})$)/i) }, isValidInteger: function (a) { return !!a.toString().match(/(^-?\d+$)/) }, isValidNumeric: function (a) { return !!a.toString().match(/(^-?\d\d*[\.|,]\d*$)|(^-?\d\d*$)|(^-?[\.|,]\d\d*$)/) }, isValidAplhaNumeric: function (a) { return !!a.toString().match(/^[_\-a-z0-9]+$/gi) }, isValidDatetime: function (c) { var a = c.toString().match(/^(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})$/); return a && !!(a[1] <= 9999 && a[2] <= 12 && a[3] <= 31 && a[4] <= 59 && a[5] <= 59 && a[6] <= 59) || false }, isValidDate: function (a) { var c = a.toString().match(/^(\d{4})-(\d{2})-(\d{2})$/); return c && !!(c[1] <= 9999 && c[2] <= 12 && c[3] <= 31) || false }, isValidTime: function (c) { var a = c.toString().match(/^(\d{1,2}):(\d{1,2}):(\d{1,2})$/); return a && !!(a[1] <= 24 && a[2] <= 59 && a[3] <= 59) || false }, isValidIPv4: function (a) { var c = a.toString().match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/); return c && !!(c[1] <= 255 && c[2] <= 255 && c[3] <= 255 && c[4] <= 255) || false }, isValidCurrency: function (a) { return a.toString().match(/^\$?\s?\d+?([\.,\,]?\d+)?\s?\$?$/) && true || false }, isValidSSN: function (a) { return a.toString().match(/^\d{3}\-?\d{2}\-?\d{4}$/) && true || false }, isValidSIN: function (a) { return a.toString().match(/^\d{9}$/) && true || false } }; dhtmlxValidation = new dhtmlxValidation() }
该代码主要是用于校验的,在node.js下竟然报错,仔细看看代码才发现,大神也有打盹的时候。
if (!window.dhtmlxValidation)
改造下,并且用es6的语法进行实现。
var dhtmlxValidation = function () { }; dhtmlxValidation.prototype = { //校验是否为空 isEmpty: (a)=>{ return a == "" }, //校验不为空 isNotEmpty: (a)=> { return (a instanceof Array ? a.length > 0 : !a == "") }, //校验是否为boolean字段 isValidBoolean: (a)=> { return !!a.toString().match(/^(0|1|true|false)$/) }, //校验是否为邮件 isValidEmail: (a)=> { return !!a.toString().match(/(^[a-z0-9]([0-9a-z\-_\.]*)@([0-9a-z_\-\.]*)([.][a-z]{3})$)|(^[a-z]([0-9a-z_\.\-]*)@([0-9a-z_\-\.]*)(\.[a-z]{2,5})$)/i) }, //校验是否未数字而且是整数 isValidInteger: (a)=> { return !!a.toString().match(/(^-?\d+$)/) }, //校验是否为数字 isValidNumeric: (a)=> { return !!a.toString().match(/(^-?\d\d*[\.|,]\d*$)|(^-?\d\d*$)|(^-?[\.|,]\d\d*$)/) }, isValidAplhaNumeric: (a)=> { return !!a.toString().match(/^[_\-a-z0-9]+$/gi) }, //校验日期时间格式 isValidDatetime: function (c) { var a = c.toString().match(/^(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})$/); return a && !!(a[1] <= 9999 && a[2] <= 12 && a[3] <= 31 && a[4] <= 59 && a[5] <= 59 && a[6] <= 59) || false }, //校验是否是日期格式 isValidDate: (a)=> { var c = a.toString().match(/^(\d{4})-(\d{2})-(\d{2})$/); return c && !!(c[1] <= 9999 && c[2] <= 12 && c[3] <= 31) || false }, //校验是否是时间格式 isValidTime: function (c) { var a = c.toString().match(/^(\d{1,2}):(\d{1,2}):(\d{1,2})$/); return a && !!(a[1] <= 24 && a[2] <= 59 && a[3] <= 59) || false }, isValidIPv4: (a)=> { var c = a.toString().match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/); return c && !!(c[1] <= 255 && c[2] <= 255 && c[3] <= 255 && c[4] <= 255) || false }, isValidCurrency: (a)=> { return a.toString().match(/^\$?\s?\d+?([\.,\,]?\d+)?\s?\$?$/) && true || false }, isValidSSN: (a)=> { return a.toString().match(/^\d{3}\-?\d{2}\-?\d{4}$/) && true || false }, isValidSIN: (a)=> { return a.toString().match(/^\d{9}$/) && true || false } }; dhtmlxValidation = new dhtmlxValidation();
dhtmlx将许多公用函数都存放在window.dhx对象中,比如浏览器类型的判断。
if (typeof(window.dhx) == "undefined") { window.dhx = window.dhx4 = { version: "5.0.2", skin: null, skinDetect: function (a) { var c = Math.floor(dhx4.readFromCss(a + "_skin_detect") / 10) * 10; return {10: "dhx_skyblue", 20: "dhx_web", 30: "dhx_terrace", 40: "material"}[c] || null }, readFromCss: function (e, g, h) { var c = document.createElement("DIV"); c.className = e; if (document.body.firstChild != null) { document.body.insertBefore(c, document.body.firstChild) } else { document.body.appendChild(c) } if (typeof(h) == "string") { c.innerHTML = h } var a = c[g || "offsetWidth"]; c.parentNode.removeChild(c); c = null; return a }, lastId: 1, newId: function () { return this.lastId++ }, zim: { data: {}, step: 5, first: function () { return 100 }, last: function () { var e = this.first(); for (var c in this.data) { e = Math.max(e, this.data[c]) } return e }, reserve: function (a) { this.data[a] = this.last() + this.step; return this.data[a] }, clear: function (a) { if (this.data[a] != null) { this.data[a] = null; delete this.data[a] } } }, s2b: function (a) { if (typeof(a) == "string") { a = a.toLowerCase() } return (a == true || a == 1 || a == "true" || a == "1" || a == "yes" || a == "y" || a == "on") }, s2j: function (s) { var obj = null; dhx4.temp = null; try { eval("dhx4.temp=" + s) } catch (e) { dhx4.temp = null } obj = dhx4.temp; dhx4.temp = null; return obj }, absLeft: function (a) { if (typeof(a) == "string") { a = document.getElementById(a) } return this.getOffset(a).left }, absTop: function (a) { if (typeof(a) == "string") { a = document.getElementById(a) } return this.getOffset(a).top }, _aOfs: function (a) { var e = 0, c = 0; while (a) { e = e + parseInt(a.offsetTop); c = c + parseInt(a.offsetLeft); a = a.offsetParent } return {top: e, left: c} }, _aOfsRect: function (g) { var m = g.getBoundingClientRect(); var n = document.body; var c = document.documentElement; var a = window.pageYOffset || c.scrollTop || n.scrollTop; var h = window.pageXOffset || c.scrollLeft || n.scrollLeft; var l = c.clientTop || n.clientTop || 0; var o = c.clientLeft || n.clientLeft || 0; var r = m.top + a - l; var e = m.left + h - o; return {top: Math.round(r), left: Math.round(e)} }, getOffset: function (a) { if (a.getBoundingClientRect) { return this._aOfsRect(a) } else { return this._aOfs(a) } }, _isObj: function (a) { return (a != null && typeof(a) == "object" && typeof(a.length) == "undefined") }, _copyObj: function (g) { if (this._isObj(g)) { var e = {}; for (var c in g) { if (typeof(g[c]) == "object" && g[c] != null) { e[c] = this._copyObj(g[c]) } else { e[c] = g[c] } } } else { var e = []; for (var c = 0; c < g.length; c++) { if (typeof(g[c]) == "object" && g[c] != null) { e[c] = this._copyObj(g[c]) } else { e[c] = g[c] } } } return e }, screenDim: function () { var a = (navigator.userAgent.indexOf("MSIE") >= 0); var c = {}; c.left = document.body.scrollLeft; c.right = c.left + (window.innerWidth || document.body.clientWidth); c.top = Math.max((a ? document.documentElement : document.getElementsByTagName("html")[0]).scrollTop, document.body.scrollTop); c.bottom = c.top + (a ? Math.max(document.documentElement.clientHeight || 0, document.documentElement.offsetHeight || 0) : window.innerHeight); return c }, selectTextRange: function (h, m, c) { h = (typeof(h) == "string" ? document.getElementById(h) : h); var a = h.value.length; m = Math.max(Math.min(m, a), 0); c = Math.min(c, a); if (h.setSelectionRange) { try { h.setSelectionRange(m, c) } catch (l) { } } else { if (h.createTextRange) { var g = h.createTextRange(); g.moveStart("character", m); g.moveEnd("character", c - a); try { g.select() } catch (l) { } } } }, transData: null, transDetect: function () { if (this.transData == null) { this.transData = {transProp: false, transEv: null}; var e = { MozTransition: "transitionend", WebkitTransition: "webkitTransitionEnd", OTransition: "oTransitionEnd", msTransition: "transitionend", transition: "transitionend" }; for (var c in e) { if (this.transData.transProp == false && document.documentElement.style[c] != null) { this.transData.transProp = c; this.transData.transEv = e[c] } } e = null } return this.transData }, _xmlNodeValue: function (a) { var e = ""; for (var c = 0; c < a.childNodes.length; c++) { e += (a.childNodes[c].nodeValue != null ? a.childNodes[c].nodeValue.toString().replace(/^[\n\r\s]{0,}/, "").replace(/[\n\r\s]{0,}$/, "") : "") } return e } }; //判断是否未ie window.dhx4.isIE = (navigator.userAgent.indexOf("MSIE") >= 0 || navigator.userAgent.indexOf("Trident") >= 0); //判断是否未ie6 window.dhx4.isIE6 = (window.XMLHttpRequest == null && navigator.userAgent.indexOf("MSIE") >= 0); //判断是否未ie7 window.dhx4.isIE7 = (navigator.userAgent.indexOf("MSIE 7.0") >= 0 && navigator.userAgent.indexOf("Trident") < 0); //判断是否未ie8 window.dhx4.isIE8 = (navigator.userAgent.indexOf("MSIE 8.0") >= 0 && navigator.userAgent.indexOf("Trident") >= 0); //判断是否为ie9 window.dhx4.isIE9 = (navigator.userAgent.indexOf("MSIE 9.0") >= 0 && navigator.userAgent.indexOf("Trident") >= 0); //判断是否未ie10 window.dhx4.isIE10 = (navigator.userAgent.indexOf("MSIE 10.0") >= 0 && navigator.userAgent.indexOf("Trident") >= 0 && window.navigator.pointerEnabled != true); //判断是否为ie11 window.dhx4.isIE11 = (navigator.userAgent.indexOf("Trident") >= 0 && window.navigator.pointerEnabled == true); window.dhx4.isEdge = (navigator.userAgent.indexOf("Edge") >= 0); window.dhx4.isOpera = (navigator.userAgent.indexOf("Opera") >= 0); window.dhx4.isChrome = (navigator.userAgent.indexOf("Chrome") >= 0) && !window.dhx4.isEdge; window.dhx4.isKHTML = (navigator.userAgent.indexOf("Safari") >= 0 || navigator.userAgent.indexOf("Konqueror") >= 0) && !window.dhx4.isEdge; window.dhx4.isFF = (navigator.userAgent.indexOf("Firefox") >= 0); window.dhx4.isIPad = (navigator.userAgent.search(/iPad/gi) >= 0); window.dhx4.dnd = { evs: {}, p_en: ((window.dhx4.isIE || window.dhx4.isEdge) && (window.navigator.pointerEnabled || window.navigator.msPointerEnabled)), _mTouch: function (a) { return (window.dhx4.isIE10 && a.pointerType == a.MSPOINTER_TYPE_MOUSE || window.dhx4.isIE11 && a.pointerType == "mouse" || window.dhx4.isEdge && a.pointerType == "mouse") }, _touchOn: function (a) { if (a == null) { a = document.body } a.style.touchAction = a.style.msTouchAction = ""; a = null }, _touchOff: function (a) { if (a == null) { a = document.body } a.style.touchAction = a.style.msTouchAction = "none"; a = null } }; if (window.navigator.pointerEnabled == true) { window.dhx4.dnd.evs = {start: "pointerdown", move: "pointermove", end: "pointerup"} } else { if (window.navigator.msPointerEnabled == true) { window.dhx4.dnd.evs = {start: "MSPointerDown", move: "MSPointerMove", end: "MSPointerUp"} } else { if (typeof(window.addEventListener) != "undefined") { window.dhx4.dnd.evs = {start: "touchstart", move: "touchmove", end: "touchend"} } } } }
相关文章推荐
- dhtmlx5源码解析(二)全局方法分析date&&ajax
- Universal-Image-Loader(UIL)使用方法&流程图&源码分析 ----- 未完
- postgresql源码分析--解析sql--类型系统
- Google Test(GTest)使用方法和源码解析——自定义输出技术的分析和应用
- Google Test(GTest)使用方法和源码解析——Listener技术分析和应用
- Google Test(GTest)使用方法和源码解析——死亡测试技术分析和应用
- 当html中存在url中如: onclick="toView('参数1')", 参数1是特别字符,如&asop;"' "等时,浏览器解析时会报错。解决方法如文中描述
- 四大常见XML类型的生成和解析方法详解(介绍+优缺点对比+示例+说明)==> 简单实用
- MapReduce中一次reduce方法的调用中key的值不断变化分析及源码解析
- jQuery源码分析之数据类型判断方法——$.type()
- Google Test(GTest)使用方法和源码解析——参数自动填充技术分析和应用
- 原型(prototype)相关方法,jquery类型判断源码分析。
- 转:关于"复杂类型声明"的分析方法
- Elasticsearch源码分析八--如何根据查询语句确定查询类型并解析查询语句
- Google Test(GTest)使用方法和源码解析——结果统计机制分析
- 微信逆向之——静态分析利用微信源码解析field_lvbuff字段(blob类型)
- C#中Queue<T>类的使用以及部分方法的源码分析
- Android View系统源码分析(四)—— 各种消息监测的基本实现方法&View.dispatchTouchEvent()
- print()方法对char类型数组自动遍历输出源码分析
- Google Test(GTest)使用方法和源码解析——预处理技术分析和应用