给岁月以学习,而不是给学习以岁月

以此记录经常见到的小算法

求素数

算法：埃氏筛法，简单解释如下：
首先，列出从2开始的所有自然数，构造一个序列：

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

取序列的第一个数2，它一定是素数，然后用2把序列的2的倍数筛掉：

3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, …

取新序列的第一个数3，它一定是素数，然后用3把序列的3的倍数筛掉：

5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, …

不断筛下去，这些第一个数的集合就是所有的素数。

以python代码为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

arr = range(2, 100) # 生成2-100的序列


def getPrimeNum(arr):
    def fil(item):
        return item % arr[0] != 0
    result = []    
    while len(arr) != 0:
        result.append(arr[0])
        arr = list(filter(fil, arr))
    return result


result = getPrimeNum(arr)
print(result)

nginx是一个web服务器，类似apache。又不仅仅是个服务器，还可以反向代理、负载均衡…很多牛逼的网站都是用了nginx二次开发，比如说大名鼎鼎的 草榴。我们普通人可以通过反向代理来转发接口，实现 跨域。

不论你是windows还是linux，都可以用下面三个步骤来概括：

1. 下载安装，windows下不需安装，解压即可
2. 修改配置：conf/nginx.conf
3. 重启：第一次启动：start nginx；修改配置后重启：nginx -s realod
   然后访问就可以看到结果。

那么，下面放上其中的重点——修改配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

server {
    listen       80;
    server_name  localhost;

    location / {
        root   html;
        index  index.html index.htm;
    }

    location ~ /v2/ {
        # 反向代理https://api.douban.com
        proxy_pass https://api.douban.com;
    }
}

所谓反向代理，就是当你访问你的nginx服务器时，会转发到你设置的服务器上。比如上面当你访问localhost时，就转发到 https://api.douban.com 上。即你访问localhost相当于访问 https://api.douban.com 。

重启后就可以访问下豆瓣的接口了，比如：https://api.douban.com/v2/book/1220562 可以用 localhost/v2/book/1220562 访问。

得知谷歌云免费的消息，喜出望外，毕竟阿里云腾讯云这些一年价格也不菲。赶紧申请了一个，想申请的抓紧了。废话不说了，跟我一起在谷歌云上部署一个个人网站吧。

假设你已经拥有了一个谷歌云账号。没有的话赶紧注册一个，需要一个VISA的信用卡，其他的都是基本信息填写。

谷歌云上创建 Compute Engine 实例

1. 点击这里进入 Compute Engine 页面
2. 选择 创建实例
   • 地区选asia-east1-c，据说对大陆玩家友好。
   • 机器类型：我选了 小型(一个共享vCPU) ，我部署的网站很小，所以这个就可以了
   • 启动磁盘——更改：选择 CentOS7，其他不用变。因为我要用到mongodb，如果选择debian9，mongodb的官网目前还不支持，为了在debian9上安装mongodb，我也是被折磨得很心累。然后果断在同事的建议下果断新建了个CentOS7的实例。当然你也可以选择其他的…
   • 管理、磁盘、网络、SSH密钥：需要改网络部分，如果你之前已经创建了静态IP，外部IP这一栏就选临时，如果没有创建的话，请选择创建IP地址。
3. 点击创建，结果如下：
   

谷歌云有一个免费1年的服务，那就申请一个学习学习啦。对于linux之前只用过ubuntu，装啥环境感觉非常方便。用这篇文章来记录下自己的理解。

linux有很多发行的版本，想要了解请看这里。我这次使用了其中的centos7和debian9。之前我使用的ubuntu是基于Debian的unstable版本加强而来。

通用的命令

1
2
3
4

$ lsb_release -a # 查看 linux 系统版本
$ id # 查看当前用户与其所在的组
$ which node # 查看node命令所在地址
$ man ps # 查看ps命令的用法

systemctl命令：系统管理与服务管理

1
2
3
4
5
6
7
8
9

$ sudo systemctl start mysqld # 启动mysql服务
$ sudo systemctl status mysqld # 查看mysql服务的状态

$ sudo systemctl enable mysqld # mysql单元开机启动
# 查看开启启动项：
# 只显示sysV services，上面的mysqld是不展示的
$ chkconfig --list
# 查看系统服务，其中开机启动的服务状态是enabled，可以看到mysqld
$ systemctl list-unit-files

• David Corbacho’s article
• 官方文档

在lodash的方法里，有两个比较有趣的方法：debounce与throttle，这两个方法是用来限制连续事件的触发频率的。具体的使用请查看官方文档。

debounce: 防抖

1
2
3
4
5

_.debounce(func, [wait=0], [options={
    leading: false,
    maxWait: Number,
    trailing: true
}])

作用：连续触发的事件，如果一直在触发，没有中途暂停且暂停时间超过wait,那么这些事件会合并为一次，直到暂停时间超过wait时执行。然后判断下一轮…直到事件最后一次触发。
使用：
debounce()接受一些配置参数，返回一个 new debounced function，这个对象拥有cancel、flush方法，这两个方法都不咋用，就看看配置参数就行了。
默认的效果图：

使用leading属性的效果图：

所以，当设置leading:true, trailing: false时会在wait时间段的开始触发合并后的事件。

• 官方链接
• 翻译链接

官方解释

Assets

为了回答这个问题，我们首先需要了解Webpack如何处理静态资产。在 *.vue组件中，所有模板和CSS都会被 vue-html-loader 及 css-loader 解析，并查找资源URL。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) 中，"./logo.png"是相对的资源路径，将由Webpack解析为模块依赖。

因为 logo.png 不是 JavaScript，当被视为模块依赖时，需要使用 url-loader 和 file-loader处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader，因此可以使用相对/模块路径。

由于这些资源可能在构建过程中被内联/复制/重命名，所以它们基本上是源代码的一部分。这就是为什么建议将Webpack 处理的静态资源放在 /src 目录中和其它源文件放一起的原因。事实上，甚至不必把它们全部放在 /src/assets：可以用模块/组件的组织方式来使用它们。例如，可以在每个放置组件的目录中存放静态资源。

不讲为什么使用es6，只讲es6如何在各种环境下使用。目前浏览器…环境都不支持es6，所以我们需要babel

浏览器中使用

1
2
3
4
5
6
7
8
9
10
11

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel"> // 注意type
class Test {
  test() {
    console.log("test");
  }
}

var test = new Test;
test.test(); // "test"
</script>

Note:Babel可以用于浏览器环境,但是从Babel 6.0开始，不再直接提供浏览器版本，而是要用构建工具构建出来。所以，我们只是做简单的html时，又不想使用构建工具，可以通过安装5.x版本的babel-core模块获取。

1

npm install babel-core@5

仅以此记录 vue 中遇到的坑

组件的复用问题

Vue的虚拟DOM中，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。

然后我遇到了这样的bug：同事做了一个scrollbar的组件,我用在了steps组件中，用了多个。在点击下一步的时候当前step下的组件会销毁，我特意加了v-if，下一个step下的组件会创建，问题来了…上一步的scrollbar组件影响到了当前创建下的scrollbar组件。

原因：Vue的算法会尝试复用组件

解决方案：使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。加了key之后，就会重新渲染，而不是复用了。
代码：

1
2
3
4
5
6
7
8
9
10

<div class="stepContent" key="1" v-else-if="currentStep == 1">
    <s-scrollbar wrap-class="scrollheight">
      ...
    </s-scrollbar>
</div>
<div class="stepContent" key="2" v-else-if="currentStep == 2">
    <s-scrollbar wrap-class="scrollheight">
      ...
    </s-scrollbar>
</div>

结语：我想大多数玩家和我一样，都是在v-for里用到了key，我虽然用到了，但是没有真正理解它，所以才会碰到这个bug不知道原因，还傻乎乎的去看组件的源码，浪费了很长时间。理解最值得重视…

最后附上：key的官方介绍

…

含义：

1. 函数中的剩余参数

1
2
3
4
5
6
7

function pick(object, ...keys) {
    let result = Object.create(null);
    for (let i = 0, len = keys.length; i < len; i++) {
        result[keys[i]] = object[keys[i]];
    }
    return result;
}

keys 是一个包含所有在 object 之后的参数的剩余参数（这与包含所有参数的 arguments 不同，后者会连第一个参数都包含在内）

2. 数组的扩展运算: 将一个数组分割，返回分离的各个项
在vuex中的辅助函数中常有这样的用法，如下:

1
2
3
4
5
6
7
8
9
10
11
12
13

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

作用是将mapGetters返回的数组分割开来放到了computed属性里
还有这样一个例子：

1
2
3

let values = [25, 50, 75, 100]
// 等价于 console.log(Math.max(25, 50, 75, 100, 120));
console.log(Math.max(...values, 120)); // 120

3. 对象的扩展运算：属于es7的内容

1
2
3
4
5
6
7

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }
// 分隔符---------------------------
let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

本组件是基于Vue2的自定义tree组件，参考了weibangtuo的实现，实现了以下功能:

• 节点单击钩子函数与选中效果
• 树节点默认的增删改

使用

代码

1.基础使用：给s-tree组件传递tree-data即可,treeData中单个节点的数据结构:

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

{
  name: 'Node Name',
  title: 'Node Tag title attr',
  isParent: true, // Requested for parent node
  isOpen: false, //  Control node to fold or unfold
  icon: 'fa fa-folder', // Icon class name
  openedIcon: 'fa fa-folder-open', // 节点打开时的icon样式
  closedIcon: 'fa fa-folder', // 节点折叠时的icon样式
  children: [], 
  buttons: [ 
    {
      title: 'icon button tag title attr', //[opt]
      icon: 'fa fa-edit',
      click: function (node) { 
          // 自定义事件
      }
    }
  ],
}

本例所使用的json数据
2.节点单击事件：监听node-click,此方法接受了node参数(点击的节点对象)
3.节点后的按钮事件: buttons下click的值可以是自定义方法，也可以默认方法，默认有addNode、delNode、editNode字符串

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

<template>
    <div class="tree-demo">
        <s-tree :tree-data = "treeData" @node-click="nodeClick"></s-tree>
    </div>
</template>
<script>
import sTree from "src/common/component/tree";
let treeData =  require("./tree.json");
//自定义事件
treeData[0].children[1].buttons[0].click=function(node){
    alert('自定义添加事件');
}
export default {
    data(){
        return {
            treeData: treeData
        }
    },
    components:{
        sTree
    },
    methods:{
        nodeClick(node){
            console.log(node);
        }
    }
}
</script>