您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

八种酷炫JavaScript 技巧

时间:2023-04-26 13:54:50  来源:web前端开发  作者:


1.检查元素是否在屏幕可见区域内

我们如何获得元素的点击率?

主要取决于用户点击元素的次数和元素在页面上显示的次数。

我们可以很容易地获取到用户的点击次数,但是如何获取一个元素的显示次数呢?

我们可以通过IntersectionObserver轻松实现,大家可以点击codepen体验一下实际效果。

<div class="tips">box is visible</div><div class="box">box</div><script>  const $tips = document.querySelector('.tips')  const callback = (entries) => {    entries.forEach((entry) => {      console.log(entry.intersectionRatio)      if (entry.intersectionRatio > 0) {        $tips.innerhtml = 'box is visible'      } else if (entry.intersectionRatio <= 0) {        $tips.innerHTML = 'box is hidden'      }    });  }
  const options = {    // A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.    // threshold: 1,  }  const observer = new IntersectionObserver(callback, options)  observer.observe(document.querySelector('.box'))</script>

2.深拷贝一个对象

我们经常使用 lodash 来深拷贝一个对象。

const obj = {  a: {    b: {      name: 'fatfish'    }  }}
const obj2 = lodash.cloneDeep(obj)
obj2.a.b.name = 'medium'console.log(obj.a.b.name) // fatfishconsole.log(obj2.a.b.name) // medium

但这非常麻烦,因为我们必须下载整个库才能使用 cloneDeep。

幸运的是,在大多数情况下,我们可以使用这两种更简单的方式来深拷贝一个对象。

深度克隆1

const deepClone1 = (obj) => {  return JSON.parse(JSON.stringify(obj))}
const obj = {  a: {    b: {      name: 'fatfish'    }  }}const obj2 = deepClone1(obj)obj2.a.b.name = 'medium'console.log(obj.a.b.name) // fatfishconsole.log(obj2.a.b.name) // medium

是的,我相信你已经看到了,deepClone1 有一些缺陷,它不能复制函数、正则表达式、未定义等值。

const deepClone1 = (obj) => {  return JSON.parse(JSON.stringify(obj))}
const obj = {  a: {    b: {      name: 'fatfish'    }  },  reg: /fatfish/gi,  name: undefined,  showName: (name) => console.log(name)}const obj2 = deepClone1(obj)console.log(obj2)/*{    "a": {        "b": {            "name": "fatfish"        }    },    "reg": {}}*/

深度克隆2

另一种方法是使用 structuredClone。

这非常方便,我们甚至可以不做任何处理就可以深拷贝一个对象。

它甚至可以复制正则表达式和未定义的。

const obj = {  a: {    b: {      name: 'fatfish'    }  },  reg: /fatfish/gi,  name: undefined,}
const obj2 = structuredClone(obj)obj2.a.b.name = 'medium'console.log(obj.a.b.name) // fatfishconsole.log(obj2.a.b.name) // mediumconsole.log(obj2)/*{    "a": {        "b": {            "name": "medium"        }    },    "reg": /fatfish/gi,    "name": undefined}*/

但是真的没有缺点吗? 它在某些情况下也无法正常工作。

  • 它不能复制功能

  • 它不复制dom元素

  • ETC。

3.获取浏览器名称

在前端监控系统中,需要获取用户出错的浏览器。

这是获取主要浏览器名称的通用函数。

const getBrowserName = () => {  const userAgent = window.navigator.userAgent  const browsers = {    chrome: /chrome/i,    safari: /safari/i,    firefox: /firefox/i,    ie: /inte.NET explorer/i,    edge: /edge/i,    opera: /opera|opr/i,    yandex: /yandex/i,    uc: /ucbrowser/i,    samsung: /samsungbrowser/i,    maxthon: /maxthon/i,    phantomjs: /phantomjs/i,    crIOS: /crios/i,    firefoxios: /fxios/i,    edgios: /edgios/i,    safariios: /safari/i,    Android: /android/i,    ios: /(iphone|ipad|ipod)/i,    unknown: /unknown/i  }
  for (const key in browsers) {    if (browsers[key].test(userAgent)) {      return key    }  }  return 'unknown'}// Execute the above code in chrome browserconsole.log(getBrowserName()) // chrome// Execute the above code in safari browserconsole.log(getBrowserName()) // safari

4.获取随机颜色

我怎样才能得到一个随机的有效颜色?

大家可以点击codepen链接体验实际效果。

const randomColor = () => {  // Generate three random numbers as the three components of an RGB color value  const r = Math.floor(Math.random() * 256);  const g = Math.floor(Math.random() * 256);  const b = Math.floor(Math.random() * 256);  // Convert RGB color values to hexadecimal format  const hexR = r.toString(16).padStart(2, '0');  const hexG = g.toString(16).padStart(2, '0');  const hexB = b.toString(16).padStart(2, '0');  // Concatenated into a complete color value string  const hexColor = `#${hexR}${hexG}${hexB}`;  return hexColor;}

演示地址:https://codepen.io/qianlong/pen/qBJaOGO

5.复制内容到剪贴板

为了给我们的网站用户提供更好的交互体验,我们经常需要提供将内容复制到剪贴板的功能。

难以置信的是,我们竟然只需要6行代码就可以实现这个功能。

const copyToClipboard = (content) => {  const textarea = document.createElement("textarea")  textarea.value = content  document.body.AppendChild(textarea)  textarea.select()  document.execCommand("Copy")  textarea.remove()}
copyToClipboard('i love medium') // i love medium

演示地址:https://codepen.io/qianlong/pen/PoyGZYO

 

6.从搜索中获取查询字符串

使用 URLSearchParams 解析搜索数据变得非常容易。

const getSearchParam = (name) => {  const searchParams = new URLSearchParams(window.location.search)  return searchParams.get(name)}
// https://medium.com?name=fatfish&age=1000console.log(getSearchParam('name')) // fatfishconsole.log(getSearchParam('age')) // 1000
const getSearchParams = () => {  const searchParams = new URLSearchParams(window.location.search)  const params = {};  for (const [ key, value ] of searchParams) {    params[key] = value  }
  return params}// https://medium.com?name=fatfish&age=1000getSearchParams() // { name: 'fatfish', age: 1000 }
7.将元素滚动到页面顶部
我们可以使用 scrollIntoView 方法将元素滚动到页面顶部。
甚至它可以提供非常流畅的用户体验。
const scrollToTop = (ele) => {  ele.scrollIntoView({ behavior: "smooth", block: "start" })}
document.querySelector('button').addEventListener('click', function () {  scrollToTop(this)}, false)

8.将元素滚动到页面底部

哇,太好了,将元素滚动到顶部是如此简单。

朋友们,如何将元素滚动到页面底部?我想你已经猜到了,设置block结束即可。

const scrollToTop = (ele) => { ele.scrollIntoView({ behavior: "smooth", block: "end" })}

document.querySelector('button').addEventListener('click', function () {  scrollToTop(this)}, false)

演示地址:https://codepen.io/qianlong/pen/mdzrVGK

总结

以上就是我这篇文章想与您分享的8个关于JavaScript的技巧,希望对您有用,如果您觉得还不错的话,请记得点赞我,关注我,并将它分享给您的开发者朋友,也许能够帮助到他。

最后,感谢您的阅读。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1.检查元素是否在屏幕可见区域内我们如何获得元素的点击率?主要取决于用户点击元素的次数和元素在页面上显示的次数。我们可以很容易地获取到用户的点击次数,但是如何获取一...【详细内容】
2023-04-26  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
我们一起来了解一下如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件。使用 jspdf 库,我们可以轻松地将任何 HTML 页面或表单转换为 PDF:例如:import { jsPDF } fr...【详细内容】
2023-04-24  Tags: JavaScript  点击:(12)  评论:(0)  加入收藏
本文介绍了Day.js的使用方法,Day.js 是一个轻量级的JavaScript库,用于解析、验证、操作和格式化日期和时间。Day.js​ 的使用方法类似于Moment.js​,但 Day.js​ 的大小只有 2K...【详细内容】
2023-04-17  Tags: JavaScript  点击:(18)  评论:(0)  加入收藏
在本文中,我想与您分享 13个基本的 JavaScript 函数,如果您是 Web前端开发人员,您应该熟悉这些函数。 您可以将本文所有 JavaScript 函数加入收藏至您的工具箱,以便在您的软件...【详细内容】
2023-04-12  Tags: JavaScript  点击:(17)  评论:(0)  加入收藏
作者:京东科技 周明亮AST 基础与功能在前端里面有一个很重要的概念,也是最原子化的内容,就是 AST ,几乎所有的框架,都是基于 AST 进行改造运行,比如:React / Vue /Taro 等等。 多端...【详细内容】
2023-04-10  Tags: JavaScript  点击:(21)  评论:(0)  加入收藏
1.可选链接可选链接是 JavaScript 中的一项新功能,它允许开发人员编写更简洁、更易于阅读的代码。使用可选链接,您可以访问对象的嵌套属性,而不必担心这些属性是否存在。const...【详细内容】
2023-04-10  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
当我尝试移位16位值时,我看到一些奇怪的行为 0xF << 4 == 0xF0 // true0xFF << 8 == 0xFF00 // true0xFFF << 12 == 0xFFF000 // true0xFFFF << 16 == 0xFFFF0000 // false最...【详细内容】
2023-04-04  Tags: JavaScript  点击:(35)  评论:(0)  加入收藏
译者 | 李睿审校 | 孙淑娟前端JavaScript框架的创新是当今这个时代最伟大的技术文化现象之一。20多年来,人们见证了进化创造力的长尾。每一个新的想法都进行尝试,在软件开发过...【详细内容】
2023-04-04  Tags: JavaScript  点击:(22)  评论:(0)  加入收藏
Unit 42的研究人员一直在跟踪一起大范围的恶意JavaScript(JS)注入活动,该活动将受害者重定向到广告软件和欺骗页面等恶意内容。这一威胁在2022年全年都很活跃,并在2023年继续感...【详细内容】
2023-04-04  Tags: JavaScript  点击:(17)  评论:(0)  加入收藏
文件流通过接口获取后调用以下方法模拟下载/** * @description 文件流下载方法 * @param {文件流} blob * @param {文件名} fileName * @param {文件后缀名} fileType */dow...【详细内容】
2023-04-03  Tags: JavaScript  点击:(27)  评论:(0)  加入收藏
▌简易百科推荐
1.检查元素是否在屏幕可见区域内我们如何获得元素的点击率?主要取决于用户点击元素的次数和元素在页面上显示的次数。我们可以很容易地获取到用户的点击次数,但是如何获取一...【详细内容】
2023-04-26    web前端开发  Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
我们一起来了解一下如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件。使用 jspdf 库,我们可以轻松地将任何 HTML 页面或表单转换为 PDF:例如:import { jsPDF } fr...【详细内容】
2023-04-24  web前端开发  微信公众号  Tags:JavaScript   点击:(12)  评论:(0)  加入收藏
JavaScript(简称 JS)是一种广泛使用的编程语言,用于 Web 界面、服务器端编程等多种应用领域。然而,由于 JS 代码的开放性,代码易被人截取、窃取、篡改,从而引发隐私泄露、数据泄露...【详细内容】
2023-04-23  WangLiwen    Tags:JS   点击:(14)  评论:(0)  加入收藏
本文介绍了Day.js的使用方法,Day.js 是一个轻量级的JavaScript库,用于解析、验证、操作和格式化日期和时间。Day.js​ 的使用方法类似于Moment.js​,但 Day.js​ 的大小只有 2K...【详细内容】
2023-04-17  大迁世界  微信公众号  Tags:JavaScript   点击:(18)  评论:(0)  加入收藏
const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;const comdify = function (n) {if(!n) return n;let str = n.split(&#39;.&#39;);let re = /\d{1,3}(?=(\d{3})+$...【详细内容】
2023-04-13  小小的白  今日头条  Tags:JS   点击:(14)  评论:(0)  加入收藏
在本文中,我想与您分享 13个基本的 JavaScript 函数,如果您是 Web前端开发人员,您应该熟悉这些函数。 您可以将本文所有 JavaScript 函数加入收藏至您的工具箱,以便在您的软件...【详细内容】
2023-04-12  web前端开发  微信公众号  Tags:JavaScript   点击:(17)  评论:(0)  加入收藏
接受两个字符串,如果接受的是数字,需要将数字转为字符串,但有一个点需要注意,转换过程中,可能会带有e,如1.12e+21,即1.12 * 21个0,需要将1.12 * 2个0,然后padStart(21 - 2个0)。let...【详细内容】
2023-04-11  剁椒鱼鳞  今日头条  Tags:   点击:(20)  评论:(0)  加入收藏
作者:京东科技 周明亮AST 基础与功能在前端里面有一个很重要的概念,也是最原子化的内容,就是 AST ,几乎所有的框架,都是基于 AST 进行改造运行,比如:React / Vue /Taro 等等。 多端...【详细内容】
2023-04-10  京东云开发者  今日头条  Tags:javascript   点击:(21)  评论:(0)  加入收藏
1.可选链接可选链接是 JavaScript 中的一项新功能,它允许开发人员编写更简洁、更易于阅读的代码。使用可选链接,您可以访问对象的嵌套属性,而不必担心这些属性是否存在。const...【详细内容】
2023-04-10  web前端开发  微信公众号  Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
当我尝试移位16位值时,我看到一些奇怪的行为 0xF << 4 == 0xF0 // true0xFF << 8 == 0xFF00 // true0xFFF << 12 == 0xFFF000 // true0xFFFF << 16 == 0xFFFF0000 // false最...【详细内容】
2023-04-04  火龙果他爸  今日头条  Tags:JavaScript   点击:(35)  评论:(0)  加入收藏
站内最新
站内热门
站内头条