- 博客(150)
- 收藏
- 关注
RSS订阅原创 星级评分的实现
星级评分的实现星级评分是一种常见的打分方式，一般满分为5颗星，用户通过勾选星星的数量来给产品的某一维度进行打分，效果如下图所示：当鼠标移动到某个星星上面时，当前星星及其前面的星星需处于激活状态；当鼠标移开时，所有星星恢复原状；只有当鼠标点击某个星星时，当前星星及其前面的星星处于激活状态，评分生效，此时鼠标移开时，星星状态不用恢复原状。从上述分析可以看出，用到了鼠标进入、离开事件、以及点击事...
2020-02-19 17:14:55
3434
原创 canvas绘制五角星
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点坐标为...
2020-02-18 16:38:23
5071
原创 appendChild方法最容易被忽视的一个使用事项
appendChild参考文献[1] Node.appendChild[2] Node.firstChild[3] 一道原生JS的问题
2020-01-18 23:55:40
3886
原创 vue路由切换时NavigationDuplicated报错的解决方法
vue路由切换时NavigationDuplicated报错的解决方法在vue中使用this.$router.push()方法切换路由时，有时控制台会报NavigationDuplicated相关的错误，如下图所示：原因：在网上查询一番后，比较多的一种说法是，vue-router在3.1之后把$router.push()方法改为了Promise，因此在使用$router.push()时如果...
2020-01-16 12:32:19
1479
原创 v-model的理解
v-model的理解在input元素上使用v-model可以实现数据的双向绑定；其双向绑定的原理是利用input元素的value属性和监听其input事件；<input type="text" v-model="inputValue"></input>vue模拟v-model的实现<input type="text" :value="inputValue" ...
2020-01-14 15:38:20
1141
原创 树形结构数据的转换
树形结构数据的转换简单数据结构转嵌套数据结构嵌套数据结构转简单数据结构参考文献：[1] js之递归拼树（树结构的数据结构）[2] js实现无限层级树形数据结构（创新算法）...
2019-12-14 15:04:37
1705
原创 d3.js常用方法
d3.js常用方法1、选择单个元素d3.select(selector)类似于js中的document.querySelector()方法，都是用于获取DOM元素；其中selector可以是标签名称、类名、id名；例如：获取body元素d3.select(body)2、选择所有元素d3.selectAll(selector)类似于js中的document.querySelect...
2019-11-30 11:51:37
678
原创 多个相邻按钮切换效果出现边框重叠问题的解决方法
多个按钮切换时处于选中状态按钮的边框出现重叠问题的解决方法element和ant-design中对于这种多按钮切换时边框重叠问题的解决方法相同，具体如下：在这里插入代码片...
2019-11-30 11:03:40
1654
原创 svg中如何让文本溢出时显示省略号
svg中如何让文本溢出时显示省略号最近在使用d3.js实现一个树状组织结构图，遇到如下图所示的问题，要求是文本内容固宽，溢出内容应用省略号代替，如果是使用普通html标签实现的话，是比较简单的，overflow: hidden; text-overflow: ellipsis; white-space: nowrap;即可，但是在使用svg标签进行作图时，将这些css属性应用到<text&...
2019-11-27 09:58:39
5077
1
原创 webpack输出文件名设置chunkhash时在开发环境报错问题的解决
webpack输出文件名设置chunkhash时在开发环境报错问题的解决报错如下：原因：从报错提示中可以看出使用hash来解决该报错，为什么呢？这是因为chunkhash不可以与热更新一起使用。解决方法：在开发环境我们需要使用热更新来实现修改内容实时刷新，但生产环境是不需要的，因此通过根据npm脚本中的环境变量来区分开发与生产环境，以此来决定filename使用chunkhash还是h...
2019-11-25 12:19:34
1567
原创 window.open新开页时页面访问不了问题
window.open新开页时页面访问不了问题当项目中需要新开页跳转到其他网站时，最常用的方法就是使用window.open(url)来实现，最近在项目中，使用window.open()方法新开页跳转时，有些网站可以正常访问，有些则访问不了，会出现诸如：403 Forbidden、The HTTP request is not acceptable for the requested resou...
2019-11-13 09:47:54
3288
2
原创 parseInt()方法理解
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...
2019-11-12 10:47:09
7890
原创 在本地通过设置域名访问vue项目时出现Invalid Host header错误
在本地通过设置域名访问vue项目时出现Invalid Host header错误原因：webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问，我们可以通过设置跳过host检查来解决该报错，具体如下：解决方法：1、vue-cli2创建的项目，在webpack.dev.conf.js中的devServer对象中添加如下设置：//...
2019-10-29 00:30:59
2005
原创 修改表单元素的placeholder样式
修改表单元素的placeholder样式在使用表单元素时，浏览器会自动为表单元素的placeholder设置样式，该样式不一定会满足我们需求，当需要改变placeholder时，可以使用以下选择器进行操作：// chrome浏览器::-webkit-input-placeholder{ // 自定义样式}// IE浏览器，支持IE10以上（含IE10）:-ms-input-pl...
2019-10-26 09:32:14
618
原创 js-cookie使用方法
js-cookie使用方法js-cookie用来处理cookie相关的插件，非常简单好用，下面简单记录一下：1、项目中引用：npm install --save js-cookie2、js-cookie的使用：安装好js-cookie插件后，在我们需要处理cookie的地方，简单的通过import引入就可以使用了import Cookies from 'js-cookie'3...
2019-10-16 10:12:40
7454
原创 多行省略的实现
多行省略的实现在实际开发中，经常会遇到当文本内容比较多时，由于显示区域空间的限制，我们只需显示一部分内容，剩余的内容则用省略号（…）代替。关于单行多余内容省略的实现，可以简单的通过css样式来实现：.ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行省略的实现，也可以通过css样...
2019-10-13 14:00:19
2214
原创 git实用命令（不断更新中......）
git实用命令（不断更新中…）git是一个分布式版本控制系统。前端开发时，git也是一个我们绕不开的工具，它可以帮助我们方便地上传、更新自己的项目代码。git是通过执行命令行来工作的，它的命令也特别多，下面将常用到的git命令总结如下：1、打开d盘命令：cd d:2、新建一个名为src的文件夹mkdir src3、新建一个index.html文件touch index.html...
2019-10-12 10:04:22
253
原创 记一次linux下安装nginx
记一次linux下安装nginx使用到的工具：1、xshell：用于访问远程服务器，通过执行脚本来查看、删除服务器上的文件、在服务器上进行安装程序等操作；2、xftp：用于更换远程服务器中的文件；安装过程：1、安装nginx所需的依赖执行如下命令，安装nginx所需的依赖：yum -y install gcc zlib zlib-devel pcre-devel openssl ...
2019-10-08 16:49:33
177
原创 Error: getaddrinfo ENOENT报错解决
Error: getaddrinfo ENOENT报错解决使用npm run dev 运行vue项目时，出现Error: getaddrinfo ENOENT报错，具体如下：问题原因：localhost没有与127.0.0.1绑定解决方法：在C:\Windows\System32\drivers\etc中找到hosts文件，在hosts文件中添加127.0.0.1，保存即可，如下图所示...
2019-09-25 14:59:45
11108
原创 深拷贝（深克隆）
深拷贝（深克隆）之前写过一篇关于浅拷贝与深拷贝的文章，文章中提到浅拷贝和深拷贝主要是针对引用数据类型（对象、数组、函数）而言的，因为对于基础数据类型（string、number、boolean、null、undefined），不存在浅拷贝这一说，只要复制一份，就是一次深拷贝，即通过复制生成的值与原始值之间没有联系。那么深拷贝的实现方式有哪些呢？1.JSON.stringify()、JSON.p...
2019-09-19 11:49:42
1197
原创 实现一个EventBus
实现一个EventBusvue组件间通信方式有多种，对于父子组件，最常用的是使用props和emit进行通信，对于非父子组件，我们会采用EventBus进行通信，具体如何操作先看如下demo：// utils.js // 创建一个Vue实例，作为EventBusimport Vue from 'vue'export const EventBus = new Vue()有三个组件：Pa...
2019-09-17 19:08:50
569
原创 实现一个Promise
实现一个Promise参考文献：[1] Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)[2] Promise实现原理（附源码）[3] 剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类...
2019-09-11 13:59:42
245
原创 vue项目中实现pdf文件预览功能
vue项目中实现pdf文件预览功能最近遇到一个实现pdf文件预览功能的需求，分享一下实现方法：pdf预览相对word、excel、ppt等文件的预览比较容易，因为常见的浏览器都是支持pdf文件直接预览，所以最简单的实现方法就是在浏览器中直接输入pdf文件存放在服务器上的路径地址就可以直接预览；1、使用浏览器默认支持访问pdf文件的功能1.1、当后端返回的是pdf文件在服务器上的路径时，直接...
2019-08-09 18:21:55
27219
2
原创 对比Object.defineProperty()和proxy对数组监听的处理
对比Object.defineProperty()和proxy对数组的处理
2019-08-09 10:10:14
5759
1
原创 关于Object.create()方法
关于Object.create()方法1、Object.create()可以帮我们生成一个对象，通过传参，可以将生成的对象的原型指向第一个参数，可以模拟Object.create()实现过程：Object.create1 = function(proto){ function F() {} F.prototype = proto return new F()}// 测试var o...
2019-08-07 16:32:28
4483
原创 在使用eslint校验代码格式时，如何设置vscode编辑器保存时自动修改代码错误格式？
在使用eslint校验代码格式时，如何设置vscode编辑器保存时自动修改代码错误格式？1、在vscode编辑器中安装eslint、veter插件；2、项目中需要配置eslint，即项目中安装eslint包且项目目录中有.eslintrc.js配置文件；3、在vscode的首选项中添加如下设置：{ ... "eslint.autoFixOnSave": true, // ...
2019-07-30 23:31:13
1919
转载 使用nrm管理和切换npm仓库
使用nrm管理和切换npm仓库1、全局安装nrmnpm install -g nrm2、查看npm仓库源列表nrm ls输出结果： npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.org/* t...
2019-07-27 17:38:21
860
原创 git commit规范化
git commit规范化项目中，每次使用git提交代码时都需要填写提交信息，每个人填写提交信息的风格都不一样，为了保持项目中git commit一致性，就需要对git commit进行规范化处理，规范的git commit 可以让项目的提交信息整洁明了，也可以让我们通过提交信息可以清晰的知道本次提交的内容，出现问题时也可以更快速的查询问题，如果项目需要生成changelog日志，规范的git ...
2019-07-27 14:03:23
653
原创 fsevents包npm install安装时报错
fsevents包npm install安装时报错问题：使用typescript-library-starter初始化项目时，执行npm install时，在安装[email protected]包时出现报错，导致项目初始化失败在网上搜了一下解决方法，有的说是node版本原因导致的，尝试切换node版本后发现并未解决，后来就试了一下清除npm缓存再重新安装的方法，最终有效的解决了fsevents@...
2019-07-07 12:17:16
30198
1
原创 intersection、intersectionBy、intersectionWidth
intersection()、intersectionBy()、intersectionWidth()intersection()、intersectionBy()、intersectionWidth()方法用于对传入的数组求交集，获取存在于每个数组中的元素，生成新的数组返回，其内部都是基于baseIntersection方法；刚开始看baseIntersection方法实现的时候可能会有点困...
2019-06-23 17:36:06
1212
原创 flatten()、flattenDeep()、flattenDepth()
flatten()、flattenDeep()、flattenDepth()flatten()、flattenDeep()、flattenDepth()都是用于对数组的扁平化处理，不同之处在于扁平化的层级，flatten()是对数组进行一层扁平化处理，flattenDeep()是对数组完全扁平化处理，flattenDepth()是对数组进行指定层级的扁平化处理，其内部的实现都是基于baseFla...
2019-06-21 12:17:49
2117
原创 drop()、dropRight()、dropWhile()、dropRightWhile()
_.drop(array, [n = 1])drop()方法可以理解为删除元素，它是从头开始删除，具体删除多少元素是由第二个参数n决定，n默认为1；其内部是基于slice方法实现的example：_.drop([{a:1}, 2, ['b', 'c'], 3 ,5], 2)// [['b', 'c'], 3 ,5]源码解析：// drop方法可以理解为删除数组元素，它是从头开始删除，...
2019-06-20 09:02:10
2897
原创 difference()、differenceBy()、differenceWith()
_.difference()、 _.differenceBy()、 _.differenceWith()为何将_.difference()、_.differenceBy()、_.differenceWith()三个方法放在一起分析呢？因为它们的内部都是基于baseDifference()方法进行处理，只不过是传入baseDifference()的参数不同罢了。// difference.js...
2019-06-19 09:10:26
5347
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人