qq_42002487的博客

本文结合实例，详细的介绍了鼠标跟随框在三种场景下的三种具体实现的方法

在我们日常的网络社交中，@XXX功能可以说是一个比较常见的功能了。本文将结合实践，介绍一种可以快速实现@选人或引用数据的方式。

前言树结构的数据操作对于一个开发者来说是一个必备的技能。在实际的业务开发中，我们也会遇到许多树结构的体现，比如最常见的地域树，以及企业结构树、校级组织树等等。下面整理了一系列的关于JavaScript树的操作方法，结合示例，相信大家在实际开发工作中或多或少都会用到。数组扁平化示例const arr = [1, [2, [3, 4]], 5, [6]];方法1、递归const flatten = (arr) => { let res = []; arr.map(item

前言我们在开发时，有时需要进行npm源的切换。nrm和yrm作为npm / yarn的镜像源管理工具，可以快速地在 npm 源间切换，提高我们的效率。nrm安装npm install -g nrm使用查看可用源列表nrm ls其中带*为当前使用的源 npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.or

前言纯函数这个这个词我相信小伙伴们多多少少都听说过，它是函数式编程的基础。本文主要是对纯函数进行探讨，包括基本概念，优点，运用的经典案例以及我们日常该如何去合理的使用等等。纯函数的概念首先我们来看看纯函数的基本概念：相同的输入，总是会的到相同的输出，并且在执行过程中没有任何副作用。该怎么去理解上面的概念呢？我们要把上面这句话拆成两部分来看。相同的输入，总是会得到相同的输出。来看看下面的例子：let a = 1;function xAdd(x) { return x + a;

前言作为开发者，我们总是会不经意间的遇到一些令人头疼的需求。比如五彩斑斓的黑，根据手机壳变换APP的颜色等等，你说怎么办。虽然在一般情况下不会这么棘手，但是有些需求刚拿到的时候还是会一筹莫展。表格间数据传递曾经遇到一个类似这样的需求：A表的数据需要沿用B表中的数据，而且要尽量少的步骤。具体什么意思呢，意思就是完成一个类似于下面这种效果：这个该这么搞，直接给产品说，对不起实现不了。可是产品却告诉我，不行不行，必须实现。没办法，只好妥协。梳理OK，我们来理理思路，首先确定一下现有的主要开发环境

由于元素的宽度过宽，有些元素会导致出现水平滚动条。找到这个问题的原因最简单的方法就是使用 CSS outline。Addy Osmani 分享了一个非常方便的脚本，可以添加到浏览器控制台，列出页面上的每个元素。[].forEach.call($$("*"), function(a) { a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);});...

原理：调用node.js的os.networkInterfaces()返回一个对象，该对象包含已分配了网络地址的网络接口。返回的对象上的每个键都标识了一个网络接口。 关联的值是一个对象数组，每个对象描述了一个分配的网络地址。分配的网络地址的对象上可用的属性包括：address<string> 分配的 IPv4 或 IPv6 地址。netmask <string> IPv4 或 IPv6 的子网掩码。family <string> IPv4 或 IPv6。m

前言相信在我们日常遇到的项目中，无论是在前端网站还是后台管理系统中都会有功能类似的页面。我们在开发这些功能类似的页面的时候，为了提高效率，一般都会运用我们的CV大法。但是当我们CV久了之后，会不会觉得这样的开发方式有些许枯燥？我们能不能通过代码来生成代码，进一步提高我们的效率呢？下面我们就来通过一个例子来探索一下怎么通过node来生成我们需要的前端代码。实例假设我们正在做一个后台管理系统（r...

前言前端消息的实时推送我相信很多人不陌生，我们可以想到利用WebSocket，服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。其优点有很多，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯等等。语音播报则能够在人们视觉没有来的及关注时侯，通过听觉来获取需要信息。这篇文章主要介绍的是基于websocket，利用Stomp...

直接上代码const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);round(1.005, 2); // 1.01

直接上代码const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);sum(1, 2, 3, 4); // 10sum(...[1, 2, 3, 4]); // 10

判断鼠标滚轮的方向，有着两个派别：一是谷歌、IE派别（这次IE没有搞特殊）；二是火狐派别　　1、在谷歌、IE派别中，给我们提供了onmousewheel方法，该方法给我们提过了一个wheelDelta属性，该属性的返回值：正值与负值，其中正值表示滚轮向上滚动；负值表示滚轮向下滚动。　　2、而在火狐中，给我们提供了DOMMouseScroll方法，该方法给我们提供了一个detail属性，该属性的...

直接上代码：$(window).scroll(function(){ //开始监听滚动条 var top = $(document).scrollTop(); //滚动条距离顶部的高度 if(top > 120 ) { $(".header-nav").css({ 'position': 'fixed',...

前言insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。'beforebegin'：元素自身的前面。'afterbegin'：插入元素内部的第一个子节点之前。'beforeend'：...

for…of vs for…in 语句for..of 和 for..in 均可迭代一个列表；但是用于迭代的值却不同，for..in迭代的是对象的 键 的列表，而for..of则迭代对象的键对应的值。let list = [4, 5, 6];for (let i in list) { console.log(i); // "0", "1", "2",}for (let i of...

前言总结一下类的实例和静态的字段和方法，附上代码对比。1、字段类字段是保存信息的变量，字段可以附加到两个实体：一是类实例上的字段；二是类本身的字段（静态字段）实例字段：class User { constructor(name) { this.name = name; }}const user = new User('前端车站');user.name; // =&...

前言这里总结了前端JavaScript判断数据类型的几种方式。第一种方式： typeoftypeof null ---> "object"typeof undefined ---> "undefined"typeof true | false ---> 'boolean'typeof 42 ---> 'number'typeof "42" ---...