vue如何禁止弹窗后面的滚动条滚动？
话不多说，直接上code：
1234567891011121314methods : { //禁止滚动 stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, /***取消滑动限制***/ move(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='';//出现滚动条 document.removeEventListener("touchmove",mo,false); ...
css居中大全集
写在前面在实际开发过程中，我们会碰到很多需要用到水平垂直居中的场景，为了方便大家的开发，特此做下总结和记录。话不多说，进入正题（温馨提示：以下所说的居中是相对于父盒子而言）。
1.父盒子使用flex布局控制子盒子水平垂直居中例如：
html部分： 123<div class="parent"> <div class="son"></div> </div>css部分：
12345678910111213.parent { height: 300px; width: 300px; background-color: deepskyblue; display: flex; justify-content: center; align-items: center; } .son { width: 100px; heigh ...
Git常用操作大全
什么是Git？Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。
下面我们说一说Git常见的操作
git config 常用配置配置邮箱和用户名
12345678## 全局配置git config --global user.name "your name"git config --global user.email "xxx@xxx.com"## 单个项目配置（先进入项目的根目录，带有.git隐藏文件的目录）git config user.name "your name"git config user.email "xxx@xxx.com"## 对单个项目进行配置可覆盖全局配置
配置命令别名
12## 比如给 git status 设置别名 st:git config --global alias.st status
查看已有配置信息
123git config --list## 或者git config -l
Git 创建仓库Git 使用 git init 命令来初始化一个 ...
git将某分支的某次提交合并到别的分支
写在前面今天我们来学习一下git，git在我们进行代码托管时的首选，所以了解并学会使用git是每个开发人员的必备技能。
在进行代码开发的时候，有时需要把某分支（比如dev分支）的某一次提交合并到另一分支（比如hotfix分支），这就需要用到git cherry-pick命令。
1.使用命令行首先，切换到dev分支，敲 git log 命令，查找需要合并的commit记录，比如commitID：8a645bf5；
然后，切换到hotfix分支，使用 git cherry-pick 8a645bf5命令，就把该条commit记录合并到了hotfix分支，这只是在本地合并到了hotfix分支；
最后，git push 提交到master远程，至此，就把dev分支的这条commit所涉及的更改合并到了hotfix分支。
2.使用图形化工具Sourcetree首先切换到你要合并到的分支，也就是目的地分支（比如hotfix），然后下拉框选中由当前分支选中所有分支，查看所有提交，找到别的分支的某次提交（也就是你想合并的那次提交，比如dev分支的某次commit），然后鼠标点击此次提交，右键点击然后选 ...
https原理
写在前面今天我们要讨论的主题是HTTPS，首先，我们要了解为什么会出现HTTPS？既然存在，就有它存在的必要性。我们都知道，HTTP协议是客户端和服务端进行通信的一种协议，而HTTP协议存在以下几个缺点：
1.通信采用明文传输（不加密），内容容易遭到窥视；
2.不验证通信方的身份，因此有可能遭到伪装；
3.无法证明报文的完整性，因此通信内容有可能被篡改；
正因为HTTP的诸多缺陷，才有了后面HTTPS诞生的必要性，HTTPS正是为了解决HTTP的诸多缺陷而诞生。
什么是HTTPS刚才说了，HTTPS的产生就是为了解决HTTP协议存在的主要缺陷，而通过上面的介绍，我们知道HTTP协议的主要缺陷有：未加密，没认证身份和无法确保报文的完整性，所以我们可以用一句最简短的话讲明白HTTPS，那就是：HTTP + 加密 + 认证 + 完整性保护 = HTTPS。
加密HTTP协议中没有加密机制，但可以通过和SSL(Secure Socket Layer，安全套接层)或TLS(Transport Layer Security，安全传输层协议)的组合使用，加密HTTP的通信内容。
SSL的全称是Sec ...
vue-cli3脚手架配合express搭建devserver
写在前面近期本人在github上自己用最新的vue-cli3脚手架初始化了一个移动端的项目，因为项目中要访问某大厂的后端接口，而他们的接口又设置某些头部跨域验证，所以，不得不在本地起一个devserver，用作接口代理转发。
说说旧版的vue-cli搭建devserver在说新版的脚手架之前，先来看一看以前的vue脚手架怎么配合express来搭建devserver。
我们在使用第三方框架例如vue，react在进行开发时，其代码是不能直接运行在浏览器上的，原因是浏览器不认识那些语法，这时我们会使用webpack进行编译打包转换为浏览器可执行的代码。但是试想我们在进行开发时，没写一行代码就要进行编译打包，然后再在浏览器里运行查看效果，这无疑大大降低了我们的开发效率，所以我们能不能让工具自己检测到代码变化然后自己自动的编译打包，然后我们便可以实时的查看到页面效果了。
首先，我们需要了解构建自己的devserver所需要用到的最基本的几个插件：webpack-dev-middleware，webpack-hot-middleware，http-proxy-middleware。
webpa ...
JS趣事：监听浏览器tab页切换
写在前面书中自有黄金屋，书中自有颜如玉！今天看书看到一个好玩的东西，随即想用博客记录一下，也想分享给更多的技术猿知道。那就是当我们切换浏览器的tab页的时候，可以对此行为进行监听，然后做一些自己想做的事情，比如改一改页面title了，或者别的一些操作。
JS监听浏览器tab页切换浏览器标签页被隐藏或显示的时候会触发 visibilitychange 事件。直接上代码：
12345if (document.hidden !== undefined) { document.addEventListener('visibilitychange', () => { console.log(document.hidden) })}
可以看到，当我们离开当前tab页的时候，控制台输出true，当我们进入当前tab页的时候，控制台输出false。
那我们利用这一特性来做一个简单的小案例，我们在用户由当前tab页切换到其他tab页的时候，我们修改当前tab页面的标题用来提醒用户快回来当前tab页，当用户再次回来的时候，我们再 ...
观察者模式（发布-订阅模式，消息机制）
观察者模式简介观察者模式（Observer）又被称作发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。
发布-订阅模式可以广泛的用于异步编程中，这是一种替代传统回调函数的方案。比如，我们可以订阅ajax请求的error，success等事件，在请求出错或者成功的时候做一些逻辑处理。或者如果想在动画的每一帧完成之后做一些事情，那我们就可以订阅一个事件，然后在动画的每一帧完成之后发布这个事件。在异步编程中使用发布-订阅模式，我们无需过多的关注对象在异步运行期间的内部状态，而只需要订阅感兴趣的事件发生点。
发布-订阅模式可以取代对象之间硬编码的通知机制，一个对象不用再显式的调用另一个对象的某个接口，此模式让两个对象松耦合的联系在一起，虽然不清楚彼此内部的细节，但这也不影响他们之间的相互通信。当有新的订阅者出现时，发布者的代码不需要做任何的修改；同样的，发布者需要改变时，也不影响之前的订阅者，只要之前约定的事件名称没有发生改变，就可以自由的改变他们。
创建观察者模式 ...
service worker实现资源离线缓存(构建离线应用)
写在前面今天我们来谈一谈ServiceWorker ,利用ServiceWorker 来进行资源的离线缓存，进而构建离线应用。谈到ServiceWorker，不得不谈一谈近些年大火的PWA。
PWA(Progressive Web App)翻译过来就是渐进式增强WEB应用， 是Google 在2016年提出的概念，2017年落地的web技术。目的就是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验的渐进式网页应用。
再来看看MDN官方的解释：PWA（Progressive web apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势。
资源离线缓存此节我们将通过一个简单的demo来向大家描述如何利用ServiceWorker来进行资源的离线缓存。先看看整个demo的目录结构：
先来看看app.js的内容：
123456789101112const sw = navigator.serviceWorkerif (sw) { s ...
JS滚动加载
前言近期比较忙，有几个大项目，一直忙到昏天暗地，都没时间更新博客，今天终于有时间啦，上正题，今天我们来聊一聊JS的滚动加载。在日常需求中，无数次的会遇到滚动加载的相关需求。
今天，我们呢用原生JS实现滚动加载，我相信原生JS都能实现，使用vue、react等前端框架实现那更不是问题，话不多说，先大致描述一下我们要实现的功能（描述需求，一个好的产品经理是多么的重要）：有一堆要展示的内容，但是我们不一次性展示出来，初始先展示一屏幕高度的内容，当滚动到页面底部时，这个时候一般是去请求接口拿数据，进而展示出来，但是今天，我们就不请求接口了，我们用添加dom元素来替代之。
先摆出页面的静态结构如下：
12345678910111213141516171819202122232425262728<style>* { margin: 0; padding: 0;}#app { height: 500px; overflow-y: scroll;}ul { list-style: none;}li { backgroun ...
