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

最新推荐文章于 2024-05-25 14:42:47 发布

飞天代码

最新推荐文章于 2024-05-25 14:42:47 发布

阅读量1k

点赞数

分类专栏： dhtmlx 文章标签： dhtmlx

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/75666759

版权

dhtmlx 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

飞天代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
dhtmlx5源码解析（一）全局方法分析 dhtmlxValidation&&浏览器类型

dhtmlx是套开源的js全端，公司已经使用了好几年，一直没抽空仔细看看源码，为了react控件封装必须先读取一遍源码。把dhtmlx.js解压缩后，代码大概是7万行代码，吓坏本宝宝了。这节先分析下它的dhtmlxValidation代码。if (!window.dhtmlxValidation) { dhtmlxValidation = function () { }; dhtmlxV
复制链接

扫一扫