- 博客(42)
- 收藏
- 关注
RSS订阅原创 关于NODE_ENV=production && npm run build模式的思考
关于NODE_ENV=production && npm run build模式的思考：看起来一段非常简单的构建命令，实际会出现一些问题...
2023-01-31 10:25:07
1985
原创 从V8引擎的工作流程看Javascript代码优化
官方文档这么介绍：V8是谷歌开源高性能JavaScript和WebAssembly引擎，用C++编写。它主要用在Chrome和Node.js中，等等。简单的来说，我们知道，JavaScript是解释型的语言，需要逐行解释执行V8则是一种C++开发的JavaScript解释器，它将JavaScript编译成可执行代码，即机器码。JavaScript是解释型的语言，解释型的语言先天就有执行效率上的不足。为此，V8引擎同时采用了解释执行和编译执行这两种方式，也就是在解释执行的同时进行编译，这种方式称为JIT (
2022-06-14 15:29:20
569
原创 修复gitCI中文件的创建时间与修改时间
前情提要hexo发现经过CI之后，所有文章的 更新时间(mtime) 变成了CI运行的时间。解决思路在CI checkout代码时，使用文件最后一次涉及的commit时间作为文件的修改时间，进行mtime的恢复。解决方案# .github/workflows/action.yml...- uses: actions/checkout@v3 # 如果使用的是GithubAction的actions/checkout，记得加上下面的内容，对仓库历史进行完整的签出 with: fet
2022-04-11 00:31:47
796
原创 Ubuntu扩展根目录空间（扩展原有分区）
0.概念说明一切开始的开始 先说明一些概念物理卷（Physical Volume）即PV： 物理卷就是指硬盘分区或从逻辑上与磁盘分区具有同样功能的设备(如RAID)，是LVM的基本存储逻辑块，但和基本的物理存储介质（如分区、磁盘等）比较，却包含有与LVM相关的管理参数。卷组（Volume Group）即VG： LVM卷组类似于非LVM系统中的物理硬盘，其由物理卷组成。可以在卷组上创建一个或多个“LVM分区”（逻辑卷），LVM卷组由一个或多个物理卷组成。逻辑卷（Logical Volume）即LV
2021-12-01 14:39:43
7591
4
原创 关于vue-cli4无法配置自定义devtool选项的问题
问题表现在vue.config.js中无法配置自定义devtool选项，无论是使用configureWebpack还是chainWebpack都无法改变source-map的类型。官方文档也没有提供相关的说明。// vue.config.js// 两种方式均无法更改devtoolmodule.exports = { configureWebpack: { devtool: "source-map" }, chainWebpack: config => { confi
2021-10-26 14:18:33
1512
1
原创 Windows 使用 ssh-agent 添加多个ssh key后，git依旧无权限的解决方法
问题表现在windows安装完ssh-agent，添加多个ssh key之后,git clone依旧提示Permission Denied。（安装参见：https://docs.microsoft.com/en-us/windows-server/administration/openssh/openssh_keymanagement）问题原因Git需要知道Windows ssh-agent服务的位置， 可以通过添加GIT_SSH环境变量来解决该问题。以下文字来源：https://snowdrif
2021-10-25 13:47:54
898
原创 添加了~/.bash_profile之后，~/.bashrc失效以及bash失去高亮的原因及解决方案
问题表现添加~/.bash_profile之后，bash失去高亮，~/.bashrc中的逻辑不运行。添加前↑添加后↑问题原因在添加~/.bash_profile之后，~/.profile会被覆盖不再运行，而load bashrc的逻辑在~/.profile中，导致~/.bashrc也一并失效。~/.profile中加载~/.bashrc的逻辑↑解决方案方案一：将~/.bash_profile中的逻辑移至~/.profile，并删除~/.bash_profile。方案二：在~/.ba
2021-09-29 12:52:27
1414
原创 apt-get临时设置代理方式
sudo apt-get -o Acquire::http::proxy="http://host:port/" install xxx
2021-08-11 12:24:31
400
原创 Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记
援引Github上的issue回复翻译：muted属性类似于<input>的value属性，如果他在元素初始化时是内联的，那么属性值将作为初始值；但是如果在一开始并没有内联，只是后续更改了attribute 1 值，那么将不会起任何效果，正确的做法是设置相对应的property 1 值。关于attribute和property值的区别，可以看我往期的文章。 ↩︎ ↩︎...
2021-01-28 14:59:47
3802
2
原创 为什么不要使用 ::before{content:url(‘xxx‘)} 设置图标
项目中遇到 随手记录 ::before ::after等伪类中使用content:url()中的图片无法设置宽高
2020-09-07 16:19:22
8771
16
原创 浮点数计算精度误差原理随记
场景0.1 + 0.2 = 0.30000000000000004原因首先，我们要站在计算机的角度思考 0.1 + 0.2 这个看似小儿科的问题。我们知道，能被计算机读懂的是二进制，而不是十进制，所以我们先把 0.1 和 0.2 转换成二进制看看：0.1==》0.1.toString(2)==》0.0001100110011(无限循环…)0.2==》0.2.toString(2)==》0.001100110011(无限循环…)双精度浮点数的小数部分最多支持 52 位，所以两者相加之后得到这么一串
2020-06-03 17:34:49
383
原创 关于CSS选择器书写正确浏览器却不认的一个原因
不想看原因的，可以直接跳到页尾看解决方案今天在写样式的时候出现不生效的问题，选择器是正确的，使用jquery也能正常选择到，但是浏览器就是不识别这一段样式。问题样式 ↓jQuery能选择到 ↓然而Chrome的开发者工具里面根本没有出现这一行 ↓排查到最后尝试删除了选择器末尾的空格，发现居然神奇的被识别了。。。。删除末尾空格 ↓识别成功 ↓问题是解决了，但是奇了怪...
2020-03-26 11:05:37
508
2
原创 获取元素到页面顶部的距离
const offsetTop = targetElement.getBoundingClientRect().top + document.body.scrollTop
2020-03-12 17:13:29
1751
原创 IOS/Mac/Safari无法播放MP4文件流及Http1.1 Range分段请求相关
故事背景公司项目需要将多媒体文件迁移至阿里OSS，原本直接从后端静态文件的<img> <video> 等标签都要改成从OSS获取展示。于是乎拦截了所有静态链接，调用了OSS接口获取了文件流返回到前台进行展示，简单粗暴，但是也遇到了问题 —— ios的 <video> 标签全军覆没。由于项目里视频比较少，这问题还是在上线前三天发现的，那个急的，一开始还找不到...
2019-12-26 01:31:53
5968
3
原创 关于Group By 单个和多个字段
在MYSQL中使用GROUP BY对表中的数据进行分组时：单个字段： GROUP BY X意思是将所有具有相同X字段值的记录放到一个分组里，多个字段： GROUP BY X, Y意思是将所有具有相同X字段值和Y字段值的记录放到一个分组里。参考文章：MYSQL GROUP BY 对多个字段进行分组 - Acettest’s Blogs - CSDN博客...
2019-10-31 15:57:39
1724
原创 拒绝假空心！纯css实现 真·空心带边框直角三角形和空心带边框直角梯形！
需求↑需要实现一个背景为半透明且带边框的直角梯形百谷解决方案碰到问题，程序猿的优良传统，先百谷一下（？） 得到的解决方案总结一下有这些：1.利用border交界处为斜边来制作，即border-top:none;border-right:transparent→问题：使用border来做背景，没法在border上再做边框，只能得到一个半透明的直角梯形2.利用矩形和三角形拼接→问题：...
2019-06-07 23:17:06
4621
1
原创 前端代码规范
HTML语法用四个空格来代替制表符（tab） – IDE可设置一个Tab四个空格嵌套元素应当缩进一次（即四个空格）。对于属性的定义，确保全部使用双引号，绝不要使用单引号。不要在自闭合（self-closing）元素的尾部添加斜线 。不要省略可选的结束标签（closing tag）（例如， 或 ）。HTML5 doctype为每个 HTML 页面的第一行添加标准模式（stand...
2019-03-25 11:04:29
351
原创 一根网线同时搭载电信itv及网络 解决方案
需求想把无线路由器放到客厅 但是客厅只有一个网口连接到弱电箱光猫的itv口 用来看电视 现在需要在该网口同时搭载网络和itv原拓扑图如下解决方案材料：1、水星Mercury SG105Pro 五口千兆网管交换机 价格 98 元 放置在客厅（下称SW5）2、水星Mercury SG108Pro 八口千兆网管交换机 价格 169 元 放置在弱电箱（下称SW8）解决思路：利用802.1...
2019-02-10 23:43:58
15175
43
原创 Chrome DevTool 行号错位问题
随手记录原因：当你在一个js里面写document.write(’&lt;script&gt;多行内容xxxx&lt;/script&gt;’)后页面上的script断点调试会错位表现就是断点打在某一行 实际停在上面几行相差的行数取决于你写进文档的多行内容的行数...
2018-12-20 10:43:16
841
原创 微信浏览器中iframe srcdoc、src="data:text/html,xxxx" 等无法使用情况下防止样式污染的解决方案
业务需求从后端取HTML 前端展示要求HTML不得被前台全局样式污染解决方案1、使用iframe 的 srcdoc &amp;amp;amp;amp;lt;iframe srcdoc=&amp;amp;amp;quot;&amp;amp;amp;amp;lt;p&amp;amp;amp;amp;gt;这是HTML&amp;amp;amp;amp;lt;p&amp;amp
2018-11-07 16:07:46
9993
原创 iframe在ios中高度自扩展问题 解决方案
开发需求在页面中加入一个定高的iframe问题IOS safari中iframe会根据内容高度进行iframe的内容自扩展以适应内容高度 设置height无效百谷之后在 iOS Safari 上，对于一个 scrollable 的 iframe 元素，iOS Safari 会选择扩展 iframe 的高度来自适应其中 web 页面内容的高度。所以当页面内容超过 iframe 设置的高度...
2018-10-11 14:52:31
1741
4
原创 new Obj() 与 Object.create(Obj.prototype)的区别
先看 Object.create 和new 的区别以下引用自blueblueskyhua的博客 创建对象的方式，我以我碰到的两种创建方式，Object.create 和new来说明var Base = function () {}var o1 = new Base()var o2 = Object.create(Base) 那这样到底有什么不一样呢？ 这...
2018-06-07 13:03:42
1330
原创 webstorm中 emmet 模板的修改步骤
之前用atom、sublime的时候 Emmet 的模板是可配置的 但是在webstorm配置中的Editor &gt; Emmet选项下没有发现任何有关模板的配置 只有一些选项的配置其实模板配置在Editor&gt;Live Templates 下 会找到有Zen字样开头的 Zen CSS、 Zen HTML、Zen XSL 分别是CSS、HTML、XSL的模板 *E...
2018-03-27 14:14:09
1530
转载 ios中 input[readonly] 仍然可聚焦出现光标并弹出“完成”面板问题
除readonly外 还需要添加unselectable="on" onfocus="this.blur()"
2018-02-05 17:47:24
2068
1
原创 关于百度地图 DrivingRoute moreResultsUrl为“未能找到相应结果，请您:返回上一步操作..” 以及 WalkingRoute moreResultsUrl为空 的解决方案
—— 因为百度地图极速版貌似正在关闭并且停止维护了 文档页面和介绍页面都跳转到了正式版的API，然而极速版中非常好用的 routeSearch.routeCall 没了 于是乎开始找代替方案A Few Minutes Later…..经过一番Demo和文档的查找，惊喜的发现正式版中TransitRoute，WalkingRoute，以及DrivingRoute 的searchCompl...
2017-12-07 16:27:37
1671
转载 window.location.replace和window.location.href区别
有3个页面 a,b,c如果当前页面是c页面，并且c页面是这样跳转过来的：a->b->c1: b->c 是通过window.location.replace(“..xx/c”) 此时b页面的url会被c页面代替，并且点击后退按钮时会回退到a页面（最开始的页面） 2: b->c是通过window.location.href(“..xx/c”) 此时b页面的路径会被c页面代替，但是点击回按钮后页
2017-12-07 15:09:52
627
原创 html垂直自适应布局
项目中遇到如下需求<body> <!-- top 盒子内容为内部撑开 --> <div class="top"> <!-- 未知高度的一些元素 --> </div> <!-- 目标盒子 需要自动填满屏幕剩余高度--> <div
2017-12-02 10:11:28
3189
转载 Jquery的each里用return true或false代替break或continue
在each代码块内不能使用break和continue,要实现break和continue的功能的话，要使用return true/false$(DOM).each(function(index,el){ return false; //break return true; //continue }
2017-11-30 10:10:52
397
原创 关于For循环中进行异步操作索引不正确的处理方式
code 问题代码function test() { for (var i = 0; i < 5; ++i) { setTimeout(function() { console.log("index is :", i); }, 1000); }}test();output 问题输出index is : 5index is
2017-11-28 10:14:18
617
转载 使用canvas实现图片压缩
那，首先通过URL.createObjectURL(file)从file对象直接取得了图片的地址前面就不详细说了，开始压缩咯 ( ´ ▽ ` )ﾉ噢，有个注意点:每次调用createObjectURL的时候，一个新的URL对象就被创建了，即使是同一个file对象，也会创建一个新对URL对象，所以，为了最佳性能和内存使用，当不再需要这个对象的时候要URL.revokeObjectURL()释放它。开始
2017-11-09 10:10:05
369
原创 关于mui Div模式选项卡 JS主动触发切换指定选项卡
需要先触发touchstart事件（旧版本需要先触发mousedown事件） mui.trigger($('.mui-tab-item').eq(1)[0],'touchstart'); mui.trigger($('.mui-tab-item').eq(1)[0],'tap')源代码尚未研究 以上为解决方案2018-3-30 PS: 发现好像只要改一下mui...
2017-11-07 23:20:22
2592
8
转载 window.requestAnimFrame 以及Polyfill
requestAnimationFrame requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。 设置这个API的目的是为了让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。代码中使用这个API，就是告诉
2017-10-08 20:56:24
1894
转载 关于Ajax跨域访问 session不能保存或之后无法访问session取值为空等问题
根据浏览器的保护规则，跨域的时候我们创建的sessionId是不会被浏览器保存下来的，这样，当我们在进行跨域访问的时候，我们的sessionId就不会被保存下来，也就是说，每一次的请求，服务器就会以为是一个新的人，而不是同一个人，为了解决这样的办法，下面这种方法可以解决这种跨域的办法。
2017-09-27 00:27:35
4923
2
原创 关于ajaxFileUpload造成 input[type=file] change事件只能触发一次的问题
现在发现的问题通过js绑定的input[type=file] change事件只能触发一次原因该问题并不是由change事件失效造成的，而是ajaxFileUpload插件造成的，它会把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下除了重新绑定以外，如果是使用$fileInput.trigger('click') 方式，失效原...
2017-08-18 13:26:09
2064
1
转载 mui slider轮播组件常用API
原文:http://www.bcty365.com/content-146-5588-1.html组件介绍轮播组件是mui提供的一个核心组件，在该核心组件基础上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件。示例获取slide组件对象var slider = mui('#slider').slider();常用APIgotoItem(index)切换到指定轮播slide
2017-08-09 11:41:12
4883
原创 input的disabled属性会导致无法上传
如题 很多人会用disable禁止用户修改input的值 但是同时会导致form提交时不包含这个文本框的值 （disabled本意即为禁用 所以自然不会上传）需要实现禁止修改可以使用readonly属性
2017-07-29 13:42:54
1400
原创 JS实现点击按钮，复制文本框中的的内容
JSfunction copyUrl2(){ var target=document.getElementById("anyInput"); target.select(); // 选择文本 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好，可贴粘。");}html<textarea cols="20"
2017-07-28 09:04:03
5362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人