代码故事前端搬砖工

手记：开发 Rabzit 过程中的经验总结

文章目录
  1. 1. 项目环境
    1. 1.1. PWA 配置项
      1. 1.1.1. 移动版 Chrome 标题栏颜色
      2. 1.1.2. PWA 缓存更新
  2. 2. JavaScript 小技巧
    1. 2.1. 将文本转小写并去除非字母字符
    2. 2.2. 求两个数的最大公因数
      1. 2.2.1. 求多个数的最大公因数
  3. 3. ECharts
    1. 3.1. 安装
    2. 3.2. 引入
    3. 3.3. 使用

Rabzit 系《密码学导论》大作业之一：维吉尼亚加密器 的开发代号。

项目环境

Rabzit 选用的配置是：

Vue 2、stylus、babel、pwa、router、vuex、eslint (Error prevention only)

PWA 配置项

移动版 Chrome 标题栏颜色

在项目根目录（不是 ./src，还要再上）创建 vue.config.js

1
2
3
4
5
module.exports = {
  pwa: {
    themeColor: '#7957d5',		// 此处为紫色
  }
}

PWA 缓存更新

vue.config.js 添加 workboxOptions 配置项（其实不确定这句有没有用，加着吧反正）：

1
2
3
4
5
6
7
module.exports = {
  pwa: {
    workboxOptions: {
      skipWaiting: true
    }
  }
}

./src/registerServiceWorker.js 修改这里：

1
2
3
4
5
6
7
// ...
updated (registration) {
  console.log('New content is available: Please refresh.')
  registration.update()
  location.reload()
},
// ...

JavaScript 小技巧

将文本转小写并去除非字母字符

1
this.lowerCasedPlainText = this.plaintext.toLowerCase().replace(/[^a-z]+/g, '')

求两个数的最大公因数

来自 JavaScript: Find the Greatest Common Divisor or GCD of more than 2 integers。

1
2
3
4
5
6
7
8
9
10
11
function gcd_two_numbers(x, y) {
  if (typeof x !== "number" || typeof y !== "number") return false;
  x = Math.abs(x);
  y = Math.abs(y);
  while (y) {
    var t = y;
    y = x % y;
    x = t;
  }
  return x;
}

求多个数的最大公因数

其中 input 是一个数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function gcd_more_than_two_numbers(input) {
  if (toString.call(input) !== "[object Array]") return false;
  var len, a, b;
  len = input.length;
  if (!len) {
    return null;
  }
  a = input[0];
  for (var i = 1; i < len; i++) {
    b = input[i];
    a = gcd_two_numbers(a, b);
  }
  return a;
}

ECharts

安装

我用的是 vue-echarts，比较省事。

1
npm install echarts vue-echarts echarts-gl --save

引入

1
2
3
4
import ECharts from 'vue-echarts'
import "echarts";
Vue.component('v-chart', ECharts)
import 'echarts-gl';

使用

参见 ECharts 官方示例。