原生js封装的常用方法

本是古典何须时尚 2021-09-03 08:06 423阅读 0赞

## JS常用方法 ##

// html字符串转化为dom
    function parseToDOM(str){ 
       var div = document.createElement("div");
       if(typeof str == "string")
           div.innerHTML = str;
       return div.childNodes;
    }
    
    // 获取图片尺寸信息
    function getImgSize (url) { 
      return new Promise((resolve, reject) => { 
        // 创建对象
        const img = new Image();
    
        // 改变图片的src
        img.src = url;
    
        // 加载完成执行
        img.onload = function () { 
        // 打印
          resolve({ 
            url,
            width: img.width,
            height: img.height
          });
        };
      });
    }
    // 1、根据身份证获取信息
    export function getInfoByID(idNum) { 
      const result = { }
      //获取出生日期
      result.birth = idNum.substring(6, 10) + "-" + idNum.substring(10, 12) + "-" + idNum.substring(12, 14);
    
      //获取性别
      result.sex = parseInt(idNum.substr(16, 1)) % 2 === 1 ? '男' : '女'
    
      //获取年龄
      const myDate = new Date();
      const month = myDate.getMonth() + 1;
      const day = myDate.getDate();
      let age = myDate.getFullYear() - idNum.substring(6, 10) - 1;
      if (idNum.substring(10, 12) < month || idNum.substring(10, 12) == month && idNum.substring(12, 14) <= day) { 
        age++;
      }
      result.age = age;
      return result;
    }
    
    // 获取链接参数
     function getUrlQuery() { 
          var sHref = window.location.href;
          var args = sHref.split('?');
          if (args[0] === sHref) { 
            return { };
          }
          var hrefarr = args[1].split('#')[0].split('&');
          var obj = { };
          for (var i = 0; i < hrefarr.length; i++) { 
            hrefarr[i] = hrefarr[i].split('=');
            obj[hrefarr[i][0]] = hrefarr[i][1];
          }
          return obj;
        }
    // 生成星级评分
    const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
    const start = StartScore(3);
    // start => "★★★"
    
    // 基于时间的UUID通过计算当前时间戳、随机数和机器MAC地址得到。由于在算法中使用了MAC地址，这个版本的UUID可以保证在全球范围的唯一性
    export function uuid () { 
      var s = [];
      var hexDigits = '0123456x2134789abcdef';
      for (var i = 0; i < 36; i++) { 
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-';
      var uuid = s.join('');
      return uuid;
    }
    
    // 根据图片大小设置容器的宽高
    export function getAdaptiveSize (w, i, url) { 
      if (!w.width || !w.height) { 
        return { };
      }
      let wrapperStyle = { 
        backgroundImage: `url(${ url})`
      };
    
      if (i.width > i.height) { 
        wrapperStyle = { 
          ...wrapperStyle,
          width: w.width,
          height:  w.width * (i.height / i.width)
        };
      } else { 
        wrapperStyle = { 
          ...wrapperStyle,
          height: 440,
          width: 440 * (i.width / i.height)
        };
      }
    
      return wrapperStyle;
    }
    
    // 设置图片的宽高
    function getAdaptiveSize(width: number, height: number) { 
      let layoutType: '16:9' | '9:16' = '16:9';
    
      // 164px x 292px
      let maxWidth = 292;
      let maxheight = 164;
    
      let wrapperWidth;
      let wrapperheight;
    
      let imgHeight = Math.min(height, maxheight); 
      let imgWidth = Math.ceil(imgHeight * (width / height));
    
      wrapperheight = imgHeight;
      wrapperWidth = Math.min(imgWidth, maxWidth);
    
      let wrapperStyle = { 
        position: 'relative',
        borderRadius: 4,
        overflow: 'hidden',
        width:  wrapperWidth,
        height: wrapperheight,
      };
    
      let imgStyle = { 
        position: 'absolute',
        height: imgHeight,
        width: imgWidth,
        left: imgWidth > wrapperWidth ? Math.ceil((wrapperWidth - imgWidth) / 2) : 0,
        top: 0,
      };
    
      // 9 : 16
      if (width < height) { 
        layoutType = '9:16';
    
        maxWidth = 164;
        maxheight = 292;
    
        imgWidth = Math.min(width, maxWidth); // 限制图片的width
        imgHeight = Math.ceil(imgWidth / (width / height));
    
        wrapperWidth = imgWidth;
        wrapperheight =  Math.min(imgHeight, maxheight)
    
        wrapperStyle = { 
          ...wrapperStyle,
          width: wrapperWidth,
          height: wrapperheight,
        };
    
        imgStyle = { 
          position: 'absolute',
          width: imgWidth,
          height: imgHeight,
          top: imgHeight > wrapperheight ? Math.ceil((maxheight - imgHeight) / 2) : 0,
          left: 0,
        };
      }
      return {  wrapperStyle, imgStyle };
    }

// 判断两个对象的key value是否相等  
export function isObjectValueEqual (a, b) \{  
var aProps = Object.getOwnPropertyNames(a);  
var bProps = Object.getOwnPropertyNames(b);  
if (aProps.length !== bProps.length) \{  
return false;  
\}  
for (var i = 0; i < aProps.length; i++) \{  
var propName = aProps\[i\];

\}  
return true;  
\}

// 高德地图

// 高德地图相关api,调用前需要先引入高德的sdk
    // https://lbs.amap.com/api
    
    /** * 高德IP定位 * @param {*} tagId 容器的id 必须 * @return { areaCode, center } 城市code 城市中心的经纬度 */
    export function locationByIP(tagId) { 
      const map = new AMap.Map(tagId);
      return { 
        areaCode: map.getAdcode(),
        center: map.getCenter()
      };
    }
    
    /** * 高德精确定位 * @param {*} config * https://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation */
    export function locationGaodeExact(config = { }) { 
      return new Promise((res, rej) => { 
        AMap.plugin('AMap.Geolocation', () => { 
          const geolocation = new AMap.Geolocation({ 
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 2000, //超过2秒后停止定位，默认：5s
            buttonPosition: 'RB', //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
            ...config
          });
          geolocation.getCurrentPosition((status, result) => { 
            if (status == 'complete') { 
              onComplete(result);
            } else { 
              onError(result);
            }
          });
        });
    
        //解析定位结果
        function onComplete(data) { 
          const { 
            position: {  lng, lat },
            formattedAddress,
            addressComponent: {  province, city, district, adcode }
          } = data;
          const result = { 
            longitude: lng,
            latitude: lat,
            province,
            city,
            district,
            address: formattedAddress,
            adcode // 区县code
          };
          console.log('location success', result);
    
          res(result);
        }
        //解析定位错误信息
        function onError(error) { 
          console.log('location error', error);
          return rej(error);
        }
    
        // res({ 
        // longitude: '120.023763,',
        // latitude: '30.289903',
        // city: '杭州市',
        // district: '拱墅区',
        // adcode: '330105'
        // })
      });
    }
    
    /** * 地图初始化 * @param {*} longitude 经度 * @param {*} latitude 纬度 * @param {*} id 容器ID */
    export function mapInit(longitude, latitude, id) { 
      const coordinate = [longitude, latitude];
    
      // 创建地图实例
      const map = new AMap.Map(id, { 
        zoom: 14,
        center: coordinate,
        resizeEnable: true
      });
    
      const startIcon = new AMap.Icon({ 
        // 图标尺寸
        size: new AMap.Size(30, 30),
        // 图标的取图地址
        image: 'https://img.alicdn.com/tfs/TB1gIzXmWNj0u4jSZFyXXXgMVXa-80-90.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(30, 30)
      });
    
      const marker = new AMap.Marker({ 
        icon: startIcon,
        position: coordinate
      });
      map.add(marker); //添加到地图
    }
    
    /** * 地址逆编码 * @param {*} areaCode 经纬度（字符串或数组） * @param {*} config 配置 参考 https://lbs.amap.com/api/javascript-api/reference/lnglat-to-address#m_AMap.Geocoder */
    export function regeoCode(areaCode, config = { }) { 
      return new Promise((res, rej) => { 
        AMap.plugin('AMap.Geocoder', () => { 
          const geocoder = new AMap.Geocoder(config);
    
          geocoder.getAddress(areaCode, (status, result) => { 
            if (status === 'complete' && result.regeocode) { 
              res(result);
            } else { 
              rej('根据经纬度查询地址失败');
            }
          });
        });
      });
    }