Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。
官方网站，
文章只是为快速在网页扩展一些工具能力提供一些思路。

Tampermonkey 基本使用

Tampermonkey 内新建一个脚本，如下地方配置你自己需要匹配的网站信息

1
2
3
4
5
6
7
8
9

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

然后匹配成功后，会在访问对应网站时看到如下图所示的图标上显示数字，这时可以开始编写你的脚本了

筛选简历基本思路

• 为网页添加一个按钮，点击可以开启简历过滤
• 对简历容器元素创建 MutationObserver，监听内部元素变更之后自动执行简历过滤
• 提取过滤规则配置，比如薪资、工作年限、学历、目前状态等
• 如果想要自动筛选可以通过触发翻页操作，如点击加载下一页

内容大部分来自 《javascript 设计模式与开发实践》一书，适当的结合自己工作实践，做出整理和笔记
系列： javascript 设计模式

策略模式

策略模式定义为定义一些列的算法，把他们一个一个封装起来，并且可以相互替换

• 分离变化和不变是每个设计模式的主题，策略模式也不例外
• 策略模式封装的算法，实际使用中算法也可能是相同的 业务规则，业务规则 目标一致，并且可以替换使用，就可以封装它们

基本实现

例：不同绩效等级的人对应不同的绩效奖金算法，通过抽离不同的奖金算法为策略，把请求委托给策略对象的某个方法进行计算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 计算奖金的策略
const aonusStrategys = {
    A(salary) {
        return salary * 5;
    },
    B(salary) {
        return salary * 2;
    },
    C(salary) {
        return salary * 1;
    },
    D(salary) {
        return 0;
    }
}

const calculateBonus = (level, salary) => {
    return aonusStrategys[level](salary);
};

console.log(`calculateBonus A：${calculateBonus('A', 5000)}`);
console.log(`calculateBonus B：${calculateBonus('B', 14000)}`);

内容大部分来自 《javascript 设计模式与开发实践》一书，适当的结合自己工作实践，做出整理和笔记
系列： javascript 设计模式

单例模式

单例模式的定义是产生一个类的唯一实例。

• 单例模式只能有一个实例。
• 对所有的访问都提供这一个单例。

传统语言的单例模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

class BaseSingle {
    constructor(...args) {
        this.init(args);
    }

    init() {
        // do something
    }
    
    static getInstance(...args) {
        if (!BaseSingle.$_instance) {
            BaseSingle.$_instance = new BaseSingle(args);
        }
        return BaseSingle.$_instance;
    }
}

// 传统语言单例模式的实现
console.log('传统语言的单例模式：', BaseSingle.getInstance('A') === BaseSingle.getInstance('B'))

为了方便在文章插入一些简单的前端代码可以直接运行，加上一个点击运行的按钮；另一方面也让自己好好写写代码 。

效果如下

• 鼠标放上去会显示出运行的按钮
• 点击运行单个：运行当前的代码块
• 点击运行全部：会同时载入文章中所有的代码块
• 点击运行同组：会运行连续的兄弟代码块

ps: 只在详情页显示运行按钮!! 写这几行 ES5 的代码真不容易 !!

测试分组第一组：

1
2
3
4
5

<div class="test">
    <h1 class="ymm">嘿嘿嘿嘿</h1>
    <h2>HTML 功能测试</h2>
    <button id="button">我是 Button1</button>
</div>

1
2
3
4
5
6
7
8

.ymm {
    color: red;
}
.test {
    position: relative;
    padding: 20px;
    background-color: #ccc;
}

1
2
3
4
5
6
7
8
9

// button1
var a = '1111';
setTimeout(() => {
    console.log(`独立作用域：a = ${a}`);
}, 200);
document.getElementById('button').addEventListener('click', function() {
    alert('Button1 (*^▽^*)');
    console.log('Button1 (*^▽^*)');
});

测试分组第二组：

1
2
3
4

<div class="test">
    <h2>多个HTML 节点测试 </h2>
    <button id="button2">我是 Button2</button>
</div>

1
2
3
4
5
6
7
8
9

// button2
var a = '22222';
setTimeout(() => {
    console.log(`独立作用域：a = ${a}`);
}, 200);
document.getElementById('button2').addEventListener('click', function() {
    alert('Button2 (*^▽^*)');
    console.log('Button2 (*^▽^*)');
});

记录下与happypack冲突的一些配置

1. vue 文件eslint错误会反复提示的问题

   happypack 如果对 eslint 开启了多线程，也可能会导致vue文件的错误提示反复抛出

2. Vue 文件使用 css module 后 $style 变量未 {}

   vue 文件css module 无法使用，读取不到编译后的module变量

实际上happypack带来的提升微乎其微，不过可能因为一些兼容问题折腾很久，建议不使用，升级webpack版本才是正确的解决方案

Webpack 从1到3已经从头配置过挺多次了，遇到的问题也挺多
这次中途接手的项目发现编译数据巨慢，每次eslint错误会反复输出，记录一次解决过程

问题描述

编译速度很慢
vue 文件的eslint 错误提示会反复提示
webpack 3 的版本

如图：

最近我们的CDN服务商 akamai 说他们已经有一些新的功能支持需要确定是否开启对应服务，这其中包括 Automatic Server Push，都送到眼前了 也不得不去看下 h2 Server Push的相关资料了。

包含如下功能：

• Prefetch Object
  边缘向终端用户下发HTML文件后，同时向源站请求HTML内容中js css文件（如果边缘没有缓存的话）。

  这个挺有用，边缘节点在收到html请求就会去预热html内的js css文件

• Automatic Server Push
  大致理解成基于人工智能的Server push，根据实际用户的请求数据分析合适推送的资源。

  这个就是今天的主题，我们后面会介绍

• Automatic Preconnect
  预先对第三方资源做DNS解析、TLS建连等操作。

• Automatic Font Preload
  也是 Sever Push，跟 Automatic Sever Push的不同就在于这是推送的 font 文件。

公司的安全部门偶尔会转个邮件反馈些被人找到的网站可能不安全的地方，这里整理下前端常见的安全问题，主要还是 Xss 和 Csrf

XSS

XSS - 跨站脚本攻击（Cross-site scripting）

最常见的攻击类型，攻击者可以利用这种漏洞在网站上注入恶意的脚本然后被浏览器执行。这些脚本可以任意读取 cookie，session tokens，或者其它敏感的网站信息，或者让恶意脚本重写HTML内容。

XSS 攻击可以分为3类：

• 存储型（持久型）
• 反射型（非持久型）
• DOM型

存储型（持久型）

注入型脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器上传回并执行。

最常见的就是一些博客或者评论系统对输入的内容没做限制，导致了脚本被执行，特别是在一些使用富文本的场景需要严格过滤。

如何攻击

举个例子：

比如在 a.com 的网站内，被用户 a 评论了这样一段代码 <script>sendXxx(document.cookie)</script>，然后网站没做转义和过滤就直接被渲染在了页面内，会被浏览器所执行。

当用户 b 来访问这个页面时，就会发送自己的cookie给攻击者，cookie如果存储了用户的登录凭证，那就可以被攻击者来登录账户了…

以上是以 cookie 为例，实际当用户可以插入恶意代码了，也就可以对网页的访问用户为所欲为…

Fiddler作为windows开发必备的调试工具，会经常使用到，不过对于mac端使用只有官方一个残缺版本，对mac版Fiddler的使用尝试以及日常使用做个记录
当然Mac也可以直接使用收费版抓包工具 charles

Fiddler常用方法

记录一些Fiddler日常的使用

Fiddler 配置代理服务器

1. 点击tools -> options -> connections
2. 勾选下图选项
3. 然后需要的设备保持在同一个局域网，配置代理 地址和端口 即可

为了同步使用印象笔记流程图，所以这里选择了mermaid.js 语法来实现
mermaidjs 详细使用语法参见 https://mermaidjs.github.io/#/

使用方法：

参考：https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

安装 package

1

npm install hexo-filter-mermaid-diagrams

在你的博客目录而不是项目根目录

配置 _config.yml

1
2
3
4
5
6

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "7.1.2" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true