大概是一个月前，实在是闲的没事，在图书馆想找点C++的书学习学习这个我一直没深入的语言。本来是奔着Essential C++去的，结果找了一圈只有英文版的而且还是旧版，想想就还是算了吧，这种技术肯定是要看新标准的更好。最后只找到了这本C++ Primer，虽然我内心对这种大部头的书比较抗拒，但是要想学好一门技术，这种权威的书籍是最好的。

看看这包浆的封面和书页，这块大砖也肯定帮到过不少人吧。

React 项目的初始化搭建

由于手动搭建 React 环境过于麻烦，要的依赖相当多，需要花费大量时间在配置上，所以就直接使用 React 官方提供的 create-react-app 脚手架工具。

脚手架的使用有两种方法，一种是先用 npm 或 yarn 全局安装 create-react-app 然后再create-react-app my_app，另一种是使用npx create-react-app my_app这样就不用提前安装好 create-react-app 工具。

Github 仓库地址：https://github.com/yydrowz3/notebook_app

之前在图书馆里找到了一本 React.js 实战，本来也正好在学习，就想着先借回来看看。

Icarus主题使用了Bulma这个CSS框架，所以写文章的时候可以利用Bulma来实现一些神奇的效果

大量参考了这篇文章

由于很久没有写博客了，很多Markdown的写法已经忘得差不多了。再加上最近又发现自己记忆力下降非常严重，学习新的东西不做点笔记实在是不行了，做笔记的话看了一下还是直接用md写比较方便，毕竟md用熟了以后玩GitHub的时候也能稍微写点像模像样的README。

所以在这里记录一下方便我以后要用了但想不起来时有地方找。

需要事件绑定的原因

首先说明一下，React生成出来的事件，里面的this并不是指向自身的，这是Javascript语法的规定，是不可避免的。

比如<button onClick={this.plus}>plus</button>中，plus上的this其实是绑在了window上的，也就是事件响应时的上下文，并不是当前的组件实例。说简单点，就是当触发该事件时，是在浏览器的总的一个环境里的，所以这时事件里如果用到this的话，this指向的其实是window。

但是这样会使得事件的使用和处理变得相当麻烦，所以这时就需要将事件内的this指针转移到事件的作用域上。

简单看一下bind()函数

调用 bind() 会创建一个新的函数，当这个新函数被调用时，函数内部的this会被置为参数提供的值。

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

var example = {
    value: 114514,
    getValue: function() {
        return this.value;	//这里使用了this
    }
}

var unbindThis = example.getvalue;
console.log(unbindThis()); // 调用的对象是window，所以里面的this.value => window.value
// output: undefined

var bindThis = unbindThis.bind(example);
console.log(bindThis()); // 但是bind之后，会将this的值置为example提供的值
// output: 114514

最近在学Vim，确实是一个非常好用的编辑器，因为所有的操作都是通过键盘来实现的。
以前使用其他编辑器的时候经常会不断使用鼠标来完成一些操作，这就导致了右手一直在键盘和鼠标之间挪动，而且每次从鼠标挪回键盘时都会出现右手不知道放在键盘哪个位置的情况，所以就要么使劲摸j键上面的那个点，要么就是眼睛看一下键盘。虽然都不是什么大问题，但是频繁的变化真的会打乱思维。所以现在决定要好好学一下Vim。

正因为Vim的操作都可以通过键盘实现，所以Vim的快捷键非常多，在初学的过程中就记了很多基本的快捷键，现在在博客上分享一下，也方便我以后想用的时候速查。

Normal Mode

指针移动

基础移动

hjkl -> 左下上右

横向移动

w -> 移到下一个单词的开头，以空格和特殊字符划分
W -> 移到下一个单词的开头，以空格划分
b -> 上一个…
B -> 上一个…

e -> 移到下一个单词的结尾，以空格和特殊字符划分
Ee -> 移到下一个单词的结尾，以空格划分
ge -> 上一个…
gE -> 上一个…

f + … -> 移到本行下一个输入的字符上
F + … -> 移到本行上一个输入的字符上
t + … -> 移到本行下一个输入的字符前
T + … -> 移到本行上一个输入的字符前

(f + …)搜索后
; -> 重复搜索下一个
, -> 重复搜索上一个

0 -> 移到当前行第一个字符
^ -> 移到当前行第一个非空白字符
$ -> 移到当前行最后一个字符
g_ -> 移到当前行最后一个非空白字符

一直觉得之前的博客不太满意，不管是UI还是整体的风格，总感觉看着太单调了。
最近没什么事就想着把博客重新搞一下，在这里记录一下更新博客的过程。

其实想换的时候还是想了一下要不要换个Word Press之类的用用，但是又想到自己假期的时候接触了一下前端的东西，自己还是挺感兴趣的，HTML、CSS、JS，虽然不至于学得很精通，但是自己玩玩还是可以的。所以就想着还是用这种纯前端的博客吧。毕竟没有后台源码看起来也相对简单一点。

购买云服务器

要搞这种纯前端的博客，其实根本用不到服务器，一个对象存储基本上就够了。

但是我对Linux比较感兴趣，自己电脑配置不高，上虚拟机太耗资源了，而且用起来不太方便，特别是我这种一会笔记本上玩玩，一会又台式机上玩玩的，所以还是买个云服务器，只要有网就直接ssh连上去玩就行。

最近开始学习并试着用 vim 了，因为这个编辑器完全可以按照自己的想法配置，对于配置的过程我还是比较有兴趣的。

因为每次换设备都要重新配置太麻烦了，在这里存一下我的 NeoVim 的配置文件，下次需要到别的电脑上用 vim 的时候直接来这里找配置就行了。

只是一些基础的设置，编辑器的基本外观还有改的键位等，插件什么的还没有完全适应，所以插件部分等之后再修改。

主文件

首先是 ～/.config/nvim/init.vim
这是 nvim 的配置文件，但是我想把配置分成三个部分，基础、键位、插件。这个文件主要就是看前两行怎么引入其他文件

同源政策

Ajax 只能向自己的服务器发送请求。A 网站中的 HTML 文件只能向 A 网站服务器中发送 Ajax 请求，A 网站是不能向 B 网站发送 Ajax 请求的。

使用 JSONP 解决同源限制问题

jasonp = json with padding
不属于 ajax 请求，但是可以模拟 Ajax 请求。

利用 script 标签发送请求
解决的是 get 请求，传递参数需要拼接 url

封装

客户端(浏览器端)

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

function jsonp(options) {
    // 动态创建script标签
    var script = document.createElement('script');
    // 拼接字符串的变量
    var params = '';
    for(var attr in options.data) {
        params += '&' + attr + '=' options.data[attr];
    }
    var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
    // 将它变成全局函数
    window[fnName] = options.success;
    // 为script标签添加src属性
    script.src = options.url + '?callback=' + fnName + params;
    // 将script标签追加到页面中
    document.body.appendChild(script);
    // 为script标签添加onload事件
    script.onload = function() {
        document.body.removeChild(script);
    }
}

服务器端