document

document copied to clipboard

Bumps [highlight.js](https://github.com/highlightjs/highlight.js) from 9.16.2 to 9.18.5. Release notes Sourced from highlight.js's releases. 10.3.2 - Oops, "Javascript". Tiny tiny release, just to fix the website incorrectly not listing Javascript in the...

dependabot[bot]

Bumps [npm-registry-fetch](https://github.com/npm/registry-fetch) from 4.0.2 to 4.0.5. Changelog Sourced from npm-registry-fetch's changelog. Changelog All notable changes to this project will be documented in this file. See standard-version for commit guidelines. 8.1.1...

dependabot[bot]

Bumps [acorn](https://github.com/acornjs/acorn) from 6.4.0 to 6.4.1. Commits 9a2e9b6 Mark version 6.4.1 90a9548 More rigorously check surrogate pairs in regexp validator See full diff in compare view [](https://help.github.com/articles/configuring-automated-security-fixes) Dependabot...

dependabot[bot]

### 基于vue搭建pwa应用（一） >更新于：2019年11月22日 > 本篇不做pwa相关的技术分享，只是记录一些自己搭建时遇到的问题供以后查阅。 > > 关于pwa的技术分享：https://juejin.im/post/5a6c86e451882573505174e7 这篇文章总结的挺好的，例子也很不错。 #### 实现效果一览 - 添加到主屏幕   - 离线应用 [离线时也能正常访问页面][3] - 服务器推送消息  #### 1.模拟https环境 Service Worker 只能运行在localhost或者https环境下，你可以跑个本地服务试一试，或者代理个线上https环境 -...

includeios

### First-of-type > 今天在写一个css样式时，试图用first-of-type来修改第一个拥有特殊class标签的样式，发现并未生效，后来发现一直以来自己对first-of-type，last-of-type，nth-of-type这类标签的运用场景理解错了。 #### 问题 当时的html代码结构是这样的 ```html 标题 一行元素 一行元素 一行元素 ``` 其中每个`一行元素`中间相隔10px，而`标题`与`行内元素`相隔大一些：15px，当时的想法是对第一个class是row的`一行元素`做特殊的样式处理，css代码为： ```scss .card .row{ margin: 10px 0; &:first-of-type{ margin-top: 14px; } } ``` 伪类没有生效 #### MDN解释： 贴上了中英文解释...

includeios

vue数据双向绑定的源码解析

2

### vue数据双向绑定的源码解析 > 关于vue是观察者模式还是发布订阅模式网上一直众说纷纭。 > > 我之前一直认为vue是发布订阅模式，dep对象作为发布订阅模式里的event channel来处理数据更新和通知，后来听了字节跳动银国徽老师的《Mvvm设计模式》课程，阅读完vue的源码后，对vue是如何实现双向绑定有个更清楚的认识。 #### 观察者模式和发布订阅模式 首先简单介绍一下观察者模式和发布订阅模式的概念和他们的区别：  **观察者模式** > 建立一种对象与对象之间的依赖关系，一个对象发生改变时将自动通知其他对象，其他对象将相应做出反应。在此，发生改变的对象称为观察目标，而被通知的对象称为观察者，一个观察目标可以对应多个观察者，而且这些观察者之间没有相互联系，可以根据需要增加和删除观察者，使得系统更易于扩展，这就是观察者模式的模式动机。 以卖房子为例：一个房东想卖掉自己的房子，于是他发布了一个售卖价格，有好几个买家心仪这套房子，但是又觉得价格有点小贵而犹豫不决，于是他们都关注着这套房子的房价伺机行动。 在这个例子里。房东就是那个观察目标，买家就是观察者，一个房东可能和多个买家对接，一旦房价发生变化就会告诉他们，而几个买家之间是没有相互联系的。 **发布订阅模式** > 发布订阅模式是观察者模式的实现，更利于系统的解耦和重用 发布订阅模式和观察者模式最大的不同就是存在一个“中介”来统一处理一些事件，使得订阅者（观察者）和发布者（观察目标）没有直接联系。 还是以上面的卖房子为例：房东想卖掉自己的房子，但是又觉得自己每次更改房价就要挨个打电话通知买家自己的价格变化了实在太麻烦，于是他找了一个中介贝壳，把自己的房子信息托管给他们，以后每次更改房价他就只和中介贝壳的工作人员说一声就好了，再由贝壳的工作人员来通知那些想买房子的人。 至此，房东不再和买家直接打交道，房东甚至不知道有哪些买家关注着自己的房子信息，房东也不关心贝壳的工作人员是如何通知买家的，可能是群发消息，避免了房东挨个打电话通知的重复劳动性。 #### 为什么说vue是观察者模式 对vue有一定了解的朋友应该都知道，vue实现双向绑定有几个重要的对象：Observer，Watcher，Dep。  乍一眼看这张图，觉得这妥妥的是上面说的发布订阅者模式呀，Observer是观察目标，Watcher是观察者，Dep是中间那个中介Event Channel。 实际上阅读完源码后，你会发现Dep没有做任何事情，他只是一个简单的Watcher的数组集合，在每次Observer数据发生更新时，循环遍历数组集合来挨个触发每个Watcher的update方法。...

includeios

### 新电脑软件配置 > 避免换台电脑像搬家一样累 - node :[利用n管理node版本][1] - git and ssh ```js # 一路回车，不要设置密码 $ ssh-keygen -t rsa -C $ cat ~/.ssh/id_rsa.pub ``` - Webpack - ITerm2：[ITerm2，让你的mac控制台更加丰富高效][2] - VSCode：[教你打造一款颜值逆天的 VS...

includeios

Intersection observer 实现滚动交互

1

## Intersection observer > 拥有“交叉观察者“小宝贝，从此妈妈再也不用担心我的滚动交互了。 #### 通过js计算属性来实现 记得以前写懒加载时，用的是一个（名字不重要）的第三方库，基本思想是：通过在onScroll事件里计算图片的offsetTop和clientHeight来判断图片是否到达了可展示区域，再替换img的src来加载正确的图片地址。 其实大部分和滚动相关交互的实现思路都和上述懒加载的实现差不多：**通过在onScroll里对一些计算属性值的判断来做一些操作**。这种方法不好的地方是代码里充斥着大量的offsetTop，clientHeight等取值计算，一来看着不舒服，二来这种计算属性的计算会造成浏览器的重绘，对性能上有一定的影响。 #### Intersection observer小利器 Intersection observer ：交叉观察者，顾名思义，他是一个判断两个元素是否发生交叉的观察者！ 这里是详细[MDN][1]介绍：Intersection Observer API 允许你配置一个回调函数，每当目标(**target**)元素与设备视窗或者其他指定元素发生交集的时候执行。设备视窗或者其他元素我们称它为根元素或根(**root**)。通常，您需要关注文档最接近的可滚动祖先元素的交集更改，如果元素不是可滚动元素的后代，则默认为设备视窗。如果要观察相对于根(**root**)元素的交集，请指定根(**root**)元素为`null`。  请先忍忍，例子里有动图介绍！ #### 具体用法 ##### 1.构造函数 ```js const observer = new...

includeios

liunx查询日志常用命令收集

1

### liunx查询日志常用命令收集 > 每次查日志很多命令都记不熟，在这里做个整理吧 ##### 是否有新增记录 tail - **tail -400f demo.log** ``#demo.log后400行日志`` ##### 关键记录查找 grep - **grep '5033' demo.log ** ``#查找demo.log下所有匹配'5033'的行`` - **grep -o 'order-fix.curr_id:\([0-9]\+\)' demo.log** `` #查找并提取（不是一行）匹配正则表达式的内容`` - **grep...

includeios

浏览器的渲染过程

1

# 浏览器的渲染过程 > 通常，我们只需要编写HTML，CSS，JavaScript，浏览器上就能呈现出漂亮的网页了，但是浏览器是如何使用我们的代码在屏幕上渲染像素的呢？ ### 首先，请先看一张大图 浏览器将HTML，CSS，JavaScript代码转换成屏幕上所能呈现的实际像素，这期间所经历的一系列步骤，叫做关键渲染路径（Critical Rendering Path）。其中包含： - 构建对象模型（DOM，CSSOM） - 构建渲染树（RenderTree） - 布局 - 渲染 在构建对象模型到构建渲染树的这一过程，还穿插着JS脚本的加载和执行。如下图所示：  ### 1.DOMTree的构建 浏览器的渲染从解析HTML文档开始，宏观上，可以分为下面几个步骤：  - 第一步（解析）：从网络或者磁盘下读取的HTML原始字节码，通过设置的charset编码，转换成相字符  - 第二步（token化）：通过词法分析器，将字符串解析成Token，Token中会标注出当前的Token是`开始标签`，还是`结束标签`，或者`文本标签`等。  -...

includeios