![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端杂记
月光下的小风铃
这个作者很懒,什么都没留下…
展开
-
warning: unable to access '/Users/test/.config/git/ignore': Permission denied的解决办法
1、cd ~2、更改文件夹权限:sudo chmod 755 .config原创 2020-04-15 10:20:30 · 3949 阅读 · 0 评论 -
浅析webpack热更新
HMR(Hot Module Replacement)定义HMR会在应用程序运行过程中替换、添加或删除模块,不用重新加载整个页面,这与“自动刷新”不同,webpack-dev-server中的inline控制页面的自动刷新,即当有内容更新时,无需用户手动刷新浏览器。实现HMR在webpack配置文件中添加HMR插件webpack的dev server中添加hot参数但配置完这两步还是...原创 2020-03-31 20:51:58 · 285 阅读 · 0 评论 -
div水平垂直居中的方法
描述:现有html结构如下,实现child在parent中水平垂直居中。<div class="parent"> <div class="child"></div></div>方法一:flex.parent { display: flex; justify-content: center; //水平居中 alig...原创 2020-01-17 16:49:48 · 457 阅读 · 0 评论 -
并行执行npm脚本
有些时候我们想要好几个npm 脚本一起执行,如果用&&的方式去拼接其实是并行的,只有等前面的语句执行成功了才会接着执行。npm包npm-run-all 可以帮助达到并行执行npm语句的作用,用法是npm-run-all -p 脚本1 脚本2 脚本n,其中p是parallel(并行)的意思...原创 2019-11-12 17:47:15 · 698 阅读 · 0 评论 -
强大的stylus!
百闻不如一用。 我今天对stylus的用处有了非常直观的认识。 Talk is cheap,show you the code. 使用前:.lottery-sector li:nth-child(1) {background-color: #fff;transform: rotate(0deg) skew(54deg);}.lottery-sector li:nth-chi...原创 2018-05-24 18:31:28 · 1971 阅读 · 0 评论 -
iOS中position:fixed吸底时的滑动出现抖动的解决方案
两种抖动为什么抖动还会有两种?其实是我碰到过两种抖动的场景,第一个场景是native的抖动,第二个场景是h5的抖动。native的抖动前端开发人员会在app中打开webview,这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动,整个viewport跟着动,所以可以在生成schema的时候将参数bounce_disable(可能不一定都...原创 2018-06-29 11:31:45 · 13177 阅读 · 6 评论 -
移动端1px线&will-change
移动端1px线viewport告诉你1px为什么变粗html的代码中经常会有这么一句&amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&amp;quot;&am原创 2018-06-27 12:49:49 · 295 阅读 · 0 评论 -
footer 的实现方法
当内容不超过一屏时,footer在屏幕底部,内容超过一屏时,和主体内容有固定距离。也就是内容少的时候吸底,内容多的时候文档流排版。我尝试了几种实现方法。1.flex思路:给body设置flex,然后flex的方向设置column,主体内容flex:1于是会自适应高度。<div class="content">...</div><div class="fo...原创 2018-09-29 14:11:37 · 2898 阅读 · 1 评论 -
grid布局实现响应式效果
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1"> <style> .item{ ...原创 2019-07-15 17:46:27 · 946 阅读 · 0 评论 -
pm2的使用
本篇文章将对笔者遇到的情况做一些记录,不是对pm2的长篇介绍哈pm2是什么pm2是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等。就我使用的体验上用大白话来说,可以把原来比如用npm启动的窗口关掉,仍然可以通过ip和端口号运行。使用pm2首先可以全局安装,命令如下:npm install pm2@lates...原创 2018-05-24 14:20:55 · 1019 阅读 · 0 评论 -
一个细节的思考——严谨判定字符串的意义
有这么一个需求,判断URL是不是包含from参数,如果只是简单粗暴得用indexOf判断它是不是包含这个字符串,可能会有个问题,比如要求的参数是from=push,但是要是参数是afromb=,也会判定为true,这个是不符合逻辑的,所以应该用正则来处理这个看似简单的需求。错误示例: if (window.location.search.substr(1).indexOf('from') ...原创 2018-05-24 13:59:38 · 312 阅读 · 0 评论 -
WebStrom卡死在indexing的解决方案
做nodejs项目时,会有node_modules文件夹,WebStorm会扫描整个项目建立索引,也就是会看到如下图所示的等待(我等过半小时还没好,然后WebStorm直接未响应既然node_modules文件夹这么大,索性让WebStrom建立索引的时候别扫这个文件夹了,选中这个文件夹,然后右键,选择Mark Directory As,再选择Excluded就好啦原创 2017-12-20 15:55:07 · 5081 阅读 · 0 评论 -
关于前端那些值得看的书
《javascript高级程序设计》我觉得差不多是必看的书了,看完这本书很多之前的困惑会迎刃而解《javascript DOM编程艺术》内容如其名,平稳退化、渐进增强、以用户为中心的设计思想在这本书中体现得淋漓尽致《锋利的jquery》如果看完这本书还能将原生的js运用得很好就很棒棒!《深入浅出nodejs》学习nodejs值得一看的书《CSS权威指南》css2的很详细的全面的一本书,有些时候可以原创 2017-12-26 10:35:22 · 424 阅读 · 0 评论 -
踩坑
我踩的一些坑: 1⃣️nodejs转发跨域请求,也就是server proxy,把前端静态页面也挂在服务器上,这样可以用http协议访问,而不是用file协议访问;然后可以用判断路径的方法对不同对接口做不同对路由 2⃣️ls命令可以列出所有文件,ls -a可以把隐藏的文件也列出来,cat可以查看内容,touch可以创建新文件 3⃣️公司创建sshkey用公司邮箱 4⃣️关于this指向,它...原创 2018-05-09 10:25:19 · 185 阅读 · 0 评论 -
webview打不开的一个原因
场景:做了一个跳转,很奇怪的是,用自己的安卓手机能正常显示,但是iPhone是白屏,是用Charles代理。灵感:我是说为啥我在自己的电脑浏览器上google搜索显示说我要访问的是私密连接,我突然觉得这两者应该有什么关系,应该是Charles设置了SSL Proxy Settings那边进行了设置,所以是我就将设置取消了再尝试测试。结果:果然原因就是因为我的安卓手机安装了证书,iPhone没...原创 2018-05-20 11:06:55 · 2005 阅读 · 0 评论 -
关于安卓和iPhone的一个适配问题
场景:几个子元素的中心要在同一个水平线上,但是它们的高度不一样,我的方案是用flex布局,设置属性justify-content:flex-start,然后根据设计图设置margin-top,也就是子元素上边缘距离父元素上边缘的距离;问题:因为设计图是在iPhone的基础上设计的,所以当按照上述思路写代码的时候,会出现安卓手机的没在同一个水平线的问题;思路:对安卓和iPhones 设置两套c...原创 2018-05-20 13:06:25 · 1308 阅读 · 0 评论 -
单行文本和图片的水平中心线对齐方式
场景div里面有一个img标签,然后按照设计图给把图片的宽度和高度赋给了父元素,给img设置宽度和高度为100%,这样子元素img的宽度和高度就等于父元素的宽度和高度,奇怪的是出现了下图所示的问题:可以看到图1和图2的详情高度不一样,更加奇怪的是,两个img标签的宽度和高度也是一样的。 思路因为不同字体会造成不同的渲染方式,比如下面这样,给这三个span标签的字体都设...原创 2018-05-20 22:02:21 · 1503 阅读 · 0 评论 -
加锁还没用?你想知道的可能在这里!
updated先于动画执行 任务的执行顺序=&gt;(同步代码、微任务、render、宏任务) setTimeout(()=&gt;{},0)的意思不是立即执行,而是立即排队,取决于js当下线程是否空闲 vue检查数据不会检查外部的let定义的变量思路过程:方案一计数加setTimeout方案二记录上一个股票代码,只有当当前股票代码和上一个股票代码不一样时,才能执...原创 2018-06-04 15:03:24 · 382 阅读 · 0 评论 -
css 页面重绘和回流(重排)以及优化
一、html页面的呈现流程1. 浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。2. 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体,在解析的过程中会去掉浏览器不能识别转载 2016-08-18 14:58:46 · 538 阅读 · 0 评论