javascript常用工具函数总结(不定期补充)未指定标题的文章

DoINsiSt 发布于2019-08-01 17:37 / 804人阅读

摘要：生成随机生成一个唯一的这个方法用于生成一个随机，可以将生成的视为全局唯一的生成两个相同的情况很少。似乎在前端用的比较少，目前项目用到就是在每次请求后端接口时调用此方法，生成一个传过去。

前言

以下代码来自：自己写的、工作项目框架上用到的、其他框架源码上的、网上看到的。

主要是作为工具函数，服务于框架业务，自身不依赖于其他框架类库，部分使用到es6/es7的语法使用时要注意转码

虽然尽量在函数中做了错误情况的处理，仍有可能出现报错的情况(不定期完善)

1. 获取url上的参数

  /**
   *获取url上的参数
   * @return {object}
   * @example
   * getRequest()  getRequest().paramA
   */
function getRequest() {
    var searchString = window.location.search.substring(1),
        params = searchString.split("&"),
        hash = {};
    if (searchString == "") return {};
    for (var i = 0; i < params.length; i++) {
        var pos = params[i].indexOf("=");
        if (pos == -1) { continue; }
        var paraName = params[i].substring(0, pos),
            paraValue = params[i].substring(pos + 1);
        hash[paraName] = paraValue;
    }
    return hash;
}

返回一个对象，将url上的参数以键值对的形式存储在返回结果中，如果url上没参数，则返回空对象

2. 计算两个日期的时间差

  /**
   * 计算两个日期时间的时间差
   * @param {Date, Date}  date1 date2
   * @return {object | null} 
   * @example
   * getDiff(new Date("2017-09-08"), new Date())
   */
function getDiff(date1, date2) {
     if (!date1.getTime || !date2.getTime) return null
     var ms = (date1.getTime() - date2.getTime());
     var day1 = Math.round(ms / 24 / 3600 / 1000),
         hh1 = Math.round((ms / 3600 / 1000) % 24),
         mm1 = Math.round((ms / 1000 / 60) % 60),
         ss1 = Math.round((ms / 1000) % 60);
     return {
         day: day1,
         hour: hh1,
         minute: mm1,
         second: ss1
      };
}

传入两个Date日期对象，返回一个对象，其属性值day、hour、minute、second分别表示相差天数、小时、分钟、秒。结果以Math.round()取整，如果结果为负，则表示第一个日期在第二个日期前面

3. 将canvas转化为image图片格式

  /**
   * 将canvas转化为image格式
   * @param {string}  cId
   * @return {object HTMLImageElement} 
   * @example
   * canvasToImg("canvas")  canvasToImg("#canvarsId")
   */
function canvasToImg(cId){
    let canvas = document.querySelector(cId)
    if (!canvas || !canvas.toDataURL) return new Image()
    let imgData = canvas.toDataURL("image/png"),
        imgs= new Image();
        imgs.src=imgData;
    return imgs
}

传入一个css选择器，函数根据选择器查询canvas节点，然后返回该canvas的image格式节点，如果查找不到则返回一个空的image。原理是将canvas转化为base64编码，toDataURL方法貌似是canvas节点独有的，然后新建一个src是这个base64编码的图片。
ps:什么情况下需要做这种转换呢？目前我知道的一个就是canvas在移动端无法长按保存到手机。

4. 生成随机guid

  /**
   * 生成一个唯一的guid
   * @return {string}
   * @example
   * // 7f603b20-17ff-4f47-aeb9-e7996de04939
   * util.guid();
   * @see http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
   */
  function guid () {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
      var r = Math.random()*16|0, v = c == "x" ? r : (r&0x3|0x8);
      return v.toString(16);
    });
  }

这个方法用于生成一个随机guid，可以将生成的guid视为全局唯一的(生成两个相同id的情况很少)。guid似乎在前端用的比较少，目前项目用到就是在每次请求后端接口时调用此方法，生成一个guid传过去。

5. 获取一个月份的天数

  function isLeapYear (year) {
    if (year % 100 === 0) {
      if (year % 400 === 0) {
        return true;
      }
    } else if (year % 4 === 0) {
      return true;
    }
    return false;
  }
  /**
   * 获取某个月份有多少天
   * @return {number}
   * @param {string | number}  year month
   * @example
   * getDaysInMonth(2017, 9)
   */
  function getDaysInMonth (year, month) {
    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
  }

传入一个年份和月份，返回该月有多少天，其中也包含了一个isLeapYear方法来判断是否是闰年，应该在实现日历或者日期选择组件时用的到

结语

暂时就写这么多了，后面不定期补充。

专线服务超融合服务器 javascript常用函数文章标题文章标题在html 未指定错误

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51259.html

javascript常用工具函数总结(不定期补充)未指定标题的文章

摘要：生成随机生成一个唯一的这个方法用于生成一个随机，可以将生成的视为全局唯一的生成两个相同的情况很少。似乎在前端用的比较少，目前项目用到就是在每次请求后端接口时调用此方法，生成一个传过去。前言以下代码来自：自己写的、工作项目框架上用到的、其他框架源码上的、网上看到的。主要是作为工具函数，服务于框架业务，自身不依赖于其他框架类库，部分使用到es6/es7的语法使用时要注意转码虽然尽...

Jioby 2019-08-21 16:26 评论0 收藏0
javascript常用工具函数总结(不定期补充)未指定标题的文章

摘要：生成随机生成一个唯一的这个方法用于生成一个随机，可以将生成的视为全局唯一的生成两个相同的情况很少。似乎在前端用的比较少，目前项目用到就是在每次请求后端接口时调用此方法，生成一个传过去。前言以下代码来自：自己写的、工作项目框架上用到的、其他框架源码上的、网上看到的。主要是作为工具函数，服务于框架业务，自身不依赖于其他框架类库，部分使用到es6/es7的语法使用时要注意转码虽然尽...

hiyang 2019-08-05 12:03 评论0 收藏0
react-navigation使用详解

摘要：导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的示例项目报如下的错误，可能是大家使用了命令导致的，解决这个错误的办法就是将删除，然后重新使用命令来安装，最后使用来起服务，应该就不报错了。 react-navigation导航组件使用详解注意了，如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误，可能是大家使用了 yarn install 命...

stonezhu 2019-08-23 11:47 评论0 收藏0
知识整理之HTML篇

摘要：最近关注的重学前端系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。模式是目前最常用的模式。严格模式不允许展示型弃用元素和框架集。中空格不会被自动删除。最近关注winter的重学前端系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通...

yck 2019-08-02 14:10 评论0 收藏0
知识整理之HTML篇

摘要：最近关注的重学前端系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。模式是目前最常用的模式。严格模式不允许展示型弃用元素和框架集。中空格不会被自动删除。最近关注winter的重学前端系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通...

李世赞 2019-08-05 16:05 评论0 收藏0