dhtmlx5源码解析（一）全局方法分析 dhtmlxValidation&&浏览器类型

dhtmlx是套收费的js全端，公司已经使用了好几年，一直没抽空仔细看看源码，为了react控件封装必须先读取一遍源码。把dhtmlx.js解压缩后，代码大概是7万行代码，吓坏本宝宝了。

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"}      }    }  }}