xm2by的博客

星级评分的实现星级评分是一种常见的打分方式，一般满分为5颗星，用户通过勾选星星的数量来给产品的某一维度进行打分，效果如下图所示：当鼠标移动到某个星星上面时，当前星星及其前面的星星需处于激活状态；当鼠标移开时，所有星星恢复原状；只有当鼠标点击某个星星时，当前星星及其前面的星星处于激活状态，评分生效，此时鼠标移开时，星星状态不用恢复原状。从上述分析可以看出，用到了鼠标进入、离开事件、以及点击事...

canvas绘制五角星在canvas中绘制五角星，主要是利用canvas中path（路径）来绘制，首先确定五角星上A到J这10个点的坐标，如下图所示：这里面用到了一些简单的数学知识：角AOC、COE、EOG、GOI、IOA的值为72°，角AOB、BOC、COD、DOE、EOF、FOG、GOH、HOI、IOJ、JOA的值为36°。当以O为坐标系原点时，根据大圆、小圆的半径，可以计算出C点坐标为...

appendChild参考文献[1] Node.appendChild[2] Node.firstChild[3] 一道原生JS的问题

树形结构数据的转换简单数据结构转嵌套数据结构嵌套数据结构转简单数据结构参考文献：[1] js之递归拼树（树结构的数据结构）[2] js实现无限层级树形数据结构（创新算法）...

d3.js常用方法1、选择单个元素d3.select(selector)类似于js中的document.querySelector()方法，都是用于获取DOM元素；其中selector可以是标签名称、类名、id名；例如：获取body元素d3.select(body)2、选择所有元素d3.selectAll(selector)类似于js中的document.querySelect...

window.open新开页时页面访问不了问题当项目中需要新开页跳转到其他网站时，最常用的方法就是使用window.open(url)来实现，最近在项目中，使用window.open()方法新开页跳转时，有些网站可以正常访问，有些则访问不了，会出现诸如：403 Forbidden、The HTTP request is not acceptable for the requested resou...

parseInt()方法理解通过下面几个题来深刻理解一下parseInt方法：['1', '2', '3'].map(parseInt)['1', '2', '3'].filter(parseInt)['1', '2', '3'].reduce(parseInt)'1 2 3'.replace(/\d/g, parseInt)['1', '2', '3'].map(parseF...

js-cookie使用方法js-cookie用来处理cookie相关的插件，非常简单好用，下面简单记录一下：1、项目中引用：npm install --save js-cookie2、js-cookie的使用：安装好js-cookie插件后，在我们需要处理cookie的地方，简单的通过import引入就可以使用了import Cookies from 'js-cookie'3...

多行省略的实现在实际开发中，经常会遇到当文本内容比较多时，由于显示区域空间的限制，我们只需显示一部分内容，剩余的内容则用省略号（…）代替。关于单行多余内容省略的实现，可以简单的通过css样式来实现：.ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行省略的实现，也可以通过css样...

数组的includes方法和indexOf的区别

input元素的oninput事件和onchange事件1、input元素上绑定事件的三种方式：第一种：直接在元素标签上添加oninput属性，属性值为处理事件函数的调用<input type="text" id="input" oninput="handleInput()"></input>function handleInput() { // 处理事件代码...

与函数柯里化相关的一道面试题曾经遇到过的一道面试题，写一个sum函数，满足以下条件：sum(1)(2)(3).valueOf() // 6sum(1, 2)(3)(4).valueOf() //10sum(1, 2, 3)(4, 5)(6, 7).valueOf() // 23sum(1)(2, 3, 4)(5).valueOf() // 15当时第一眼看上去这是函数柯里化的知识点，...

javascript中的函数柯里化函数柯里化是将接受多个参数的函数转换成可以接受一个参数的函数，且转换后的函数能够处理剩余参数并返回执行结果。参考文献：[1] 前端基础进阶（八）：深入详解函数的柯里化...

promise到底是在resolve时被推入微任务队列还是在then的时候呢？今天在看async/await、promise等执行顺序时，一时被promise在什么时候被推出微任务队列搞得有点晕，是在执行resolve时还说执行then时？为了搞清楚这个问题，于是想了如下执行代码来验证：console.log('script start')Promise.resolve('resolve')...

javascript实现快速排序快速排序一般是在数组中先找一个基准元素，将数组中剩余的元素依次与基准元素进行对比，比基本元素小的放一个新数组，同样地，比基准元素大的放一个新数组，然后分别对新数组重复进行上述操作，直到新数组的元素只剩一个，此时便完成了排序。实现代码：function quickSort(arr){ // 由于使用Math.floor()向下取整方法获取基准元素索引，会出现a...

javascript实现插入排序插入排序是将数组分成两部分，一部分是排好序的，另一部分是待排序的，依次将待排序的元素取出来与排好序的部分一一对比，直到找到适合该元素的位置并添加进去。一般默认数组左侧第一个元素是排好序的，然后从第二元素开始遍历，分别左侧排好序的部分对比进行插入。实现代码：function insertSort(arr){ // 数组长度为1，直接返回原数组 if(arr....

模拟bind方法实现过程bind方法的特点：必须是函数才能调用bind方法调用bind方法后返回一个可调用的函数调用bind方法时可以传入多个参数，一般第一个参数用于改变调用函数的this指向，剩余参数用于传给调用bind的函数调用bind方法时，第一个参数为空或者null时，调用函数中的this指向window调用bind方法后生成的函数在调用执行时可以传参，且参...

防抖&amp;amp;amp;amp;节流1、防抖：防抖：对于高频持续触发事件，通过设置定时器来延迟事件执行，在未达到设定的延迟时间时，如果再次触发该事件，则重新计时；只有在延迟时间内不触发该事件，那么当达到延迟时间后才会执行该事件。// 通过设置定时器实现关键词：重新计时2、节流：节流：对于高频持续触发事件，让其在一定时间内仅执行一次，可以通过设置时间戳或定时器的方法实现。// 方法一：设置时间戳/...

js继承1、原型链继承：function Parent() { this.familyName = 'Xu'}Parent.prototype.getFamilyName = function() { return this.familyName}function Children() { this.firstName = 'Ryan'}// 原型链继承...

为什么[] instanceof Function为false ？instanceof是用来判断左边对象的原型链上是否存在右边对象的原型[]的原型链：[].__proto__ === Array.prototypeArray.prototype.__proto__ === Object.prototypeObject.prototype.__proto__ === null从上面原型...

js判断IE浏览器的版本参考文献：[1] js判断是否是ie浏览器且给出ie版本

正则匹配中文正则表达式中\w不能匹配中文，\w等价于[A-Za-z0-9_]，当需要匹配中文时需要用到[\u4e00-\u9fa5]来进行匹配：/[\u4e00-\u9fa5]+/.test('我们')// true/[\u4e00-\u9fa5]+/.test('abc_123')// false/\w+/.test('我们')// false/\w+/.test('abc...

_.difference()、 _.differenceBy()、 _.differenceWith()为何将_.difference()、_.differenceBy()、_.differenceWith()三个方法放在一起分析呢？因为它们的内部都是基于baseDifference()方法进行处理，只不过是传入baseDifference()的参数不同罢了。// difference.js...

_.drop(array, [n = 1])drop()方法可以理解为删除元素，它是从头开始删除，具体删除多少元素是由第二个参数n决定，n默认为1；其内部是基于slice方法实现的example：_.drop([{a:1}, 2, ['b', 'c'], 3 ,5], 2)// [['b', 'c'], 3 ,5]源码解析：// drop方法可以理解为删除数组元素，它是从头开始删除，...

深拷贝（深克隆）之前写过一篇关于浅拷贝与深拷贝的文章，文章中提到浅拷贝和深拷贝主要是针对引用数据类型（对象、数组、函数）而言的，因为对于基础数据类型（string、number、boolean、null、undefined），不存在浅拷贝这一说，只要复制一份，就是一次深拷贝，即通过复制生成的值与原始值之间没有联系。那么深拷贝的实现方式有哪些呢？1.JSON.stringify()、JSON.p...

实现一个EventBusvue组件间通信方式有多种，对于父子组件，最常用的是使用props和emit进行通信，对于非父子组件，我们会采用EventBus进行通信，具体如何操作先看如下demo：// utils.js // 创建一个Vue实例，作为EventBusimport Vue from 'vue'export const EventBus = new Vue()有三个组件：Pa...

实现一个Promise参考文献：[1] Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)[2] Promise实现原理（附源码）[3] 剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类...

关于Object.create()方法1、Object.create()可以帮我们生成一个对象，通过传参，可以将生成的对象的原型指向第一个参数，可以模拟Object.create()实现过程：Object.create1 = function(proto){ function F() {} F.prototype = proto return new F()}// 测试var o...

vue项目中实现pdf文件预览功能最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法：pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览；1、使用浏览器默认支持访问pdf文件的功能1.1、当后端返回的是pdf文件在服务器上的路径时，直接...

对比Object.defineProperty()和proxy对数组的处理

intersection()、intersectionBy()、intersectionWidth()intersection()、intersectionBy()、intersectionWidth()方法用于对传入的数组求交集，获取存在于每个数组中的元素，生成新的数组返回，其内部都是基于baseIntersection方法；刚开始看baseIntersection方法实现的时候可能会有点困...

_.compact(array)每天更新一个lodash方法源码解析compact翻译过来表示紧凑的、紧密的；在lodash中，它用于将数组中虚假值过滤掉，虚假值表示该值为空或者无意义，虚假值都包括：false、null、0、" "、undefined、NaN，与其对应的是真值，表示该值有意义，compact方法就是将上面所提到的虚假值过滤掉。example：_.compact([1,...

flatten()、flattenDeep()、flattenDepth()flatten()、flattenDeep()、flattenDepth()都是用于对数组的扁平化处理，不同之处在于扁平化的层级，flatten()是对数组进行一层扁平化处理，flattenDeep()是对数组完全扁平化处理，flattenDepth()是对数组进行指定层级的扁平化处理，其内部的实现都是基于baseFla...

slice()

_.chunk(array, [size = 1])chunk()方法是将数组中的元素进行分块，每一块为一个数组，最终返回由每个块组成的数组。example：_.chunk([1, 3, 5, 7, 9], 2)// [[1, 3], [5, 7], [9]]_.chunk([1, 2, 3, 4, 5, 6], 3)// [[1, 2, 3], [4, 5, 6]]_.chunk(...

lodash是一个非常实用的一个javascript工具库，为我们提供了一系列包括字符串、数值、数组、对象等的常用处理方法，了解这些方法的实现不仅可以让我们更好的掌握js的一些基础知识，还可以开拓我们思维，帮助我们在实际开发中解决一些类似问题。...

事件流和事件委托事件委托就是利用了事件冒泡原理，通过将事件处理添加到父级上，来控制所有子级的同类事件事件委托的好处：1、不用为每个子类元素都手动添加同类事件，减少DOM元素访问，提高性能2、新添加的子级元素可以继承同类事件参考文献：[1] 事件冒泡、事件捕获和事件委托...

解决IE低版本浏览器不支持location对象的origin属性低版本的IE浏览器是不支持window.location.origin，但是支持window.location，因此可以通过window.location对象进行拼凑实现对window.location.origin的兼容，具体如下：...if (!window.location.origin) { window.loc...

知乎页面布局知乎页面布局简洁明了，整体居中显示，采用上下结构，上面为顶部，提供导航、搜索、用户功能，下面为页面内容，内容左右分布，左边为主内容，主要是知乎上一些文章的摘要，右边为侧边栏，为用户提供一些服务选项和版权信息；卡片化是知乎页面上的一个特色，几乎所有的内容都是通过放在卡片中呈现给用户。看看知乎首页布局：知乎采用了flex布局，flex布局的特点是写更少的代码，让布局更简单（...

为页面添加锚点链接1、scrollToView 2、a标签与id结合 3、