Posted on

读完了《远见》这本书，收益匪浅。相信以后自己遇到职业问题的时候，可以回过头来寻求答案。

以下是记录的Xmind笔记。

对应的xmind下载地址：

https://github.com/xixizhangfe/xixizhangfe.github.io/blob/hexo/source/images/%E8%BF%9C%E8%A7%81-%E8%BF%9C%E8%A7%81%E6%80%9D%E7%BB%B4%E4%B8%8E%E5%B7%A5%E5%85%B7%E7%AE%B1.xmind?raw=true

https://github.com/xixizhangfe/xixizhangfe.github.io/blob/hexo/source/images/%E8%BF%9C%E8%A7%81-%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5%EF%BC%9A%E5%8A%A0%E6%B7%BB%E7%87%83%E6%96%99%EF%BC%8C%E5%BC%BA%E5%8A%BF%E5%BC%80%E5%B1%80.xmind?raw=true

https://github.com/xixizhangfe/xixizhangfe.github.io/blob/hexo/source/images/%E8%BF%9C%E8%A7%81-%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5%EF%BC%9A%E9%94%9A%E5%AE%9A%E7%94%9C%E8%9C%9C%E5%8C%BA%EF%BC%8C%E8%81%9A%E7%84%A6%E9%95%BF%E6%9D%BF.xmind?raw=true

https://github.com/xixizhangfe/xixizhangfe.github.io/blob/hexo/source/images/%E8%BF%9C%E8%A7%81-%E7%AC%AC%E4%B8%89%E9%98%B6%E6%AE%B5%EF%BC%9A%E4%BC%98%E5%8C%96%E9%95%BF%E5%B0%BE%EF%BC%8C%E5%8F%91%E6%8C%A5%E6%8C%81%E7%BB%AD%E5%BD%B1%E5%93%8D%E5%8A%9B.xmind?raw=true

https://github.com/xixizhangfe/xixizhangfe.github.io/blob/hexo/source/images/%E8%BF%9C%E8%A7%81-%E5%BA%94%E5%AF%B9%E8%81%8C%E5%9C%BA%E5%92%8C%E7%94%9F%E6%B4%BB%E7%9A%84%E5%86%B2%E7%AA%81.xmind?raw=true

Posted on

把《You dont’t know Javascript》上篇看了一些，第一部分作用域和闭包看完了，第二部分除了第4、6章，其他都看完了。

本篇文章想通过几个例子，深入到作用域、变量提升、this的原理。

提升

我们都知道变量会提升，那么这些面试题你能保证都做对吗？

先看一下这些题，由简到难：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// eg1
var a;
console.log(a);
a = 2;

// eg2
console.log(a);
var a = 2;

// eg3
foo()
function foo () {
  var a;
  console.log(a);
  a = 2;
}

// eg4
foo()
var foo = function () {
  var a;
  console.log(a);
  a = 2;
}

// eg5
bar()
var foo = function bar() {
  var a;
  console.log(a);
  a = 2;
};

// eg6
foo()
bar()
var foo = function bar() {
  var a;
  console.log(a);
  a = 2;
};

// eg7
foo()
var foo = function () {
  console.log(1);
};
function foo () {
  console.log(2);
}

// eg8
foo()
var foo = function () {
  console.log(1);
};
function foo () {
  console.log(2);
}
function foo () {
  console.log(3);
}

// eg9
foo()
var a = true;
if (a) {
  function foo () {
    console.log("a");
  }
} else {
  function foo () {
    console.log("b");
  }
}

答案：

  1. 2
  2. undefined
  3. undefined
  4. TypeError: foo is not a function
  5. ReferenceError: bar is not defined
  6. TypeError: foo is not a function (ReferenceError: bar is not defined，这个错误不会出现，因为被前一个错误中断了)
  7. 2
  8. 3
  9. b

Posted on
The article has been encrypted, please enter your password to view.
Read more »

Posted on
  1. 安装typescript: dnpm i --save-dev typescript
  2. 根目录添加tsconfig.json文件，如下（以后补充）：

  3. 在webpack中添加ts配置，先安装ts-loader，dnpm i --save-dev ts-loader

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]

    其中appendTsSuffixTo: [/\.vue$/]是为了能够使用SFC单文件组件

  4. 原来的main.js改为main.ts, app.vue的script块要改成lang="ts"

  5. 使用Vue.use报错Property 'use' does not exist on type 'typeof Vue'
    这是因为tsconfig.json配置没有写对，正确的配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     {
      "compileOnSave": true,
      "compilerOptions": {
        "outDir": "./public/assets",
        "target": "es5",
        "allowJs": true,
        "strict": true,
        "noImplicitAny": false,
        "allowSyntheticDefaultImports": true
      },
      "include": [
        "./client/**/*.ts",
        "./server/*",
        "./server/**/*"
      ]
    }

  6. 报错
    vue.esm.js:5109 Uncaught TypeError: Cannot read property ‘install’ of undefined
    at Function.Vue.use (vue.esm.js:5109)
    at Object../client/main.ts (main.ts:13)

    tsconfig加上配置： "esModuleInterop": true
    参考：

https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter

tsconfig.json配置说明：

“moduleResolution”: “node” // https://www.typescriptlang.org/docs/handbook/module-resolution.html

使用echarts的坑：

https://www.cnblogs.com/catherinezyr/p/10768399.html

Posted on

  1. 下载B站视频，并转成音频
    第一步，终端执行命令brew install you-get安装you-get

    第二步，执行命令you-get url，如：you-get https://www.bilibili.com/video/av2573905/\?p\=3，就可以将视频下载到当前目录

    第三步，通过quicktime player打开下载的视频，保存为mp4（选择仅音频）

    如果下载的视频是flv格式，quicktime player无法打开，则需要先下载quicktime插件Perian，下载地址perian，安装后，就可以打开flv格式文件，然后再执行第三步。

    如果flv文件仍然打不开，就需要借助其他转换工具，比如：https://www.xunjieshipin.com/video/flv2mp4

Posted on

现有的：

gitstats 安装

  1. git clone git://github.com/hoxu/gitstats.git
  2. cd gitstats
  3. make install
  4. 提示gnuplot not found，需要安装gnuplot
  5. brew install gnuplot（这个过程很慢，需要安装大量包）
  6. 使用方式：gitstats 项目目录 输出目录

比较好的可视化网站：https://gitstats.report/

github: https://github.com/arjun27/gitstats

它实现的功能有:

  1. 近5周的activity summary(activity包括：commits、comments)
  2. 按项目、按人员筛选
  3. code review提出者、评论者

项目维度：

  1. 可以获取gitlab所有项目
  2. 可以获取某个用户owned所有项目(但无法获取某个用户参与的所有项目)
  3. 可以获取一个项目的所有成员（可以根据返回的username筛选项目）

commits维度：只能获取指定项目的commits

我要实现的功能及步骤:

  1. 组管理：只能通过group来获取团队的所有项目。手动录入group信息，再从组中拉取所有项目。
  2. 所有项目的commit数（可以按成员、日期筛选）：x轴是项目，y轴是commit数
    1. 遍历组，获取每个组下的项目和成员
    2. 获取所有成员的项目：先获取所有项目，然后根据username进行筛选
    3. 获取每个项目的commit：循环所有项目，对每个项目获取commit
  3. 所有成员的commit数（可以按项目、日期筛选）：x轴是成员，y轴是commit数
    1. 获取所有成员的项目：先获取所有项目，然后根据username进行筛选
    2. 获取每个项目的commit：循环所有项目，对每个项目获取commit
    3. 把commit分给成员
  4. 统计+1量
  5. 统计代码量
    1. 获取所有成员的项目：先获取所有项目，然后根据username进行筛选
    2. 获取每个项目的commit：循环所有项目，对每个项目获取commit
    3. 把commit分给成员
    4. 对每个成员的commit获取详情，统计行数

如何鉴权？

gitlab提供三种方式进行鉴权，鉴权方式

方案一：使用private token

  1. 一进入页面时，判断session里是否存在private token，不存在则弹窗让用户输入private token。输入完成后，把private token存入session。然后再发请求。

优点：实现简单

缺点：

  1. 需要用户手动输入private token
  2. session有效期过了以后，用户需要重新在gitlab上生成private token（因为gitlab生成token后只能让用户看到一次），然后再输入，比较麻烦

方案二：使用oauth2 token

  1. 把gitlab当作oauth2服务提供者，注册一个application，设置好回调地址Callback URL，会生成Application ID、Secret
  2. 通过https://gitlab.example.com/oauth/authorize?client_id=APP_ID&redirect_uri=REDIRECT_URI&response_type=token&state=YOUR_UNIQUE_STATE_HASH可以得到一个code，这里我应该使用https://git.xiaojukeji.com/oauth/authorize?client_id=APP_ID&redirect_uri=REDIRECT_URI&response_type=token，state可以不加。APP_ID就是Application ID
  3. 得到code后，发起post请求至https://gitlab.example/com/oauth/token，参数是
    { "client_id": "APP_ID", "client_secret": "APP_SECRET", "code": "RETURN_CODE", "grant_type": "authorization_code", "redirect_uri": "REDIRECT_URI" }
    这样可以得到如下的返回结果，其中access_token是我们想要的：
    { "access_token": "1f0af717251950dbd4d73154fdf0a474a5c5119adad999683f5b450c460726aa", "token_type": "bearer", "expires_in": 7200 }
  4. 得到access_token后，就可以正常发起请求了

过程：

  1. 初次访问页面时，判断session里是否有token，若有，则直接请求。
  2. 若无，则重新请求token，存入session

问题：是否会过期？

Posted on

现象：

  1. base.xiaojukeji.com不能通过ip访问（参考第3、6点）
  2. base-test.xiaojukeji.com可以通过ip访问，也可以访问子系统，访问子系统时会自动转成域名。（参考第4点）
  3. base.xiaojukeji.com不需要绑定host访问，base-pre.xiaojukeji.com需要绑定host

问题抽象：

  1. 为什么有的网站可以通过ip访问，有的只能通过域名访问？
  2. 为什么几个不同的网站解析后ip是一样的？
  3. 微服务是如何实现的？

原理：

  1. Ip、域名、url关系：一个ip可以对应一个或多个域名，url里协议后面//到第一个/之间是域名，ip与域名绑定关系需要申请，申请后才可以通过域名访问。没有绑定域名的ip，如果需要通过域名访问，则需要绑定host。
  2. 一个ip对应多个域名实现方式：虚拟host、反向代理，我们base平台使用的是虚拟host
  3. 如果一个ip对应多个域名，那么通过ip访问就会不知道到底使用哪个服务
  4. Nginx哪个选项是配置禁止ip访问的？listen 80 default; return 500;
  5. Nginx通过哪个选项配置通过ip访问时，自动转成域名？通过ip访问时，如果不带端口号，默认访问的是80端口，所以nginx可以监听80端口，并通过rewrite更改url
  6. Nginx配置多个server就相当于多个虚拟host吗？是的
  7. 线上nginx配置没有第3点禁止ip访问的配置项，为啥还不能通过ip访问？麒麟网关做了配置，把80端口代理到8080。
  8. 线上nginx配置没有80，只有8080，那在通过域名访问时为什么还能正常？麒麟网关做了配置，把80端口代理到8080。
  9. 麒麟网关做了哪些事情？不知道 暂时不去了解

参考：
https://blog.csdn.net/gui951753/article/details/83070180