最近又被备案号发邮件通知，我的个站备案有问题了，才想起来好久没有折腾这个玩意了，也没有写东西了。这两天就不想用 Typecho ，就想写记录的方式都是形式，还是回归最朴实的方式吧。然后就准备还是继续在hexo上写东西了，然后用 GitHub Action 来进行个推送，保证 GitHub Pages还能正常使用，然后在增加小shell，来给我个人服务器上推送一份，本来好好的使用的 travisCI，那天看了下，好像更新了，又要重新申请，免费版本还要限制，那就 GitHub Action 了

hexo 使用GitHub Action 进行部署

Hexo 使用的是 GitHub Pages，我选择了 dev 分支进行笔记记录，然后 push 到 dev 分支，然后 master 分支作为主分支，用于发布页面。这里，我就想把页面的构建流程全部放在 GitHub Action 上进行这一系列的操作。

创建脚本

在项目根目录下，根据下图所示，创建.github/workflows 文件夹，然后在里面可以随便创建个 main.yml，或者起名其他的 yml文件

了解下 Github Action yml规范

可以在官网，或者其他学习网站上，大概了解下这个流程写法的规范，以及方式和方法。然后进入yml，可以进行简单的脚本编写

创建 secrets

对于在 yml 要使用到的自己的私密key 或者，一些服务器 IP 或者密码，不想暴露在外面的，都可以在这里创建，然后在 yml 中，通过变量的方式引用就可以了

分析 yml 脚本

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Deploy Chencc_Blog  #自动化的名称

on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push: # push的时候触发
    branches: [ dev ]  # 哪些分支需要触发
  pull_request:  
    branches: [ dev ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  Blog_CI-CD:
    runs-on: ubuntu-latest  # 服务器环境
    # Steps represent a sequence of tasks that will be executed as part of the job
    
    steps:
      # 检查代码
      - name: Checkout
        uses: actions/checkout@v2  #软件市场的名称
        with: # 参数
          submodules: true
          persist-credentials: false
          
      - name: Setup Node.js
       # 设置 node.js 环境
        uses: actions/setup-node@v1
        with:
          node-version: 'v12.14.0'
          
      - name: Cache node modules
      # 设置包缓存目录，避免每次下载
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          
      # 配置Hexo环境 
      - name: Setup Hexo
        run: |
          npm install hexo-cli -g
          npm install
           
      
      # 生成静态文件
      - name: Build
        run: |
          hexo clean 
          hexo g
        
      # 部署到 GitHub Pages
      - name: upload GitHub repository
        env: 
          # Github token
          ACTION_DEPLOY_KEY: ${{ secrets.ACCESS_TOKEN }}
         # 将编译后的博客文件推送到指定仓库
        run: |
          mkdir -p ~/.ssh/
          echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          
          git config --global user.name "chencc"       #username改为你github的用户名
          git config --global user.email "932322877@qq.com"     #username改为你github的注册邮箱
          
          hexo deploy
          
      # set docker evn
      - name: Set up Docker Buildx
        id: buildx
        uses: docker/setup-buildx-action@v1
      
      # 登录到阿里云容器镜像服务
      - name: Login to Ali Docker
        uses: docker/login-action@v1
        # 配置登录信息，secrets 变量在 github settings -> secrets 中设置
        with:
          registry: ${{ secrets.ALIREGISTER }}
          username: ${{ secrets.ALIUSERNAME }}
          password: ${{ secrets.ALIPASSWORD }}

      # build 并且 push docker 镜像
      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
          context: ./
          file: ./Dockerfile
          push: true
          tags: ${{ secrets.ALIREGISTER }}/superchencc/chenccblog:latest
      
      # 打印 docker 镜像 SHA256 Hash 值
      - name: Image digest
        run: echo ${{ steps.docker_build.outputs.digest }}

mapbox 是一个美国的地图服务供应商，在地图领域技术上是非常领先的。当时对于公司内部想使用 mapbox，但是又是服务于内网客户，于是研究了下mapbox的离线部署方案，这里做个记录，但是mapbox还在高速更新迭代中，这是基于当前能实现的一个方案，后面如果还在使用mapbox，或者继续研究的话，在继续记录吧。

mapbox-gl 介绍

mapbox是目前地图领域很领先的一家公司，已为 Foursquare、Pinterest、Evernote、金融时报、天气频道、优步科技 等公司的网站提供了订制在线地图服务。Mapbox 是一些开放源代码地图库及应用程序的创建者或最大的贡献者，其中包含了MBTiles 规范、TileMill 制图 IDE、Leaflet JavaScript 库，以及 CartoCSS 地图格式化语言与语法分析器等。对于web端前端 GIS渲染引擎是Mapbox GL JS。由于公司项目处于内网环境，无法访问mapbox的地图服务，因此需要对mapbox进行本地化，以满足公司项目的需求。

https://www.mapbox.com/

mapbox-gl 自定义样式

• mapbox样式主要包括以上几个参数：
• version：JS SDK对应版本必须为8，
• name：样式的命名，
• sprite：雪碧图，将一个地图涉及到的所有零星图标图片都包含到一张大图中。
• glyphs：.pbf格式的字体样式，例如微软雅黑等字体库。
• sources：图层的资源文件，可以支持矢量切片、栅格、dem栅格、图片、geojson、视频等格式
• layers：是对每个图层样式的描述，这里就是对地图样式渲染的关键，可以做定制化地图样式。
  具体参数及其api可以参考mapbox官网。

离线部署

mapbox-gl.js，mapbox-gl.css离线部署

只需要从官网下载mapbox-gl.js，mapbox-gl.css到本地即可。

glyphs字体本地化

mapbox需要的字体为.pbf格式字体，可能很多人对于.pbf文件不太了解，在此介绍一下.pbf文件，.pbf文件的全称为Protocol Buffers，是Google公司开发的一种数据描述语言，类似于XML能够将结构化数据序列化，可用于数据存储、通信协议等方面。简单来说就是结构简单、速度快，和JSON之间的对比可以参考使用 Protocol Buffers 代替 JSON 的五个原因。

上面是微软雅黑的pbf字体库，如果想将把otf和ttf字体转换为Mapbox GL使用的protobuf格式的DF字体，可以使用mapbox开源的字体转换工具node-fontnik，具体使用方法可以参考官方文档

sprite本地化

访问mapbox地图服务我们可以从网络请求中查看官方样式中的sprite

同时还有一个sprite.json数据，用来描述sprite雪碧图

另外，需要更加地图zoom可能需要不同大小的sprite图片，为此mapbox用@2x,@3x等等分别表示2倍，3倍大小。

了解了mapbox是sprite原理以后，其本地化所要做的工作是将小图标合成一张sprite大图并在sprite.json中记录生成的位置信息，这里最主要的就是图标的摆放规则。

地图样式编写

首先，将sprite，glyphs替换为本地环境。

1
2
3
4
5

{
    "version": 8,
    "sprite": "http://172.16.43.88:8082/sprites/sprite",
    "glyphs": "/assets/fonts/{fontstack}/{range}.pbf",
}

其中fontstack代表字体文件夹名称，range代表当前字体文件名称（mapbox会根据当前zoom和地图自自动匹配）

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

{
    "layout": {
        "text-field": "{name}",
        "text-font": [
            "Microsoft YaHei",
        ],
        "symbol-placement": "line",
        "text-pitch-alignment": "viewport",
        "text-max-angle": 30,
        "text-size": {
            "base": 1,
            "stops": [
                [
                    13,
                    12
                ],
                [
                    18,
                    16
                ]
            ]
        }
    },
}

text-font下的Microsoft YaHei 为字体文件夹名称

其次，需要添加sources,sources为geoserver返回的地图数据。

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

{
     "sources": {
        "waterways": {
            "type": "vector",
            "scheme": "tms",
            "tiles": [
                "http://172.16.43.88:8088/geoserver/gwc/service/tms/1.0.0/chinamap%3Agis_osm_waterways_free_1@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
            ]
        }
        ...
    }
}

这里的 http://172.16.43.88:8088/geoserver/gwc/service/tms/1.0.0/chinamap%3Agis_osm_waterways_free_1@EPSG%3A900913@pbf 是Geoserver 发布的tms服务，获取的矢量切片

之前我们在geoserver中添加了waterways的图层，也介绍了geoserver服务能力及其tiles链接规范，我们就可以在sources中添加，type代表类型，我们是矢量切片选择vector，使用的是tms服务。下面我们看看如何编写waterways的样式。

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

{
    //waterway
    {
        "id": "waterway",
        "type": "line",
        "source": "waterways",
        "source-layer": "gis_osm_waterways_free_1",
        "filter": [
            "all",
            ["==", "$type", "LineString"],
            ["in", "fclass", "canal", "river"]
        ],
        "layout": {"line-join": "round", "line-cap": "round"},
        "paint": {
            "line-color": "hsl(209, 18%, 20%)",
            "line-width": [
                "interpolate",
                ["exponential", 1.3],
                ["zoom"],
                8.5,
                2,
                20,
                15
            ],
            "line-opacity": [
                "interpolate",
                ["linear"],
                ["zoom"],
                8,
                0,
                8.5,
                1
            ]
        }
    }
}

需要注意的是filter需要根据数据库字段进行筛选，其他具体可以看mapbox官方文档。
具体其他相关操作mapbox官网有相关的demo

https://docs.mapbox.com/mapbox-gl-js/api/

windows 环境下搭建 Geoserver 和 postgis 环境，postgis是基于 postgresql 的一个扩展。整套环境安装后，是为地图数据切片发布坐准备的。下面详细记录了，我是如何在Windows环境下搭建整套环境的，大家可以做个参考。

Windows搭建 Geoserver 和 postgis 环境

矢量切片与栅格切片

以fhgis为例我们发现请求的是一张张图片，最后通过将图片进行拼接形成一张完整的地图，首先图片的数据量较大，其次一旦生成的图片，那么所有的属性数据将不存在，图片修改起来麻烦，个性化定制也就很难实现，同时也无法进行交互。
对于矢量切片返回的是含有属性信息的地理数据，数据量较小，保留了地图属性数据，可以进行定制化，同时也很容易定制化，基于矢量切片地图可以对地图数据进行定制化和交互，同时基于现代设备的精细视网膜显示器和高性能的计算机图形使得应用具有身临其境的、可交互的效果以及处理大量数据的能力。这可以让我们持续的改进地图的设计和在web上2D和3D之间的转换。

相关软件安装

postgresql + postGis 安装

PostGIS是对象关系型数据库系统PostgreSQL的一个扩展，PostGIS提供如下空间信息服务功能:空间对象、空间索引、空间操作函数和空间操作符。同时，PostGIS遵循OpenGIS的规范。我们项目中主要使用它来保存原始矢量数据,后续可能需要通过PostGis对地理空间数据进行查找，筛选。
下载安装相应版本的postgresql和postgis(本次搭建采用的是postgresql-9.6.10-1-windows-x64.exe和postgis-bundle-pg96x64-setup-2.3.7-1.exe)。

geoserver + geoserver vectortiles插件安装

GeoServer 是 OpenGIS Web 服务器规范的 J2EE 实现，利用 GeoServer 可以方便的发布地图数据，允许用户对特征数据进行更新、删除、插入操作，通过 GeoServer 可以比较容易的在用户之间迅速共享空间地理信息。我们在GeoServer的基础上添加vector Tiles插件可以进行矢量切片。
首先安装geoserver (本次安装的版本为geoserver-2.13.2.exe)，安装成功后打开geoserver web admin page（默认登录账户、密码为admin,geoserver），此时可以看到如下界面：

接下来还需要安装geoserver vectortiles插件，该插件主要用来对数据进行矢量切片。需要下载geoserver对于的插件（本次安装的版本为：geoserver-2.13-SNAPSHOT-vectortiles-plugin.zip）。下载地址为http://geoserver.org/release/stable/

下载成功以后将该文件解压到GeoServer服务器下GeoServer文件夹的WEB-INF的lib文件夹下，重启geoserver，此时重新打开geoserver web admin page，

此时，我们发现可以进行矢量切片的相关设置，将前四个vertor layers选项勾上。

geoserver跨域设置

需要通过geoserver提高切片数据，需要进行跨域设置。找到GeoServer服务器下GeoServer文件夹的WEB-INF文件夹下的web.xml

找到上面显示的两个配置，并将注释去掉，下载对应的跨域jar包（本项目下载的是jetty-servlets-9.2.13.v20150730.jar），最后重启geoserver服务器。

数据导入

数据获取

1.基础地图数据：openstreetmap,其他地图厂商
2.建筑物轮廓数据（带高度）：淘宝，城市数据派等。

导入数据

打开shp2pgsql-gui

打开后点击view connection detail，输入postgresql数据库username,password，serverhost,Database名称后点击ok，此时数据库连接成功。

接下来导入.shp数据，点击add files，选择相应的.shp文件

点击import即可将数据导入到数据库，如果现实出现错误可能由于字符串编码的问题，此时可以通过option设置字符编码及其他设置。

Geoserver发布

新建工作区

新建数据源（postgresql数据源）

填写相关参数后，点击保存按钮。

添加图层

配置成功以后点击保存，此时重新点击图层以后，就好出现你已经发布的图层，如果需要对几个图层进行合并，可以建立一个图层组将几个图层进行合并。
最后可以通过layer preview查看图层是否发布成功。

为了加快地图访问速度，可以对矢量切片进行缓存。

可以选择切片等级以及切片的线程数后，点击submit，就可以在切片文件夹下查看切片文件。

注意，这里是在Windows上做缓存，问题影响不大，但是如果在linux做缓存，要注意如果切片文件夹过多，会有inode使用过多，会有inode占用100%，但是硬盘还有很大空间的情况

geoserver服务能力

可以从geoserver admin page查看支持那几种服务能力

以TMS为例，点击TMS，可以查看该服务的链接规范，在mapbox-gl中我们将使用到。

Geoserver 地图服务部署，使用的打包后jar包，用tomcat的方式部署

Tomcat部署 geoserver 服务

搭建 jdk Tomcat 等环境

此处我已有了一套一键式在服务器上搭建jdk以及Tomcat环境的软件包，直接解压文件包，执行shell脚本即可。

此处网上 linux 上搭建 Tomcat 教程很多，我就不写了，大家可以自己配置一下。

下载 Geoserver war包

此处我们采用 war 包的方式部署 Geoserver，去官网上面可以下载 war 包

然后启动 Tomcat 服务

Tomcat会自动帮我们解压war包，然后我们将war包删除，开始修改解压后war包内的配置，来修改跨域问题

修改跨域问题

将cors-filter-2.4.jar和java-property-utils-1.9.1.jar，两个jar包文件放入geoserver目录下webapps\geoserver\web-inf\lib中

打开geoserver目录下webapps\geoserver\web-inf中的web.xml

添加过滤器代码

1
2
3
4

<filter>
 <filter-name>CORS</filter-name>
 <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>

添加过滤器路由代码：

<filter-mapping>    <filter-name>CORS</filter-name>    <url-pattern>/*</url-pattern></filter-mapping>

添加完毕后，重启geoserver

如果目录中存在maven，需要在pom.xml中，添加

<dependency>    <groupId>com.thetransactioncompany</groupId>    <artifactId>cors-filter</artifactId>    <version>[ version ]</version></dependency>

这里我设置的Tomcat 端口号为 8088

最后直接访问地址，Geoserver 默认账号admin 密码是geoserver

这样，Geoserver 服务搭建就完成了

Geoserver 连接 postgis

设置 Geoserver 连接数据库 postgis

对于在 linux 系统机器上手动一步步安装 postgresql ，以及安装postgis，折腾了好久。对于整改过程，做了一个完整的记录。

离线安装 postgresql 和配置 postgis 插件 在 redhat 7.3

安装postgresql

下载 postgresql

1

可以去官方网站下载 postgresql，我这里使用的是postgresql-9.3.2.tar.gz

解压文件

1

tar -zxvf postgresql-9.3.2.tar.gz

进入解压目录并配置参数

1
2
3

进入解压目录    cd postgresql-9.3.2

配置安装参数    ./configure --prefix=/opt/postgresql-9.3.2

** 注：这一步可能会发生一些错误，如果发生了，请参考下面的常见错误说明 **

编译

1

make

安装

1

make install

创建用户

1

sudo useradd postgresql

创建数据库文件存储目录并给postgresql用户富裕权限

进入数据库安装目录 cd /opt/postgresql-9.3.2

创建data目录 sudo mkdir data

给postgresql用户赋予权限 sudo chown -R postgresql data

创建log文件

创建log目录 sudo mkdir log

创建pg_server.log文件 vi pg_server.log :wq

给postgresql用户权限 sudo chown -R postgresql log

添加环境变量

在/etc/profile中添加环境变量

1
2
3
4
5
6
7
8

#postgresql
export PGHOME=/opt/postgresql-9.3.2
export PGDATA=/opt/postgresql-9.3.2/data
export PATH=$PATH:$PGHOME/bin:$PGDATA
LD_LIBRARY=/opt/postgresql-9.3.2/lib
export LD_LIBRARY

source /etc/profile

初始化数据目录

切换用户 su postgresql

初始化数据库 initdb -D data

启动数据库，设置psql命令

先切换到root目录下 su root

执行这句命令 ** /sbin/ldconfig /opt/postgresql-9.3.2/lib **

然后切换到 postgresql 用户下

启动数据库服务 pg_ctl -D data -l /opt/postgresql-9.3.2/log/pg_server.log start

这里直接可以执行 psql 以 postgresql 用户的身份进入测试一下

但是目前为止，该数据库只允许本地访问，如果运行其他用户访问的话还需要进行如下配置

配置监听地址和端口，并允许远程主机连接

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

vi /opt/postgresql-9.3.2/data/postgresql.conf

修改如下配置：
    
    listen_addresses = '*'
    port = 5432 

vim /opt/postgresql-9.3.2/data/pg_hba.conf

修改配置如下：

    # chencc add
    host    all             all             0.0.0.0/0               password

![设置远程主机](pg_hbf.jpg)

修改防火墙，开发5432端口

我在这里是直接将防火墙关闭，并且禁止使用了防火墙，实际操作，可能需要在设置开放5432端口

1
2
3

sudo vim /etc/sysconfig/iptables
加上 -A INPUT -p tcp -m tcp -dport 5432 -j ACCEPT
重启防火墙 sudo service iptables restart

在postgresql数据库中为之前创建的postgresql用户增加密码

1
2
3
4
5
6
7
8
9

psql template1

修改postgresql用户密码：    ALTER USER postgresql PASSWORD '123456';

ERROR: role "postgresql" dose not exist

如不存在 postgresql 用户则新建该用户

CREATE USER postgresql WITH PASSWORD '123456';

注：此时 postgresql 用户为数据用户

这时，postgresql 用户就可以作为数据库的使用用户了，可以打开一个postgresql客户端，如 Navicat，尝试连接一下了

关闭postgresql数据库，并重新启动，使更改后的配置生效

下面是通过postgresql的pg_ctl工具操作的

关闭数据库 pg_ctl stop -m fast
启动数据库 pg_ctl -D data -l /opt/postgresql-9.3.2/log/pg_server.log start

常见错误

安装常见错误

1

readline libray not found

如果出现以上错误，说明你的系统缺少 readline库

1

rpm -qa | grep readline

zlib包同理

安装postgis

安装 geos

1
2
3
4
5

tar -jxvf geos-3.7.1.tar.bz2
cd /geos-3.7.1
./configure --prefix=/opt/geos-3.7.1
make
make install

安装 proj

1
2
3
4
5

tar -zxvf proj-4.8.0.tar.gz
cd /proj-4.8.0
./configure --prefix=/opt/proj-4.8.0
make
make install

安装 gdal

1
2
3
4
5

tar -zxvf gdal-2.1.1.tar.gz
cd /gdal-2.1.1
./configure --prefix=/opt/gdal-2.1.1
make
make install

执行postgis 安装

1
2
3
4
5
6

tar -zxvf postgis-2.4.5.tar.gz

./configure --prefix=/opt/postgis-2.4.5 --with-pgconfig=/opt/postgresql-9.3.2/bin/pg_config  --with-projdir=/opt/proj  --with-geosconfig=/opt/geos-3.7.1/bin/geos-config  --with-gdalconfig=/opt/gdal-2.1.1/bin/gdal-config

make
make install

登录psql，安装gis扩展

1
2
3
4

psql test

CREATE EXTENSION postgis
CREATE EXTENSION postgis_topology

出错

1
2
3

cp /opt/geos-3.7.1/lib/libgeos_c.so.1    /lib64/
cp /opt/proj/lib/libproj.so.0    /lib64/
cp /opt/gdal-2.1.1/lib/libgdal.so.20     /lib64/

安装postgis2.0.1出错configure error: could not find gdal

1
2

*checking for library containing GDALAllRegister... no*
*configure: error: could not find gdal*

解决方法：
编译时 完之后，修改下列文件

1./etc/ld.so.conf

1
2
3

include /etc/ld.so.conf.d/*.conf

/usr/local/pgsql/lib

2.执行指令

1

/sbin/ldconfig –v

再执行postgis的编译

在公司内部系统内虚拟化了一个 virtualBox 的虚拟机群，可以在上面折腾一系列的系统，来折腾折腾了，今天就折腾了一下 centos7 的安装，记录下。

virtualBox 安装 centOS7

最近一直在搞linux相关部署，搭建相关服务等。一直在公司服务器上操作，因为上面有部署服务，一直感觉玩的不好，就要玩出事。就想着在内网机上面搭建一个虚拟机装个centOS，学习一下相关知识，并且在上面试错。于是就有了下面这个在virtualBox上面搭建centOS7

下载 安装 virtualBox

这一步相信也不需要咋写了，直接去官网下载安装就是了，特别是Windows安装，下一步就好了

在virtualBox 中安装 centOS 镜像

第一步新建，因为选项中没有 centOS，但是Redhat是centOS的发行版本，选Redhat就好了

设置系统

因为我们使用的是iso镜像，所以要将光驱放在最上面用光驱驱动的方式来安装

设置 virtualBox 网卡

因为我们想做到虚拟机和本机能互联，本机也可以和虚拟机互联，同时，虚拟机也可以访问内网搭建的镜像源，所以我们设置了两张网卡，要用桥接的方式来做到

启动 centOS

现在virtualBox中的工作已经配置完成，现在启动，就可以进入系统安装了，同时可以在安装过程中可以设置下root用户的密码

配置系统中网络

两张网卡所在路径 /etc/sysconfig/network-scripts/

注意第二章网卡中 BOOTPROTO=static 注意设置成静态

重启网络

1

service network restart

关闭防火墙

查看防火墙状态

1

firewall-cmd --state

停止firewall

1

systemctl stop firewalld.service

禁止firewall 开机启动

1

systemctl disable firewalld.service

现在大家可以尝试ping一下网络，看看是否成功了

开启ssh

因为我们一般不想直接在虚拟机中操作命令行，因为界面什么的看上去都不如xshell或者putty用起来舒服，于是我们就要开启 ssh 服务

1
2
3

service sshd restart

service sshd status

现在我们就可以用 xshell 连接服务器，开启linux了

那天面试应届生，问了一下 Javascript 的事件机制，发现自己对于这块，有点不能确认了，这里来理了一下整个事件机制，彻底研究了下整改过程。发现对于这种东西，不经常用，就会忘记。还是要多复习，温故而知新，才能不断成长。

Javscript 事件捕捉、 事件冒泡

事件是监听在某个DOM元素上的，但是js的DOM事件有捕获和冒泡的机制，所以事件处理不是我们想的那样简单

由于存在捕获和冒泡，所以事件的触发元素（目标源）不一定是当前的监听元素。于是就有一些问题，本文要解决的就是将这些问题整理叙述清楚。

事件流

首先我们要理解事件流，即JavaScript中，事件触发的这一系列的流程

事件捕获 (event capturing)

事件捕获过程中，document 对象首先接收到click事件，然后事件沿DOM树依次向下，一直到事件的实际目标，既div元素

Html

1
2
3
4
5

<body>
    <ul id="parent">
        <li id="child">Test1</li>
    </ul>
</body>

Js

1
2
3
4
5
6
7
8

var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.addEventListener('click',function(){
    console.log('parent')
},true);
child.addEventListener('click',function(){
    console.log('child')
},true);

点击后打印结果为

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

parent
child
```    

## 事件冒泡 (event bubbling)

事件冒泡，既事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)

### Html
```[html]
<body>
    <ul id="parent">
        <li id="child">Test1</li>
    </ul>
</body>

Js

1
2
3
4
5
6
7
8

var parent = document.getElementById('parent');
var child = document.getElementById('child');
parent.addEventListener('click',function(){
    console.log('parent')
},false);
child.addEventListener('click',function(){
    console.log('child')
},false);

点击后打印结果为

1
2

child
parent

一般我们都不会传入第三个参数，第三个参数默认一般也都是false，也就是事件冒泡

实践

实现将一个功能，点击按钮，就可以弹出一个选择框，在我点击非选择框区域的时候，选择框就会自动消失。

1
2
3
4
5
6

<div id="wrapper" class="wrapper">
    <button id="button">点我</button>
    <div id="popover" class="popover">
        <input type="checkbox">浮层
    </div>
</div>

第一次可能我会这样实现

1
2
3
4
5
6

button.addEventListener('click', function(e){
    popover.style.display = 'block'
})
document.addEventListener('click', function(){
    popover.style.display = 'none'
})

这里当我们点击按钮之后，看上去什么都没有发生。这是为什么呢？那是因为在事件冒泡阶段，执行完第一个按钮点击事件后，继续向上冒泡，遇到了document的点击事件，于是又执行了，这样弹窗又再次隐藏了。

很简单的思路是，我们让执行完第一个事件之后，不再冒泡了，事件冒泡就此断开。

1
2
3
4
5
6
7
8
9

button.addEventListener('click', function(e){
    popover.style.display = 'block'
})
button.addEventListener('click', function(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();  //停止冒泡
})
document.addEventListener('click', function(){
    popover.style.display = 'none'
})

说在前面

为什么自己搭建博客，知乎不行吗？

有自己的博客可以随便折腾，并且全部是自己搭建的，有成绩感，为什么要建自己的博客，可以看看这篇文章：刘未鹏 | Mind Hacks。更多请为什么要建博客

重新起航

  为什么说重新起航是因为原来自己搭建过博客，折腾过好多平台，自己搞服务器进行过自己建站，但是都忽略了博客最重要的还是内容本身，搞的一切花里胡哨的一切外表，缺缺乏内部内容的充实，最后时间一长，就放弃了。在进行了一轮反思之后，于是决定用最朴实无华的 gitpage 做博客站点。这样，既可以推动我更新博客的同时，也可以在写技术博客时，把相关代码push到github上，让我的github也可以长时间的点亮。

  总得来说，现在萌生的继续写博客的想法，主要目的，还是因为写博客时总结自我知识，并且将其记录下来的最好的方式，一个知识你看似懂了，和你真的理解了，差距还是很远的。博客不是目的，只是手段，是知识学习积淀过程中的产物，可能写的不一定好，但主要目的还是服务于我自己的。所以大家如果看了我的博客，有不懂的地方，或者我写的不好的，欢迎大家提意见。

博客计划

  做什么事情，上来大家都是定计划，我也不能例外。但是可能计划不一定能赶上变化，但是尽量在这条主分支上，不至于偏离太多.第一阶段的文章应该主要

1. 地图可视化
2. webgl
3. react
4. es6(js相关)

主要是因为，现在工作内容是预研可视化方向的技术实现，虽然写代码很久了，但是对于openGL webGL这种可视化的东西，也是了解不深，现在主要要研究web端的可视化，所以webGL就必须要学习了，实现在web上，就选择用react写了，这样就需要用es6的代码了，这一连串的知识链就是这么安排的，希望能做出点成绩吧。

充满动力

计划已经确定了，下面就是执行了，在2018的结束开始了我博客的新篇章，努力在2019完美的实现，计划可能有相关变更，但是都会写在这篇置顶博客中