- 博客(118)
- 收藏
- 关注
RSS订阅
原创 JSON.stringify()的深入用法——第2、3个参数
第2个参数作用：用于过滤、格式化没有或者是null，则所有属性被序列化JSON.stringify({name: 'Ben', age: 18})JSON.stringify({name: 'Ben', age: 18}, null)// "{"name":"Ben","age":18}"是数组，则属性名在该数组内的属性被序列化JSON.stringify({name: 'Ben', age: 18}, ['age'])// "{"age":18}"是函数，则该函数会遍历属性，r
2020-06-22 16:02:14
1812
2
原创 iview Switch组件不显示问题——iview-loader配置
对于使用iview的项目，如果在<template>中直接使用<Switch>组件，会发现它显示不出来。原因是没有使用iview-loader的话，<Switch>和<Circle>组件受Vue限制，只能使用<i-switch>和<i-circle>代替。iview官方对此提供了webpack的配置，但是没有提供vue-cli（vue.config.json）配置，所以我来分享一下如何在vue-cli项目中配置iview-.
2020-05-14 11:21:38
3251
1
原创 【CSS】font-weight设置为500显示不出加粗效果
Windows 系统默认的宋体(simsun) 没有那么多级别。在缺少级别支持的前提下，CSS 会根据回退机制寻找一个类似的精度，结果就变成了400 (Normal)。
2023-09-14 14:40:21
2989
原创 为什么只有window.onpopstate，没有window.onpushstate和window.onreplacestate？
### 原因原生JavaScript 不支持，也无法直接监听 pushState 和 replaceState 事件。### 解决方案通过重写这两个 API 来实现调用可监听：
2023-06-15 16:54:13
191
原创 Javascript之定时器精度问题
JavaScript中常用的定时器有setTimeout和setInterval两种。这两种定时器都是通过浏览器提供的API实现的，存在一些系统性的问题，因此不太靠谱。定时器的精度存在一定的误差，误差范围一般是几毫秒。例如，如果你使用setTimeout函数来设置一个延时1000毫秒的定时器，实际上可能是延时了1003毫秒或1005毫秒甚至更多。这使得定时器不能百分之百准确地按照预期的时间执行回调函数。JavaScript的事件循环机制包括了宏任务和微任务两个队列，它们的执行优先级不同。
2023-05-09 09:27:32
722
原创 JavaScript中‘xxx‘.length数目不准确问题
很多人会认为字符串的长度（`‘xxx’.length`）就是肉眼看到的字符的数量，其实并不是。
2022-11-19 11:37:48
670
原创 【工具函数】判断是否为JSON字符串
const isJSON = (str) => { if (typeof str !== 'string') return false; try { const json = JSON.parse(str); return typeof json === 'object'; } catch (e) { return false; }};
2022-01-25 10:14:20
1246
原创 【VSCode Git】stage和stash的区别
【VSCode Git】stage和stash的区别问题来源用vscode提交变更的文件时，会发现2个相似的选项“Stage Changes”和“Stash Changes”，乍一看不知道用哪个，它们有什么区别呢？解析先从单词释义看stage是“阶段”，在Git中的含义是暂存区，由此可以推断，Stage Changes其实就相当于git add .，将变更的文件放入暂存区。stash是“藏匿”，也含有存放的意思，那么是存到哪里呢？从单词释义看不出stash的作用，就翻 Git的官方
2021-11-11 10:02:26
10201
1
原创 【图文】CSS选择器优先级
最近面试人，让我想起来了多年前的一个CSS选择器优先级问题，于是去MDN翻了文档，找到一个十分形象的图片解析，如下：图片解析外部样式优先级有三位数字，从左到右，第一位是id选择器的数量，第二位是class选择器+属性选择器+伪类选择器的数量，第三位是元素选择器+伪元素选择器的数量内联样式优先级会在外部样式的基础上，在最左侧加一位1（这也就是内联样式优先级总是高于外部样式的原因）!important优先级会在内联样式的基础上，在最左侧再加一位1（这也就是!important优先
2021-10-28 14:37:30
118
原创 Object.keys()的顺序问题及参数解析
1. 参数为Object时结论：先提取Number类型的key，按升序排列，再提取String类型的key，按定义顺序排列注意事项：前一类需满足0<number<2^32-1，否则按字符串处理（见特殊示例）// 属性为字符（串）Object.keys({ c: 11, bb: 22, a: 33})// output: ["c", "bb", "a"]// 属性为数字Object.keys({ 2: 'aa', 1: 'cc', 3: 'bb'}
2021-07-14 09:54:56
4571
原创 浏览器报错——net::ERR_CERT_AUTHORITY_INVALID（或ERR_CERT_INVALID）解析
在访问https协议的网址的时候，有时会出现标题所示的错误，原因在于https授信。复现的步骤如下：输入链接出现安全警告点击“高级-继续xxxx”才能访问（这一步就是授信）然后进入网站，清除浏览器缓存（这一步就是取消授信）点击页面任意区域（调用接口或加载页面），就会出现这种错误所以，原因就在于访问网站的过程中，浏览器中存储的授信信息被清除，导致无权限。此时刷新整个页面，再授信一遍，就可以正常访问了。...
2021-06-01 09:47:52
14378
原创 MacOS Big Sur版本Android Studio打开选项卡卡顿问题解决
Mac电脑在更新了Big Sur版本后，使用Andriod Studio打开设置、AVD Manager之类的界面时，会出现很严重的卡顿，甚至卡死。原因是Big Sur默认启用了新的选项卡功能（从多窗口形式变成了单窗口多Tab页形式），而这一形式对于很多软件来说无法兼容，也就引起了这些软件的各种bug（卡顿、掉帧、布局异常…）解决方案：对Android Studio禁用Tab选项卡模式，方法如下↓打开终端，执行以下命令 defaults write com.google.andr..
2021-03-04 10:00:19
715
2
原创 flex布局，实现子元素在主轴上单独排列
flex布局中，是通过在容器上设置justify-content属性来规定子元素在容器中主轴上的排列方式而如果要单独设置子元素的排列方式，则可以通过子元素的margin属性实现，例如：.container { display: flex; justify-content: space-between;}.item2 { margin-left: 10px; margin-right: auto;}就实现了container下item2子元素单独靠左排列（且距离左侧10px），其他子元
2021-02-05 16:19:08
3709
原创 js中file、blob、base64的相互转换，前端图片压缩、裁剪、文件格式转换
最近做了个前端图片压缩，用到了很多js文件操作api，整理一下防止健忘：1. file转base64/** * 获取文件的Base64 * @param file {File} 文件 * @param callback {Function} 回调函数，参数为获取到的base64 */function fileToBase64(file, callback) { const fileReader = new FileReader() fileReader.read
2020-09-14 15:59:50
8730
2
原创 [油猴脚本] 知乎免广告
1. 思路解析控制台调试发现广告卡片对应的html元素都有特定的class，那么就可以提取出所有广告卡片，进行隐藏2. 脚本代码(function() { 'use strict'; removeAd() window.onscroll = function() { removeAd() } function removeAd () { document.querySelectorAll('.Pc-feedAd-contai
2020-08-06 12:01:25
813
原创 dart语言修饰符——const和final的区别
const和final都用于定义常量，但是const更严格。const：编译时常量，即编译时值必须是明确的。像const a = new DateTime.now();，或者赋值为http请求的返回值，就会编译报错。在class里定义常量，前面必须加static。即写成static const a = 'xxx';的形式final：final对象中的非final、const字段可以重新分配...
2020-07-27 18:02:12
463
原创 webstorm格式化代码与eslint冲突的问题
升级webstorm版本后，格式化代码后，代码风格可能与之前会有区别，导致看着别扭，eslint还飘红。解决方式是启用自定义的code style设置。截图如下：如果设置里没有这个选项，则可以在项目根目录下添加.editorconfig文件，示例内容如下：root = true[*]charset = utf-8end_of_line = lfindent_size = 2indent_style = spaceinsert_final_newline = truetrim_trai
2020-06-29 10:40:11
4382
原创 【元素尺寸小结】scrollHeight、clientHeight、offsetHeight
scrollHeigh：元素内容的总高度，包括content、溢出的content、padding、伪元素。不包括元素的border和margin。clientHeight：元素可见部分的高度，包括content、padding。不包括元素的border和margin。offsetHeight：元素高度，包括content、padding、border、滚动条。不包括伪元素。...
2020-06-16 15:55:50
322
原创 【pm2】node.js程序，通过pm2设置开机自启动
如何设置？1. 生成自启动脚本pm2 startup2. 保存脚本pm2 save如何取消？pm2 unstartup systemd
2020-05-27 10:30:09
651
原创 常用正则表达式
常用正则表达式身份证号/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/邮箱/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]....
2020-05-14 11:33:39
535
原创 echarts使用技巧
1. 动态渲染inst.setOption() // inst就是echarts.init()返回的图表实例2. 图表自适应window.addEventListener('resize', function() { box.css('height', 0.75 * box.width()) // box是图表的容器 inst.resize()})3. 图表...
2020-04-15 15:06:19
137
原创 iview经验踩坑
1. Col 栅格 1. bootstrap列在xs屏幕默认占满一行，iview列在xs屏幕下必须设置24才能占满一行2. List 列表 1. ```<ListItem>```上无法绑定点击事件，解决方式： 1. 在```<ListItem>```和内容直接加一层```<div```>，把事件绑定在```<div>...
2020-04-15 15:02:47
512
原创 JS中的“0.1 + 0.2 != 0.3”问题
js中有个经典“0.1 + 0.2 != 0.3”的问题，if(0.1 + 0.2 === 0.3) { alert('yes')} else { alert('no')}执行后会弹出”no“。what？原来，js中浮点数不能直接用等号判断相等，需要通过”2个数的差值小于等于最小精度值“判断相等，如下：if (Math.abs(num1 - ...
2020-04-15 14:53:58
256
原创 Symbol 基本用法——自定义for...of循环
var o = new Objecto[Symbol.iterator] = function() { var v = 0 return { next: function() { return { value: v++, done: v > 10 } } } };for(var v of...
2020-04-15 14:42:19
419
原创 改变select和option的默认样式
select { border: solid 1px #000; appearance:none; -moz-appearance:none; -webkit-appearance:none; padding-right: 14px; padding-left: 20px; background: url("http://ourjs.git...
2020-04-15 14:39:46
4094
原创 元素偏移小结——screenX/Y、pageX/pageY、clientX/clientY、offsetX/offsetY
e.screenX、e.screenY: 鼠标位置相对于电脑屏幕左上角的偏移量。e.pageX、e.pageY： 鼠标位置相对于页面左上角的偏移量e.clientX、e.clientY: 鼠标位置相对于浏览器窗口左上角的偏移量（屏幕滚动时，这个左上角也会移动，所以适配屏幕滚动的时候应使用pageX/pageY）e.offsetX、e.offsetY： 鼠标位置相对于当前元素左上角（不包...
2020-04-15 14:38:59
452
原创 正则表达式——ip地址、mac地址、隔位插入
IP地址：/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/.test(ip)MAC地址：/^[A-F0-9]{2}(-[A-F0-9]{2}){5}$/.test(mac)每隔2个字符，插入一个'-'str.replace(/(.{2})/g, '$1-')...
2020-04-15 14:36:42
249
原创 经典面试题--JS的防抖、节流
直接附演示代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
2019-07-12 17:21:42
445
原创 小球拖拽和碰撞检测的简单实现（原生JS）
直接附代码：<!DOCTYPE html><head> <style> #div1, #div2 { width: 100px; height: 100px; position: fixed; border-radius: 50px; } #div1 ...
2019-07-11 15:38:38
667
原创 jstree树节点上添加图标
只需在节点上添加icon字段（string类型，与id、text字段同级）例如：{ id: 'as3sd8as6sa7', text: '房间1', icon: 'fa-house' children: []}该字段包含“/”时，value解析为图片地址；不含“/”时，value解析为<i>标签的class例如：{ ...
2019-01-28 11:21:34
4766
转载 Linux安装 配置Nginx
系统环境：CentOS 7（64位）一、安装编译工具及库文件[root@bogon src]# wget http://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz二、安装 PCRE1、下载 PCRE 安装包[root@bogon src]# wget http://downloads.sou...
2019-01-05 13:10:27
223
转载 Mac连接远程服务器（Linux）以及文件上传、下载命令
在windows上，用xshell+xftp就可以很方便的操作远程linux服务器了。而这2个软件是没有mac版的，所以在macOS下，是怎样实现对远程linux服务器的操作的呢？ 使用ssh连接远程主机ssh [email protected]使用scp命令实现上传下载1、下载服务器 test.txt 到本地桌面scp [email protected]...
2019-01-04 16:39:29
6294
原创 【jQuery DataTable】表格显示英文问题
在某些情况下，DataTable初始化会用英文渲染按钮、提示信息等，这时需要自己配置成中文。$('#example').DataTable({ language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果"
2018-12-13 12:47:48
1218
原创 【npm】package.json中的dependencies和devDependencies
dependencies和devDependencies区别dependencies里面的依赖通过npm install --save xxx安装用于开发环境和生产环境，在编写、编译、打包部署后都可以生效引入的依赖会被打包，所以引入的应该尽量少，避免部署的静态资源文件过大devDependencies里面的依赖通过npm install --save-dev xxx安装只用于...
2018-11-01 09:53:43
781
原创 HTML中的aria-hidden属性
HTML中的aria-hidden属性我们常常看到这样的html，&amp;amp;amp;lt;div id=&amp;amp;quot;modal&amp;amp;quot; class=&amp;amp;quot;modal&amp;amp;quot; aria-hidden=&amp;amp;quot;true&amp;amp;quot;&amp;amp;amp;gt;
2018-10-30 10:03:34
68149
6
原创 获取多选下拉框（select标签设置multiple属性）的值
<select multiple>不能直接获取value，需要借助该元素的options属性。如下：<select id="select" multiple> <option value="1">1111</option> <option value="2">2222</op
2018-09-05 17:03:23
17832
1
原创 查询Excel表格中的某一列数据【Node.js实现】
const fs = require('fs')const xlsx = require('node-xlsx') const sheets = xlsx.parse('example.xlsx')sheets.forEach(sheet => { // 获取整个excel中的数据 const data = sheet['data'] // 将需要的列数...
2018-08-24 17:26:14
2790
1
原创 [Vue.js — iView — Tree] 点击树组件父节点名称时展开、收缩后代节点
适用于iview tree。```<Tree ref="tree" :data="data" :load-data="loadData" @on-select-change="selectChange" show-checkbox/>``````data() { return { data: [], id: 0 }},methods: {...
2018-08-21 16:59:08
9858
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人