原文地址: https://blog.liyuans.com/archives/altered-bbr-onekey-script-collection.html
这里我仅做一个文档保存备份

雨落无声版本脚本

来源雨落无声：魔改版 BBR 一键安装脚本 For Debian8 / Ubuntu16 +

注意：内核固定切换为 4.10.15，成功率高。

简介

• 在 Debian 8 和 Ubuntu16 + 系统上一键部署魔改版 BBR，自动换内核成 4.10.15 ，自动安装 Headers。
• 用户只需要将系统安装成 Debian 8 或者 Ubuntu 16 即可，剩下的交给脚本来吧。

提醒

部分商家的 VPS 可能会遇到换内核之后无法启动系统的情况，所以请运行脚本前一定要备份好重要数据！！

一键脚本

1

wget -N --no-check-certificate https://raw.githubusercontent.com/FunctionClub/YankeeBBR/master/bbr.sh && bash bbr.sh install

• 然后根据提示重启系统。重启完成后，运行

1

bash bbr.sh start

• 查看魔改 BBR 状态，运行下面的命令，如果看到有 tsunami 就表示开启成功！

1

sysctl net.ipv4.tcp_available_congestion_control

以vue-cli2作为开发脚手架为前提，虽然内部做了不少的打包优化来减少文件体积，但是仍然有提升的空间。提升的方向大致就为两种：1. 代码结构；2. webpack的打包配置

调整代码结构

配合vue-router使用异步加载

如何配合vue-router使用异步加载在官方文档中已有说明，简单的来说就是在需要的时候再加载特定的js，这部分js在打包的时候会被单独打包到一个js中，以此达到减少bundle的体积的目的。

1
2
3
4
5
6
7
8
9
10
11

const TestView = () => import('@/views/test-view');

const routerOptions = {
  routes: [
    {
      path: '/',
      component: TestView,
    },
    // ...
  ],
}

接触过面向对象语言的同学肯定清楚，面向对象中有一个非常重要的特性，那就是继承。通过继承可以更好的封装一个类，良好的封装能够减少耦合，并且可以对成员进行更精确的控制，Vue也提供了类型的继承方法。

一个基础的状态组件

在考虑继承组件前，我们先创建一个基础的状态组件。组件的运用场景比较简单，有一个列表，列表的每一项有自己的状态，这个状态组件显示在列表中每一项的右上角或者左上角，并显示出具体的状态文本。

1
2
3
4
5
6
7

<!-- status.vue -->
<div class="item-status" :style="{
    ...statusStyles,
    ...positionStyles,
}">
    <span>{{ statusText }}</span>
</div>

公司最近要开发新的移动端项目，项目中有很多页面都用到了tab分组。
想起在 Android 中看到的 TabLayout + ViewPager 的组合，决定动手做一个类似的 Vue 组件。
github地址

组件设计

组件的功能基本参照 Android 端，首先把组件的设计要点列出来

• 顶部是一个可以横向的 tab-nav 容器；容器内需要填充 nav-item；使用者可以自定义 nav-Item 的具体内容，然后通过 template 与 slot 分发到这个容器中。
• tab-nav 容器有两种模式：
  1. nav-item 会自动扩展，平分容器宽度(每一个 nav-item 的宽度是一样的)。
  2. nav-item 不会自动扩展，每一个 nav-item 的宽度由使用者决定。
• tab-nav 容器内有导航条，nav-indicator (导航条) 可以在 tab-nav 会根据当前 nav-item 的 激活状态变化来滑动；可以定义 nav-indicator 的宽度缩放比，缩放比相对所在的 nav-item 的宽度；可以定义 nav-indicator 的位置(顶部或者底部)；可以设置 nav-indicator 的位置偏移值；
• 除去顶部的 tab-nav，剩下的就是内容 tab-content，tab-content 的容器水平排列，宽度为浏览器可视区域的宽度。
• tab-content 的具体DOM结构同样通过 template 与 slot 分发到组件中。
• tab-content的父级可以水平滑动，滑动使用 translate3d。
  • 在第一屏手指向右滑动时，禁止滑动，手指向左时可滑动，先向右再向左可以触发滑动。
  • 在最后一屏手指向左滑动时，禁止滑动，手指向右滑动时可滑动，先向左再向右可以触发滑动。
  • 除去上述两种情况，其他均可任意滑动。
  • 触发滑动到下一页(前一页)的条件默认是手指滑动距离为屏幕宽度1/3以上。
• tab-content 滑动时，nav-indicator 需要跟着一起滑动
• nav-indicator 滑动到目标位置后，如果当前 nav-item 不在浏览器可视区域的正中间，tab-nav 容器会尽可能的滑动使当前 nav-item 到达可视区域的正中间，如果允许的滑动距离不够的话，使用最大的可滑动距离。

在实际写代码前，尽可能的列出需求可以防止开发中突然发现新需求而不得不破坏当前结构的情况。(说的就是我o(╥﹏╥)o)
下面开始分析代码如何写。

这次记录的是一个类似移动端支付密码输入框组件的实现。当然，这种组件并不局限于在移动端使用，在PC端也可以使用，比如：在京东，淘宝下单输入支付密码时。
仓库地址

初步设计

既然要用来输入密码，那肯定是需要输入框的，假设默认输入位数是6位，那么需要准备6个输入框。

1
2
3
4
5
6

<!-- pwd-inputs.vue -->
<div class="inputs">
  <div class="input-wrap" v-for="(pwd, index) of pwdLength" :key="index">
    <input type="password" maxlength="1" v-model="pwds[index]">
  </div>
 </div>

有时突然奇想，想要快速获取某些网站的页面数据，但是没有合适的工具。
其实，开发一个爬虫工具是非常简单的。
这次我准备以爬取著名的插画网站:pixiv为案例，介绍如何爬取网站的页面数据
代码已经准备好，github地址
pixiv已用React重写，没有使用Service-side Rendering，所以普通的爬取方法是行不通的，日后再使用 puppeteer 进行重写爬取方法。

创建项目

• 现在任意文件夹中创建一个名为 test-crawler
• 进入 test-crawler 文件夹，开启 bash 或者 cmd 并cd到这个文件内，使用 npm init --yes 快速初始化 package.json 文件

创建好后，文件夹中会有如下的文件：

1
2

-(test-crawler)
|- package.json

Vue.js 作为一套构建用户界面的渐进式框架，经常被用作开发webApp，但是运行在不同系统的浏览器中总会遇到不少兼容性问题，尤其是Android下的各种魔改内核，而且没办法与native组件进行交互也是很大的遗憾。综上所述，我们决定将vue-webApp通过cordova打包为nativeApp，也是一种hybrid app。

准备开发环境及工具

• 安装Java SDK
  Java SDK的安装可以通过官网下载的安装包进行安装，推荐1.8版本，安装完后记得设置 classPath 和 path。具体步骤这里不做复述，可以自行google解决。

• Android SDK
  Android SDK的安装最好通过下载最新的稳定版Android Studio安装。
  安装成功后记得在系统变量添加ANDROID_HOME的路径（右键点击我的电脑–>属性–>高级–>环境变量–>系统变量–>新建）

  1	ANDROID_HOME=android sdk所在目录

• 安装cordova

  1	npm i cordova -g

• 其他工具

  1. Nodejs（不做复述）
  2. Npm（不做复述）
  3. Xcode（MacOS）

git commit是日常开发中经常会用到的一项操作。在我所知道的大部分人里经常有人为了偷懒使用git commit -m ''这种操作，但是，我秉承积极向上的学习态度查阅了不少资料后明白了commit的优雅之处。

现今，有许多优秀的开源的commit工具： commitizen/cz-cli; commitizen/cz-conventional-changelog conventional-changelog/standard-version，这些功具为你提供了提交信息和版本发布一条龙服务。再深入一点，还可以集成marionebl/commitlint来检查commit信息是否符合规范。

我深入了解后，将按照以下顺序对实践结果进行记录：

1. git commit message的格式
2. git commit 的模板
3. 使用Commitizen：规范你的commit
4. 使用cz-customizable：自定义adapter
5. 使用Commitlint：检查你的message
6. 使用standard-version：全自动CHANGELOG

使用debounce(防抖)来优化window的resize和scroll事件

用户在调整浏览器窗口大小时，会触发resize事件，如果在resize事件中有导致回流和重绘的操作的话会大量消耗性能，在低端机和低版本的IE都会悲剧，大概率进入假死状态。

用以下的方法可以调整resize事件中的代码的调用频率。scroll事件同理

1
2
3
4
5
6
7
8
9

var timer = null;
window.addEventListener("resize", function() {
  if(timer){
    clearTimeout(timer);
  }
  timer = setTimeout(function (){
    console.log("resize");
  }, 500);
});

当然，以上的只是一个非常简单的例子和使用场景。这种处理方式有一个比较正式的名称，我们称之为防抖。
（以上的案例的处理方法不是最终版）