写在前面原生的滚动条很强大，但是各个浏览器对于滚动条开放的 api 不同，google 是相当有好的，样式几乎都可以修改，But IE 就只能修改颜色，然而只改一个颜色不够啊，还是那么粗那么生硬为了保证样式的统一，就得自定义一个滚动条，如果你也想写或者你正在写但是卡在了某个地方，那就看看我踩过的坑吧 效果 实现思路首先需要实现这几个功能 *搭建好基本 DOM 框架*计算滑块高度和位置*当鼠标滚轮滑动，页面同步滚动*鼠标左键点击可以实现拖动*当 DOM 发生变化，更新滚动条位置和长度 搭建好基本 DOM 框架首先你得要有一个横向和一个纵向的滚动条出现在目标元素的右边和底部这是生成的基本的框架，ScrollBar 是目标元素，containerY 和 containerX 分别是纵向和横向的滚动条，wrapper 主要是为了滚动条定位也为了不去污染原本的 html 结构 1234567...

连续赋值在掘金看到一段很有意思的 js 代码 12345var a = {n: 1}var b = aa.x = a = {n: 2}a // ?b // ? *1、a，b指向 {n:1} 内存一*2、a.x 可以看出 内存一.x ，内存一的值被修改为是{n: 1, x: {…}}，内存一.x 值被指向 a*3、a 重新赋值执向 {n:2} 内存二*4、若再修改内存二的属性 那么也同时修改 b.x 的值 12a // {n: 2}b // {n: 1, x: {…}} https://stackoverflow.com/questions/38008672/how-does-a-x-a-n-b-work-in-javascripthttps://juejin.im/pin/5d49...

更新，评论系统切换为 gitalkgitment 登录 alert 报错 [object ProgressEvent]，打开 network 这个 gh-oauth.imsun.net 请求失败，https://imsun.github.io/gitment/dist/gitment.browser.js 内向网址 https://gh-oauth.imsun.net 发送了验证请求，这个gh-oauth.imsun.net是作者自行搭建的，现在不在维护了，所以出现了问题 看了 gitment 的 issue 很多人都反应有问题，官方的 demo 也不能用 所以现在切换为 gitalk，方法差不多，只需要改下类名就好 1234567891011121314151617181920212223#comment #gitalk-container(data-gitalk=JSON....

背景介绍hexo 是一个免费简单的博客框架，有很多好看开源主题，但是当你看到别人的博客和你自己的博客一模一样的时候，还是有点奇怪，熟悉又陌生的感觉 Hexo 内建 Swig 模板引擎，但是可以另外安装插件来获得 EJS、Haml 或 Jade 支持，Hexo 根据模板文件的扩展名来决定所使用的模板引擎，例如：layout.ejs，layout.swig 我有尝试过用 Swig，毕竟不需要安装插件，但是用过之后还是果断换回了 Pug(原 jade )，如果你两种模板引擎都没接触过那推荐你用 Swig，上手简单会快些，但如果你也是 Pug 的忠实粉丝，那么还是安装插件吧 你需要安装 2 个插件，渲染 jade 页面的插件和热更新的插件，并保存在 packagejson devDependencies 是开发时需要的插件 1npm install hexo-server hexo-brow...

  之前看到有人说，写 Blog 的人都是这样的，从刚接触 Blog 感觉很新鲜，用的都是免费的开箱即用先搭起来再说，然后发现免费的限制总是很多，开始不安分想法开始变得有点多，开始自己购买域名和空间，搭建独立博客想怎么折腾怎么折腾，后来又觉得独立博客的管理太麻烦，只是想要个能写能看能发布的简单的，再有那么一点点的自定义，周周转转还是回来了   前段时间自己买了域名、服务器、搭建环境，用 koa 写接口 + mysql 管理 + pug（原 jade ） 写页面做服务器渲染，接触了很多没接触过的东西   但是看看这个博客其实还是用 hexo 生成，之前是用的 next 主题，很好看符合大多数人的审美，但是用的人太多了，其实再看到有一个一样的博客的时候就想换了，所以这次还是自己写了个主题，一直在犹豫要不要发布到 hexo 的主题...

二级域名设置阿里云的域名解析设置页面 —> 点击添加记录 —> 出现弹框 *@：直接解析主域名 aliyun.com **：泛解析，匹配其他所有域名 *.aliyun.com *mail：将域名解析为mail.aliyun.com，通常用于解析邮箱服务器 *二级域名：如：abc.aliyun.com，填写abc *手机网站：如：m.aliyun.com，填写m *显性URL/隐形URL：转发的地址必须完成备案且备案接入商为阿里云 TTL：为缓存时间，数值越小，修改记录各地生效时间越快，默认为10分钟

yarn 从去年vue-cli更新以来一直用，但一直都没认真了解过 yarn 背景介绍安装方法 三种安装方式Yarn 是一个包管理器，代码通过包（package） 或者模块（module）的方式来共享， 一个包里包含所有需要共享的代码，以及描述包信息的文件，称为 package.json 。 yarn npm 差异 同步安装：npm 是按照队列执行每个 package，Yarn 是同步执行所有任务 离线模式：Yarn可以从缓存中获取以前安装过的安装包，而npm每次都从网络下载 安装版本统一：yarn.lock 文件记录了所有安装模块的版本号，这样使我们每次拉取同一个项目依赖时使用都是一样的版本号，而 npm 需要执行 npm shrinkwrap 才会生成一个锁定文件 npm-shrinkwrap.json npm 输出内容多长，安装慢就算了还老是失败，相较而言 yarn 真的快多了...

有关浏览器缓存的几个疑问 浏览器缓存判断流程？ 两种分类协商缓存和强制缓存是什么？怎么判断？ 缓存的资源放在哪儿？ 不同的刷新对缓存的影响？ 浏览器缓存的流程当客户端请求某个资源，首先需要询问浏览器是否存在缓存有以下三种结果： 不存在，那么直接向服务器发起请求，就像第一次访问该网站一样 存在，通过Cache-Control、Expires判断后缓存已失效，那么则使用协商缓存，携带该资源缓存标识向服务器发起请求，服务器根据 http header 判断后决定是否使用缓存，若协商缓存失效重新拉取请求结果则状态码为 200 ，若协商缓存生效那么继续使用缓存状态码为 304 存在，通过Cache-Control、Expires判断后未失效，那么继续使用缓存状态码为 304 图示： 123456789101112131415161718 浏览器发起请求 | ...

一个文字粒子效果,折腾了一些时间，纯粹觉得好玩 点这里看效果 随机初始化部分粒子1、首先要明白每个粒子都是一个对象，都有自己的移动轨迹，起点，移动速度，终点 2、粒子活动轨迹：初始化 —- 聚合拼合文字形状 —- 散开 —- 再聚合 —- 散开… 3、我们需要根据动画时间调整粒子移动的速度来安排他们的位置 12345678910111213141516171819202122232425262728293031323334353637383940414243444546class Point{ constructor() { this.startx = Math.floor(Math.random() * docsize[0]), // 初始起点 this.starty = Math.floor(Math.random() *...

最近使用 iframe 的时候想要获取 iframe 文档信息的时候遇到了跨域问题，最后使用 postmessage 做父子页面通信解决需求也顺便学习了下 webworker 的使用webWoker 使用依赖 postMessage() 和 onMessage(), 所以先说这两个吧 postMessage && onMessage 提供网页文档之间互相发送和接收信息的功能，可用于解决跨域访问的问题 会在所有页面脚本执行完毕之后(包括方法之后或者之前设置的 timeout 事件)再执行 挂载于 window 对象上 postMessage 语法： otherWindow.postMessage(message, targetOrigin, [transfer]);  message: 发送的数据，不限类型，因为他自己会序列化 &emsp...