<p style="text-align:center"><img src="https://simg.open-open.com/show/4ae5a64ae5eb0e6a349a71f1b341bf7f.jpg"></p>    <p>前言</p>    <p>因为工作中经常用到这些方法，所有便把这些方法进行了总结。</p>    <p>JavaScript</p>    <p>1. type 类型判断</p>    <pre>  <code class="language-javascript">isString (o) { //是否字符串        return Object.prototype.toString.call(o).slice(8, -1) === 'String'    }      isNumber (o) { //是否数字        return Object.prototype.toString.call(o).slice(8, -1) === 'Number'    }      isObj (o) { //是否对象        return Object.prototype.toString.call(o).slice(8, -1) === 'Object'    }      isArray (o) { //是否数组        return Object.prototype.toString.call(o).slice(8, -1) === 'Array'    }    isDate (o) { //是否时间        return Object.prototype.toString.call(o).slice(8, -1) === 'Date'    }    isBoolean (o) { //是否boolean        return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'    }    isFunction (o) { //是否函数        return Object.prototype.toString.call(o).slice(8, -1) === 'Function'    }    isNull (o) { //是否为null        return Object.prototype.toString.call(o).slice(8, -1) === 'Null'    }    isUndefined (o) { //是否undefined        return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'    }    isFalse (o) {        if (!o || o === 'null' || o === 'undefined' || o === 'false' || o === 'NaN') return true           return false    }      isTrue (o) {        return !this.isFalse(o)    }      isIos () {        var u = navigator.userAgent;        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机            // return "Android";            return false        } else if (u.indexOf('iPhone') > -1) {//苹果手机            // return "iPhone";            return true        } else if (u.indexOf('iPad') > -1) {//iPad            // return "iPad";            return false        } else if (u.indexOf('Windows Phone') > -1) {//winphone手机            // return "Windows Phone";            return false        }else{            return false        }    }      isPC () { //是否为PC端        var userAgentInfo = navigator.userAgent;        var Agents = ["Android", "iPhone",                    "SymbianOS", "Windows Phone",                    "iPad", "iPod"];        var flag = true;        for (var v = 0; v < Agents.length; v++) {            if (userAgentInfo.indexOf(Agents[v]) > 0) {                flag = false;                break;            }        }        return flag;    }      browserType(){        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串        var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器        var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器        var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器        var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器        var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器        if (isIE) {            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");            reIE.test(userAgent);            var fIEVersion = parseFloat(RegExp["$1"]);            if(fIEVersion == 7) return "IE7"            else if(fIEVersion == 8) return "IE8";            else if(fIEVersion == 9) return "IE9";            else if(fIEVersion == 10) return "IE10";            else if(fIEVersion == 11) return "IE11";            else return "IE7以下"//IE版本过低        }          if (isFF) return "FF";        if (isOpera) return "Opera";        if (isEdge) return "Edge";        if (isSafari) return "Safari";        if (isChrome) return "Chrome";    }      checkStr (str, type) {        switch (type) {            case 'phone':   //手机号码                return /^1[3|4|5|7|8][0-9]{9}$/.test(str);            case 'tel':     //座机                return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);            case 'card':    //身份证                return /^\d{15}|\d{18}$/.test(str);            case 'pwd':     //密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线                return /^[a-zA-Z]\w{5,17}$/.test(str)            case 'postal':  //邮政编码                return /[1-9]\d{5}(?!\d)/.test(str);            case 'QQ':      //QQ号                return /^[1-9][0-9]{4,9}$/.test(str);           case 'email':   //邮箱                return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);            case 'money':   //金额(小数点2位)                return /^\d*(?:\.\d{0,2})?$/.test(str);            case 'URL':     //网址                return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)            case 'IP':      //IP                return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);            case 'date':    //日期时间                return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)            case 'number':  //数字                return /^[0-9]$/.test(str);            case 'english': //英文                return /^[a-zA-Z]+$/.test(str);            case 'chinese': //中文                return /^[\u4E00-\u9FA5]+$/.test(str);            case 'lower':   //小写                return /^[a-z]+$/.test(str);            case 'upper':   //大写                return /^[A-Z]+$/.test(str);            case 'HTML':    //HTML标记                return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);            default:                return true;        }    }   </code></pre>    <p>2. Date</p>    <pre>  <code class="language-javascript">/**     * 格式化时间     *      * @param  {time} 时间     * @param  {cFormat} 格式     * @return {String} 字符串     *     * @example formatTime('2018-1-29', '{y}/{m}/{d} {h}:{i}:{s}') // -> 2018/01/29 00:00:00     */    formatTime(time, cFormat) {       if (arguments.length === 0) return null        if ((time + '').length === 10) {            time = +time * 1000        }           var format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}', date        if (typeof time === 'object') {            date = time        } else {            date = new Date(time)        }           var formatObj = {            y: date.getFullYear(),            m: date.getMonth() + 1,            d: date.getDate(),            h: date.getHours(),            i: date.getMinutes(),            s: date.getSeconds(),            a: date.getDay()        }          var time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {            var value = formatObj[key]            if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]            if (result.length > 0 && value < 10) {                value = '0' + value            }            return value || 0        })        return time_str    }      /**     * 返回指定长度的月份集合     *      * @param  {time} 时间     * @param  {len} 长度     * @param  {direction} 方向：  1: 前几个月;  2: 后几个月;  3:前后几个月  默认 3     * @return {Array} 数组     *      * @example   getMonths('2018-1-29', 6, 1)  // ->  ["2018-1", "2017-12", "2017-11", "2017-10", "2017-9", "2017-8", "2017-7"]     */      getMonths(time, len, direction) {        var mm = new Date(time).getMonth(),            yy = new Date(time).getFullYear(),            direction = isNaN(direction) ? 3 : direction,            index = mm;        var cutMonth = function(index) {            if ( index <= len && index >= -len) {                return direction === 1 ? formatPre(index).concat(cutMonth(++index)):                    direction === 2 ? formatNext(index).concat(cutMonth(++index)):formatCurr(index).concat(cutMonth(++index))            }            return []        }        var formatNext = function(i) {            var y = Math.floor(i/12),               m = i%12            return [yy+y + '-' + (m+1)]        }          var formatPre = function(i) {            var y = Math.ceil(i/12),                m = i%12            m = m===0 ? 12 : m            return [yy-y + '-' + (13 - m)]        }        var formatCurr = function(i) {            var y = Math.floor(i/12),                yNext = Math.ceil(i/12),                m = i%12,                mNext = m===0 ? 12 : m            return [yy-yNext + '-' + (13 - mNext),yy+y + '-' + (m+1)]        }       // 数组去重        var unique = function(arr) {            if ( Array.hasOwnProperty('from') ) {                return Array.from(new Set(arr));            }else{                var n = {},r=[];                 for(var i = 0; i < arr.length; i++){                    if (!n[arr[i]]){                        n[arr[i]] = true;                         r.push(arr[i]);                    }                }                return r;            }        }        return direction !== 3 ? cutMonth(index) : unique(cutMonth(index).sort(function(t1, t2){            return new Date(t1).getTime() - new Date(t2).getTime()        }))    }       /**     * 返回指定长度的天数集合     *      * @param  {time} 时间    * @param  {len} 长度     * @param  {direction} 方向： 1: 前几天;  2: 后几天;  3:前后几天  默认 3     * @return {Array} 数组     *     * @example date.getDays('2018-1-29', 6) // -> ["2018-1-26", "2018-1-27", "2018-1-28", "2018-1-29", "2018-1-30", "2018-1-31", "2018-2-1"]     */    getDays(time, len, diretion) {        var tt = new Date(time)        var getDay = function(day) {            var t = new Date(time)            t.setDate(t.getDate() + day)            var m = t.getMonth()+1            return t.getFullYear()+'-'+m+'-'+t.getDate()        }        var arr = []        if (diretion === 1) {            for (var i = 1; i <= len; i++) {                arr.unshift(getDay(-i))            }        }else if(diretion === 2) {            for (var i = 1; i <= len; i++) {                arr.push(getDay(i))            }        }else {            for (var i = 1; i <= len; i++) {                arr.unshift(getDay(-i))            }            arr.push(tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate())            for (var i = 1; i <= len; i++) {                arr.push(getDay(i))            }        }        return diretion === 1 ? arr.concat([tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()]) :            diretion === 2 ? [tt.getFullYear()+'-'+(tt.getMonth()+1)+'-'+tt.getDate()].concat(arr) : arr    }   /**     * @param  {s} 秒数     * @return {String} 字符串      *     * @example formatHMS(3610) // -> 1h0m10s     */    formatHMS (s) {        var str = ''        if (s > 3600) {            str = Math.floor(s/3600)+'h'+Math.floor(s%3600/60)+'m'+s%60+'s'       }else if(s > 60) {            str = Math.floor(s/60)+'m'+s%60+'s'        }else{            str = s%60+'s'        }        return str    }       /*获取某月有多少天*/    getMonthOfDay (time) {        var date = new Date(time)        var year = date.getFullYear()        var mouth = date.getMonth() + 1        var days           //当月份为二月时，根据闰年还是非闰年判断天数        if (mouth == 2) {            days = year % 4 == 0 ? 29 : 28        } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {            //月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；           days = 31        } else {            //其他月份，天数为：30.            days = 30        }        return days    }      /*获取某年有多少天*/    getYearOfDay (time) {        var firstDayYear = this.getFirstDayOfYear(time);        var lastDayYear = this.getLastDayOfYear(time);        var numSecond = (new Date(lastDayYear).getTime() - new Date(firstDayYear).getTime())/1000;        return Math.ceil(numSecond/(24*3600));    }   /*获取某年的第一天*/    getFirstDayOfYear (time) {        var year = new Date(time).getFullYear();        return year + "-01-01 00:00:00";    }        /*获取某年最后一天*/    getLastDayOfYear (time) {        var year = new Date(time).getFullYear();        var dateString = year + "-12-01 00:00:00";        var endDay = this.getMonthOfDay(dateString);       return year + "-12-" + endDay + " 23:59:59";    }      /*获取某个日期是当年中的第几天*/    getDayOfYear (time) {        var firstDayYear = this.getFirstDayOfYear(time);       var numSecond = (new Date(time).getTime() - new Date(firstDayYear).getTime())/1000;        return Math.ceil(numSecond/(24*3600));    }       /*获取某个日期在这一年的第几周*/    getDayOfYearWeek (time) {        var numdays = this.getDayOfYear(time);        return Math.ceil(numdays / 7);    }   </code></pre>    <p>3. Array</p>    <pre>  <code class="language-javascript">/*判断一个元素是否在数组中*/    contains (arr, val) {        return arr.indexOf(val) != -1 ? true : false;    }      /**     * @param  {arr} 数组     * @param  {fn} 回调函数     * @return {undefined}     */    each (arr, fn) {        fn = fn || Function;        var a = [];        var args = Array.prototype.slice.call(arguments, 1);        for(var i = 0; i < arr.length; i++) {            var res = fn.apply(arr, [arr[i], i].concat(args));            if(res != null) a.push(res);        }    }       /**     * @param  {arr} 数组     * @param  {fn} 回调函数     * @param  {thisObj} this指向     * @return {Array}      */    map (arr, fn, thisObj) {        var scope = thisObj || window;        var a = [];        for(var i = 0, j = arr.length; i < j; ++i) {            var res = fn.call(scope, arr[i], i, this);            if(res != null) a.push(res);        }        return a;    }      /**     * @param  {arr} 数组     * @param  {type} 1：从小到大   2：从大到小   3：随机     * @return {Array}     */    sort (arr, type = 1) {        return arr.sort( (a, b) => {            switch(type) {                case 1:                    return a - b;                case 2:                    return b - a;                case 3:                    return Math.random() - 0.5;                default:                    return arr;            }        })    }        /*去重*/    unique (arr) {       if ( Array.hasOwnProperty('from') ) {            return Array.from(new Set(arr));        }else{            var n = {},r=[];             for(var i = 0; i < arr.length; i++){                if (!n[arr[i]]){                    n[arr[i]] = true;                     r.push(arr[i]);                }            }            return r;        }    }       /*求两个集合的并集*/    union (a, b) {        var newArr = a.concat(b);        return this.unique(newArr);    }       /*求两个集合的交集*/    intersect (a, b) {        var _this = this;        a = this.unique(a);        return this.map(a, function(o) {            return _this.contains(b, o) ? o : null;        });    }      /*删除其中一个元素*/    remove (arr, ele) {        var index = arr.indexOf(ele);        if(index > -1) {            arr.splice(index, 1);        }        return arr;    }      /*将类数组转换为数组的方法*/    formArray (ary) {        var arr = [];        if(Array.isArray(ary)) {            arr = ary;        } else {            arr = Array.prototype.slice.call(ary);        };        return arr;    }       /*最大值*/    max (arr) {        return Math.max.apply(null, arr);    }       /*最小值*/    min (arr) {        return Math.min.apply(null, arr);    }       /*求和*/    sum (arr) {        return arr.reduce( (pre, cur) => {            return pre + cur        })    }        /*平均值*/    average (arr) {        return this.sum(arr)/arr.length    }   </code></pre>    <p>4. String 字符串操作</p>    <pre>  <code class="language-javascript">/**       * 去除空格       * @param  {str}       * @param  {type}        *       type:  1-所有空格  2-前后空格  3-前空格 4-后空格       * @return {String}       */      trim (str, type) {          type = type || 1          switch (type) {              case 1:                  return str.replace(/\s+/g, "");              case 2:                  return str.replace(/(^\s*)|(\s*$)/g, "");              case 3:                  return str.replace(/(^\s*)/g, "");              case 4:                  return str.replace(/(\s*$)/g, "");              default:                return str;        }    }       /**       * @param  {str}        * @param  {type}       *       type:  1:首字母大写  2：首页母小写  3：大小写转换  4：全部大写  5：全部小写       * @return {String}       */      changeCase (str, type) {          type = type || 4          switch (type) {              case 1:                return str.replace(/\b\w+\b/g, function (word) {                    return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();                 });              case 2:                return str.replace(/\b\w+\b/g, function (word) {                      return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();                });              case 3:               return str.split('').map( function(word){                      if (/[a-z]/.test(word)) {                          return word.toUpperCase();                      }else{                          return word.toLowerCase()                      }                  }).join('')              case 4:                  return str.toUpperCase();              case 5:                return str.toLowerCase();              default:                return str;          }    }          /*        检测密码强度    */      checkPwd (str) {          var Lv = 0;          if (str.length < 6) {            return Lv        }          if (/[0-9]/.test(str)) {            Lv++        }          if (/[a-z]/.test(str)) {            Lv++        }          if (/[A-Z]/.test(str)) {            Lv++        }          if (/[\.|-|_]/.test(str)) {            Lv++        }          return Lv;      }          /*过滤html代码(把<>转换)*/      filterTag (str) {          str = str.replace(/&/ig, "&");        str = str.replace(/</ig, "<");        str = str.replace(/>/ig, ">");        str = str.replace(" ", " ");        return str;    }   </code></pre>    <p>5. Number</p>    <pre>  <code class="language-javascript">/*随机数范围*/      random (min, max) {          if (arguments.length === 2) {              return Math.floor(min + Math.random() * ( (max+1) - min ))          }else{              return null;          }                }            /*将阿拉伯数字翻译成中文的大写数字*/      numberToChinese (num) {          var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");          var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");          var a = ("" + num).replace(/(^0*)/g, "").split("."),              k = 0,              re = "";          for(var i = a[0].length - 1; i >= 0; i--) {              switch(k) {                  case 0:                      re = BB[7] + re;                      break;                  case 4:                      if(!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")                          .test(a[0]))                          re = BB[4] + re;                      break;                  case 8:                      re = BB[5] + re;                      BB[7] = BB[5];                      k = 0;                      break;              }              if(k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)                  re = AA[0] + re;              if(a[0].charAt(i) != 0)                  re = AA[a[0].charAt(i)] + BB[k % 4] + re;              k++;          }                if(a.length > 1) // 加上小数部分(如果有小数部分)          {              re += BB[6];              for(var i = 0; i < a[1].length; i++)                  re += AA[a[1].charAt(i)];          }          if(re == '一十')              re = "十";          if(re.match(/^一/) && re.length == 3)              re = re.replace("一", "");          return re;      }            /*将数字转换为大写金额*/      changeToChinese (Num) {              //判断如果传递进来的不是字符的话转换为字符              if(typeof Num == "number") {                  Num = new String(Num);              };              Num = Num.replace(/,/g, "") //替换tomoney()中的“,”              Num = Num.replace(/ /g, "") //替换tomoney()中的空格              Num = Num.replace(/￥/g, "") //替换掉可能出现的￥字符              if(isNaN(Num)) { //验证输入的字符是否为数字                  //alert("请检查小写金额是否正确");                  return "";              };              //字符处理完毕后开始转换，采用前后两部分分别转换              var part = String(Num).split(".");              var newchar = "";              //小数点前进行转化              for(var i = part[0].length - 1; i >= 0; i--) {                  if(part[0].length > 10) {                      return "";                      //若数量超过拾亿单位，提示                  }                  var tmpnewchar = ""                  var perchar = part[0].charAt(i);                  switch(perchar) {                      case "0":                          tmpnewchar = "零" + tmpnewchar;                          break;                      case "1":                          tmpnewchar = "壹" + tmpnewchar;                          break;                      case "2":                          tmpnewchar = "贰" + tmpnewchar;                          break;                      case "3":                          tmpnewchar = "叁" + tmpnewchar;                          break;                      case "4":                          tmpnewchar = "肆" + tmpnewchar;                          break;                      case "5":                          tmpnewchar = "伍" + tmpnewchar;                          break;                      case "6":                          tmpnewchar = "陆" + tmpnewchar;                          break;                      case "7":                          tmpnewchar = "柒" + tmpnewchar;                          break;                      case "8":                          tmpnewchar = "捌" + tmpnewchar;                          break;                      case "9":                          tmpnewchar = "玖" + tmpnewchar;                          break;                  }                  switch(part[0].length - i - 1) {                      case 0:                          tmpnewchar = tmpnewchar + "元";                          break;                      case 1:                          if(perchar != 0) tmpnewchar = tmpnewchar + "拾";                          break;                      case 2:                          if(perchar != 0) tmpnewchar = tmpnewchar + "佰";                          break;                      case 3:                          if(perchar != 0) tmpnewchar = tmpnewchar + "仟";                          break;                      case 4:                          tmpnewchar = tmpnewchar + "万";                          break;                      case 5:                          if(perchar != 0) tmpnewchar = tmpnewchar + "拾";                          break;                      case 6:                          if(perchar != 0) tmpnewchar = tmpnewchar + "佰";                          break;                      case 7:                          if(perchar != 0) tmpnewchar = tmpnewchar + "仟";                          break;                      case 8:                          tmpnewchar = tmpnewchar + "亿";                          break;                      case 9:                          tmpnewchar = tmpnewchar + "拾";                          break;                  }                  var newchar = tmpnewchar + newchar;              }              //小数点之后进行转化              if(Num.indexOf(".") != -1) {                  if(part[1].length > 2) {                      // alert("小数点之后只能保留两位,系统将自动截断");                      part[1] = part[1].substr(0, 2)                  }                  for(i = 0; i < part[1].length; i++) {                      tmpnewchar = ""                      perchar = part[1].charAt(i)                      switch(perchar) {                          case "0":                              tmpnewchar = "零" + tmpnewchar;                              break;                          case "1":                              tmpnewchar = "壹" + tmpnewchar;                              break;                          case "2":                              tmpnewchar = "贰" + tmpnewchar;                              break;                          case "3":                              tmpnewchar = "叁" + tmpnewchar;                              break;                          case "4":                              tmpnewchar = "肆" + tmpnewchar;                              break;                          case "5":                              tmpnewchar = "伍" + tmpnewchar;                              break;                          case "6":                              tmpnewchar = "陆" + tmpnewchar;                              break;                          case "7":                              tmpnewchar = "柒" + tmpnewchar;                              break;                          case "8":                              tmpnewchar = "捌" + tmpnewchar;                              break;                          case "9":                              tmpnewchar = "玖" + tmpnewchar;                              break;                      }                      if(i == 0) tmpnewchar = tmpnewchar + "角";                      if(i == 1) tmpnewchar = tmpnewchar + "分";                      newchar = newchar + tmpnewchar;                  }              }              //替换所有无用汉字              while(newchar.search("零零") != -1)                  newchar = newchar.replace("零零", "零");              newchar = newchar.replace("零亿", "亿");              newchar = newchar.replace("亿万", "亿");              newchar = newchar.replace("零万", "万");              newchar = newchar.replace("零元", "元");              newchar = newchar.replace("零角", "");              newchar = newchar.replace("零分", "");              if(newchar.charAt(newchar.length - 1) == "元") {                  newchar = newchar + "整"              }              return newchar;          }   </code></pre>    <p>6. Http</p>    <pre>  <code class="language-javascript">/**       * @param  {setting}       */      ajax(setting){          //设置参数的初始值          var opts={              method: (setting.method || "GET").toUpperCase(), //请求方式              url: setting.url || "", // 请求地址              async: setting.async || true, // 是否异步              dataType: setting.dataType || "json", // 解析方式              data: setting.data || "", // 参数              success: setting.success || function(){}, // 请求成功回调              error: setting.error || function(){} // 请求失败回调          }                // 参数格式化          function params_format (obj) {              var str = ''              for (var i in obj) {                  str += i + '=' + obj[i] + '&'              }              return str.split('').slice(0, -1).join('')          }                // 创建ajax对象          var xhr=new XMLHttpRequest();                // 连接服务器open(方法GET/POST，请求地址， 异步传输)          if(opts.method == 'GET'){              xhr.open(opts.method, opts.url + "?" + params_format(opts.data), opts.async);              xhr.send();          }else{              xhr.open(opts.method, opts.url, opts.async);              xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");              xhr.send(opts.data);          }                    /*          ** 每当readyState改变时，就会触发onreadystatechange事件          ** readyState属性存储有XMLHttpRequest的状态信息          ** 0 ：请求未初始化          ** 1 ：服务器连接已建立          ** 2 ：请求已接受          ** 3 : 请求处理中          ** 4 ：请求已完成，且相应就绪          */          xhr.onreadystatechange = function() {              if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {                  switch(opts.dataType){                      case "json":                          var json = JSON.parse(xhr.responseText);                          opts.success(json);                          break;                      case "xml":                          opts.success(xhr.responseXML);                          break;                      default:                          opts.success(xhr.responseText);                          break;                  }              }          }                xhr.onerror = function(err) {              opts.error(err);          }      }            /**       * @param  {url}       * @param  {setting}       * @return {Promise}       */      fetch(url, setting) {          //设置参数的初始值          let opts={              method: (setting.method || 'GET').toUpperCase(), //请求方式              headers : setting.headers  || {}, // 请求头设置              credentials : setting.credentials  || true, // 设置cookie是否一起发送              body: setting.body || {},              mode : setting.mode  || 'no-cors', // 可以设置 cors, no-cors, same-origin              redirect : setting.redirect  || 'follow', // follow, error, manual              cache : setting.cache  || 'default' // 设置 cache 模式 (default, reload, no-cache)          }          let dataType = setting.dataType || "json", // 解析方式                data = setting.data || "" // 参数                // 参数格式化          function params_format (obj) {              var str = ''              for (var i in obj) {                  str += `${i}=${obj[i]}&`              }              return str.split('').slice(0, -1).join('')          }                if (opts.method === 'GET') {              url = url + (data?`?${params_format(data)}`:'')          }else{              setting.body = data || {}          }                return new Promise( (resolve, reject) => {              fetch(url, opts).then( async res => {                  let data = dataType === 'text' ? await res.text() :                      dataType === 'blob' ? await res.blob() : await res.json()                   resolve(data)              }).catch( e => {                  reject(e)              })          })          }   </code></pre>    <p>7. DOM</p>    <pre>  <code class="language-javascript">$ (selector){           var type = selector.substring(0, 1);          if (type === '#') {              if (document.querySelecotor) return document.querySelector(selector)                  return document.getElementById(selector.substring(1))                        }else if (type === '.') {              if (document.querySelecotorAll) return document.querySelectorAll(selector)                  return document.getElementsByClassName(selector.substring(1))          }else{              return document['querySelectorAll' ? 'querySelectorAll':'getElementsByTagName'](selector)          }      }             /*检测类名*/      hasClass (ele, name) {          return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));      }            /*添加类名*/      addClass (ele, name) {          if (!this.hasClass(ele, name)) ele.className += " " + name;      }            /*删除类名*/      removeClass (ele, name) {          if (this.hasClass(ele, name)) {              var reg = new RegExp('(\\s|^)' + name + '(\\s|$)');              ele.className = ele.className.replace(reg, '');          }      }            /*替换类名*/      replaceClass (ele, newName, oldName) {          this.removeClass(ele, oldName);          this.addClass(ele, newName);      }            /*获取兄弟节点*/      siblings (ele) {          console.log(ele.parentNode)          var chid = ele.parentNode.children,eleMatch = [];           for(var i = 0, len = chid.length; i < len; i ++){               if(chid[i] != ele){                   eleMatch.push(chid[i]);               }           }           return eleMatch;      }            /*获取行间样式属性*/      getByStyle (obj,name){          if(obj.currentStyle){              return  obj.currentStyle[name];          }else{              return  getComputedStyle(obj,false)[name];          }      }   </code></pre>    <p>8. Storage 储存操作</p>    <pre>  <code class="language-javascript">class StorageFn {          constructor () {              this.ls = window.localStorage;              this.ss = window.sessionStorage;          }           /*-----------------cookie---------------------*/          /*设置cookie*/          setCookie (name, value, day) {              var setting = arguments[0];              if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){                  for (var i in setting) {                      var oDate = new Date();                      oDate.setDate(oDate.getDate() + day);                      document.cookie = i + '=' + setting[i] + ';expires=' + oDate;                  }              }else{                  var oDate = new Date();                  oDate.setDate(oDate.getDate() + day);                  document.cookie = name + '=' + value + ';expires=' + oDate;              }               }              /*获取cookie*/          getCookie (name) {              var arr = document.cookie.split('; ');              for (var i = 0; i < arr.length; i++) {                  var arr2 = arr[i].split('=');                  if (arr2[0] == name) {                      return arr2[1];                  }            }            return '';          }                /*删除cookie*/          removeCookie (name) {              this.setCookie(name, 1, -1);          }      /*-----------------localStorage---------------------*/          /*设置localStorage*/          setLocal(key, val) {              var setting = arguments[0];              if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){                  for(var i in setting){                      this.ls.setItem(i, JSON.stringify(setting[i]))                  }              }else{                  this.ls.setItem(key, JSON.stringify(val))              }                  }              /*获取localStorage*/          getLocal(key) {              if (key) return JSON.parse(this.ls.getItem(key))              return null;          }          /*移除localStorage*/          removeLocal(key) {              this.ls.removeItem(key)          }          /*移除所有localStorage*/          clearLocal() {              this.ls.clear()          }           /*-----------------sessionStorage---------------------*/          /*设置sessionStorage*/          setSession(key, val) {              var setting = arguments[0];              if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){                  for(var i in setting){                    this.ss.setItem(i, JSON.stringify(setting[i]))                }              }else{                this.ss.setItem(key, JSON.stringify(val))            }       }          /*获取sessionStorage*/          getSession(key) {              if (key) return JSON.parse(this.ss.getItem(key))              return null;       }           /*移除sessionStorage*/          removeSession(key) {            this.ss.removeItem(key)        }          /*移除所有sessionStorage*/          clearSession() {              this.ss.clear()          }      }   </code></pre>    <p>9. Other 其它操作</p>    <pre>  <code class="language-javascript">/*获取网址参数*/      getURL(name){          var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");          var r = window.location.search.substr(1).match(reg);          if(r!=null) return  r[2]; return null;      }      /*获取全部url参数,并转换成json对象*/      getUrlAllParams (url) {          var url = url ? url : window.location.href;          var _pa = url.substring(url.indexOf('?') + 1),              _arrS = _pa.split('&'),              _rs = {};          for (var i = 0, _len = _arrS.length; i < _len; i++) {              var pos = _arrS[i].indexOf('=');              if (pos == -1) {                continue;            }              var name = _arrS[i].substring(0, pos),                  value = window.decodeURIComponent(_arrS[i].substring(pos + 1));              _rs[name] = value;          }        return _rs;    }      /*删除url指定参数，返回url*/      delParamsUrl(url, name){          var baseUrl = url.split('?')[0] + '?';          var query = url.split('?')[1];          if (query.indexOf(name)>-1) {              var obj = {}              var arr = query.split("&");              for (var i = 0; i < arr.length; i++) {                  arr[i] = arr[i].split("=");                  obj[arr[i][0]] = arr[i][1];              };              delete obj[name];              var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");              return url          }else{            return url;        }    }      /*获取十六进制随机颜色*/      getRandomColor () {          return '#' + (function(h) {              return new Array(7 - h.length).join("0") + h;          })((Math.random() * 0x1000000 << 0).toString(16));      }      /*图片加载*/      imgLoadAll(arr,callback){          var arrImg = [];           for (var i = 0; i < arr.length; i++) {              var img = new Image();              img.src = arr[i];              img.onload = function(){                  arrImg.push(this);                  if (arrImg.length == arr.length) {                      callback && callback();                  }            }        }    }      /*音频加载*/      loadAudio(src, callback) {          var audio = new Audio(src);          audio.onloadedmetadata = callback;          audio.src = src;      }      /*DOM转字符串*/      domToStirng(htmlDOM){          var div= document.createElement("div");          div.appendChild(htmlDOM);          return div.innerHTML      }      /*字符串转DOM*/      stringToDom(htmlString){          var div= document.createElement("div");          div.innerHTML=htmlString;          return div.children[0];      }       /**       * 光标所在位置插入字符，并设置光标位置       *        * @param {dom} 输入框       * @param {val} 插入的值       * @param {posLen} 光标位置处在 插入的值的哪个位置       */      setCursorPosition (dom,val,posLen) {          var cursorPosition = 0;          if(dom.selectionStart){              cursorPosition = dom.selectionStart;          }          this.insertAtCursor(dom,val);          dom.focus();          console.log(posLen)          dom.setSelectionRange(dom.value.length,cursorPosition + (posLen || val.length));      }            /*光标所在位置插入字符*/      insertAtCursor(dom, val) {          if (document.selection){              dom.focus();              sel = document.selection.createRange();              sel.text = val;              sel.select();          }else if (dom.selectionStart || dom.selectionStart == '0'){              let startPos = dom.selectionStart;              let endPos = dom.selectionEnd;              let restoreTop = dom.scrollTop;              dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length);              if (restoreTop > 0){                  dom.scrollTop = restoreTop;              }              dom.focus();              dom.selectionStart = startPos + val.length;              dom.selectionEnd = startPos + val.length;          } else {              dom.value += val;              dom.focus();          }      }  </code></pre>    <p>CSS</p>    <p>1. pc-reset PC样式初始化</p>    <pre>  <code class="language-javascript">/* normalize.css */      html {        line-height: 1.15;        /* 1 */        -ms-text-size-adjust: 100%;        /* 2 */        -webkit-text-size-adjust: 100%;        /* 2 */      }            body {        margin: 0;      }            article,      aside,      footer,      header,      nav,      section {        display: block;      }            h1 {        font-size: 2em;        margin: 0.67em 0;      }            figcaption,      figure,      main {        /* 1 */        display: block;      }            figure {        margin: 1em 40px;      }            hr {        box-sizing: content-box;        /* 1 */        height: 0;        /* 1 */        overflow: visible;        /* 2 */      }            pre {        font-family: monospace, monospace;        /* 1 */        font-size: 1em;        /* 2 */      }            a {        background-color: transparent;        /* 1 */        -webkit-text-decoration-skip: objects;        /* 2 */      }            abbr[title] {        border-bottom: none;        /* 1 */        text-decoration: underline;        /* 2 */        text-decoration: underline dotted;        /* 2 */      }            b,      strong {        font-weight: inherit;      }            b,      strong {        font-weight: bolder;      }            code,      kbd,      samp {        font-family: monospace, monospace;        /* 1 */        font-size: 1em;        /* 2 */      }            dfn {        font-style: italic;      }            mark {        background-color: #ff0;        color: #000;      }            small {        font-size: 80%;      }            sub,      sup {        font-size: 75%;        line-height: 0;        position: relative;        vertical-align: baseline;      }            sub {        bottom: -0.25em;      }            sup {        top: -0.5em;      }            audio,      video {        display: inline-block;      }            audio:not([controls]) {        display: none;        height: 0;      }            img {        border-style: none;      }            svg:not(:root) {        overflow: hidden;      }            button,      input,      optgroup,      select,      textarea {        font-family: sans-serif;        /* 1 */        font-size: 100%;        /* 1 */        line-height: 1.15;        /* 1 */        margin: 0;        /* 2 */      }            button,      input {        /* 1 */        overflow: visible;      }            button,      select {        /* 1 */        text-transform: none;      }            button,      html [type="button"],            /* 1 */            [type="reset"],      [type="submit"] {        -webkit-appearance: button;        /* 2 */      }            button::-moz-focus-inner,      [type="button"]::-moz-focus-inner,      [type="reset"]::-moz-focus-inner,      [type="submit"]::-moz-focus-inner {        border-style: none;        padding: 0;      }            button:-moz-focusring,      [type="button"]:-moz-focusring,      [type="reset"]:-moz-focusring,      [type="submit"]:-moz-focusring {        outline: 1px dotted ButtonText;      }            fieldset {        padding: 0.35em 0.75em 0.625em;      }            legend {        box-sizing: border-box;        /* 1 */        color: inherit;        /* 2 */        display: table;        /* 1 */        max-width: 100%;        /* 1 */        padding: 0;        /* 3 */        white-space: normal;        /* 1 */      }            progress {        display: inline-block;        /* 1 */        vertical-align: baseline;        /* 2 */      }            textarea {        overflow: auto;      }            [type="checkbox"],      [type="radio"] {        box-sizing: border-box;        /* 1 */        padding: 0;        /* 2 */      }            [type="number"]::-webkit-inner-spin-button,      [type="number"]::-webkit-outer-spin-button {        height: auto;      }            [type="search"] {        -webkit-appearance: textfield;        /* 1 */        outline-offset: -2px;        /* 2 */      }            [type="search"]::-webkit-search-cancel-button,      [type="search"]::-webkit-search-decoration {        -webkit-appearance: none;      }             ::-webkit-file-upload-button {        -webkit-appearance: button;        /* 1 */        font: inherit;        /* 2 */      }            details,            /* 1 */            menu {        display: block;      }            summary {        display: list-item;      }            canvas {        display: inline-block;      }            template {        display: none;      }            [hidden] {        display: none;      }                  /* reset */            html,      body,      h1,      h2,      h3,      h4,      h5,      h6,      div,      dl,      dt,      dd,      ul,      ol,      li,      p,      blockquote,      pre,      hr,      figure,      table,      caption,      th,      td,      form,      fieldset,      legend,      input,      button,      textarea,      menu {        margin: 0;        padding: 0;        box-sizing: border-box;      }   </code></pre>    <p>2. Phone-reset</p>    <pre>  <code class="language-javascript">/* normalize.css */            html {        line-height: 1.15;        /* 1 */        -ms-text-size-adjust: 100%;        /* 2 */        -webkit-text-size-adjust: 100%;        /* 2 */      }            body {        margin: 0;      }            article,      aside,      footer,      header,      nav,      section {        display: block;      }            h1 {        font-size: 2em;        margin: 0.67em 0;      }            figcaption,      figure,      main {        /* 1 */        display: block;      }            figure {        margin: 1em 40px;      }            hr {        box-sizing: content-box;        /* 1 */        height: 0;        /* 1 */        overflow: visible;        /* 2 */      }            pre {        font-family: monospace, monospace;        /* 1 */        font-size: 1em;        /* 2 */      }            a {        background-color: transparent;        /* 1 */        -webkit-text-decoration-skip: objects;        /* 2 */      }            abbr[title] {        border-bottom: none;        /* 1 */        text-decoration: underline;        /* 2 */        text-decoration: underline dotted;        /* 2 */      }            b,      strong {        font-weight: inherit;      }            b,      strong {        font-weight: bolder;      }            code,      kbd,      samp {        font-family: monospace, monospace;        /* 1 */        font-size: 1em;        /* 2 */      }            dfn {        font-style: italic;      }            mark {        background-color: #ff0;        color: #000;      }            small {        font-size: 80%;      }            sub,      sup {        font-size: 75%;        line-height: 0;        position: relative;        vertical-align: baseline;      }            sub {        bottom: -0.25em;      }            sup {        top: -0.5em;      }            audio,      video {        display: inline-block;      }            audio:not([controls]) {        display: none;        height: 0;      }            img {        border-style: none;      }            svg:not(:root) {        overflow: hidden;      }       button,      input,      optgroup,      select,      textarea {        font-family: sans-serif;        /* 1 */        font-size: 100%;        /* 1 */        line-height: 1.15;        /* 1 */        margin: 0;        /* 2 */      }            button,      input {        /* 1 */        overflow: visible;      }            button,      select {        /* 1 */        text-transform: none;      }            button,      html [type="button"],            /* 1 */            [type="reset"],      [type="submit"] {        -webkit-appearance: button;        /* 2 */      }            button::-moz-focus-inner,      [type="button"]::-moz-focus-inner,      [type="reset"]::-moz-focus-inner,      [type="submit"]::-moz-focus-inner {        border-style: none;        padding: 0;      }            button:-moz-focusring,      [type="button"]:-moz-focusring,      [type="reset"]:-moz-focusring,      [type="submit"]:-moz-focusring {        outline: 1px dotted ButtonText;      }            fieldset {        padding: 0.35em 0.75em 0.625em;      }            legend {        box-sizing: border-box;        /* 1 */        color: inherit;        /* 2 */        display: table;        /* 1 */        max-width: 100%;        /* 1 */        padding: 0;        /* 3 */        white-space: normal;        /* 1 */      }            progress {        display: inline-block;        /* 1 */        vertical-align: baseline;        /* 2 */      }            textarea {        overflow: auto;      }            [type="checkbox"],      [type="radio"] {        box-sizing: border-box;        /* 1 */        padding: 0;        /* 2 */      }            [type="number"]::-webkit-inner-spin-button,      [type="number"]::-webkit-outer-spin-button {        height: auto;      }            [type="search"] {        -webkit-appearance: textfield;        /* 1 */        outline-offset: -2px;        /* 2 */      }            [type="search"]::-webkit-search-cancel-button,      [type="search"]::-webkit-search-decoration {        -webkit-appearance: none;      }             ::-webkit-file-upload-button {        -webkit-appearance: button;        /* 1 */        font: inherit;        /* 2 */      }            details,            /* 1 */            menu {        display: block;      }            summary {        display: list-item;      }            canvas {        display: inline-block;      }            template {        display: none;      }            [hidden] {        display: none;      }                  /* reset */            html,      body,      h1,      h2,      h3,      h4,      h5,      h6,      div,      dl,      dt,      dd,      ul,      ol,      li,      p,      blockquote,      pre,      hr,      figure,      table,      caption,      th,      td,      form,      fieldset,      legend,      input,      button,      textarea,      menu {        margin: 0;        padding: 0;        box-sizing: border-box;      }            html,      body {        /* 禁止选中文本 */        -webkit-user-select: none;        user-select: none;        font: Oswald, 'Open Sans', Helvetica, Arial, sans-serif      }                  /* 禁止长按链接与图片弹出菜单 */            a,      img {        -webkit-touch-callout: none;      }                  /*ios android去除自带阴影的样式*/            a,      input {        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);      }            input[type="text"] {        -webkit-appearance: none;      }   </code></pre>    <p>3. 公共样式提取</p>    <pre>  <code class="language-javascript">/* 禁止选中文本 */      .usn{          -webkit-user-select:none;          -moz-user-select:none;          -ms-user-select:none;          -o-user-select:none;          user-select:none;      }      /* 浮动 */      .fl { float: left; }      .fr { float: right; }      .cf { zoom: 1; }      .cf:after {          content:".";          display:block;          clear:both;          visibility:hidden;          height:0;          overflow:hidden;      }            /* 元素类型 */      .db { display: block; }      .dn { display: none; }      .di { display: inline }      .dib {display: inline-block;}      .transparent { opacity: 0 }          /*文字排版、颜色*/      .f12 { font-size:12px }      .f14 { font-size:14px }      .f16 { font-size:16px }      .f18 { font-size:18px }      .f20 { font-size:20px }      .fb { font-weight:bold }      .fn { font-weight:normal }      .t2 { text-indent:2em }      .red,a.red { color:#cc0031 }      .darkblue,a.darkblue { color:#039 }      .gray,a.gray { color:#878787 }      .lh150 { line-height:150% }      .lh180 { line-height:180% }      .lh200 { line-height:200% }      .unl { text-decoration:underline; }      .no_unl { text-decoration:none; }      .tl { text-align: left; }      .tc { text-align: center; }      .tr { text-align: right; }      .tj { text-align: justify; text-justify: inter-ideograph; }      .wn { /* 强制不换行 */        word-wrap:normal;        white-space:nowrap;    }      .wb { /* 强制换行 */        white-space:normal;        word-wrap:break-word;        word-break:break-all;    }      .wp { /* 保持空白序列*/        overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;    }      .wes { /* 多出部分用省略号表示 , 用于一行 */        overflow:hidden;        word-wrap:normal;        white-space:nowrap;        text-overflow:ellipsis;    }      .wes-2 { /* 适用于webkit内核和移动端 */        display: -webkit-box;        -webkit-box-orient: vertical;        -webkit-line-clamp: 2;        overflow: hidden;    }       .wes-3 {        display: -webkit-box;        -webkit-box-orient: vertical;        -webkit-line-clamp: 3;        overflow: hidden;    }      .wes-4 {        display: -webkit-box;        -webkit-box-orient: vertical;        -webkit-line-clamp: 4;        overflow: hidden;    }            /* 溢出样式 */    .ofh { overflow: hidden; }    .ofs {overflow: scroll; }    .ofa {overflow: auto; }    .ofv {overflow: visible; }          /* 定位方式 */    .ps {position: static; }    .pr {position: relative;zoom:1; }    .pa {position: absolute; }    .pf {position: fixed; }          /* 垂直对齐方式 */    .vt {vertical-align: top; }    .vm {vertical-align: middle; }    .vb {vertical-align: bottom; }       /* 鼠标样式 */    .csd {cursor: default; }    .csp {cursor: pointer; }    .csh {cursor: help; }    .csm {cursor: move; }          /* flex布局 */    .df-sb {        display:flex;        align-items: center;        justify-content: space-between;    }      .df-sa {        display:flex;        align-items: center;        justify-content: space-around;    }         /* 垂直居中 */    .df-c {        display: flex;        align-items: center;        justify-content: center;    }      .tb-c {        text-align:center;        display:table-cell;        vertical-align:middle;    }      .ts-c {        position: absolute;        left: 50%; top: 50%;        transform: translate(-50%, -50%);    }      .ts-mc {        position: absolute;        left: 0;right: 0;        bottom: 0; top: 0;        margin: auto;    }          /* 辅助 */    .mask-fixed-wrapper {        width: 100%;        height: 100%;        position: fixed;        left:0;top:0;        background: rgba(0, 0, 0, 0.65);        z-index: 999;    }      .bg-cover {        background-size: cover;        background-repeat: no-repeat;        background-position: center center;    }      .bg-cover-all {        background-size: 100% 100%;        background-repeat: no-repeat;        background-position: center center;    }   </code></pre>    <p>以上都是经常用到的方法</p>    <p> </p>    <p>来自：http://developer.51cto.com/art/201801/565597.htm</p>    <p> </p>