资讯专栏INFORMATION COLUMN

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

DoINsiSt / 951人阅读

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

前言

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

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

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

1. 获取url上的参数

</>复制代码

  1. /**
  2. *获取url上的参数
  3. * @return {object}
  4. * @example
  5. * getRequest() getRequest().paramA
  6. */
  7. function getRequest() {
  8. var searchString = window.location.search.substring(1),
  9. params = searchString.split("&"),
  10. hash = {};
  11. if (searchString == "") return {};
  12. for (var i = 0; i < params.length; i++) {
  13. var pos = params[i].indexOf("=");
  14. if (pos == -1) { continue; }
  15. var paraName = params[i].substring(0, pos),
  16. paraValue = params[i].substring(pos + 1);
  17. hash[paraName] = paraValue;
  18. }
  19. return hash;
  20. }

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

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

</>复制代码

  1. /**
  2. * 计算两个日期时间的时间差
  3. * @param {Date, Date} date1 date2
  4. * @return {object | null}
  5. * @example
  6. * getDiff(new Date("2017-09-08"), new Date())
  7. */
  8. function getDiff(date1, date2) {
  9. if (!date1.getTime || !date2.getTime) return null
  10. var ms = (date1.getTime() - date2.getTime());
  11. var day1 = Math.round(ms / 24 / 3600 / 1000),
  12. hh1 = Math.round((ms / 3600 / 1000) % 24),
  13. mm1 = Math.round((ms / 1000 / 60) % 60),
  14. ss1 = Math.round((ms / 1000) % 60);
  15. return {
  16. day: day1,
  17. hour: hh1,
  18. minute: mm1,
  19. second: ss1
  20. };
  21. }

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

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

</>复制代码

  1. /**
  2. * 将canvas转化为image格式
  3. * @param {string} cId
  4. * @return {object HTMLImageElement}
  5. * @example
  6. * canvasToImg("canvas") canvasToImg("#canvarsId")
  7. */
  8. function canvasToImg(cId){
  9. let canvas = document.querySelector(cId)
  10. if (!canvas || !canvas.toDataURL) return new Image()
  11. let imgData = canvas.toDataURL("image/png"),
  12. imgs= new Image();
  13. imgs.src=imgData;
  14. return imgs
  15. }

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

4. 生成随机guid

</>复制代码

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

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

5. 获取一个月份的天数

</>复制代码

  1. function isLeapYear (year) {
  2. if (year % 100 === 0) {
  3. if (year % 400 === 0) {
  4. return true;
  5. }
  6. } else if (year % 4 === 0) {
  7. return true;
  8. }
  9. return false;
  10. }
  11. /**
  12. * 获取某个月份有多少天
  13. * @return {number}
  14. * @param {string | number} year month
  15. * @example
  16. * getDaysInMonth(2017, 9)
  17. */
  18. function getDaysInMonth (year, month) {
  19. return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
  20. }

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

结语

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

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

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

相关文章

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

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

    Jioby 评论0 收藏0
  • react-navigation使用详解

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

    stonezhu 评论0 收藏0
  • 知识整理之HTML篇

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

    yck 评论0 收藏0

发表评论

0条评论

DoINsiSt

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<