需要事件绑定的原因

首先说明一下，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);
    }
}

服务器端

Ajax学习笔记

这几天在学习node.js，看到Ajax的部分内容比较零散，很难记忆，但是Ajax又是相当重要的知识，实际开发中也常常会用到，所以写个笔记来整理一下。

请求参数的格式

在请求头中指定Content-Type属性的值

1. application/x-www-form-urlencoded

name=zhangsan&age=20&sex=男

2. application/json

{name: 'zhangsan', age: '20', sex: '男'}

注意：get请求是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的。

Ajax状态码

React学习…

看了下React的状态提升的理念，试着写了一下，同时也顺便复习了一下之前就不太熟的面向对象的编程思维。

大致上把React的核心概念看了，有点感觉了，是个非常好用的框架。


这几天又想折腾自己的破博客了，下了个主题，源代码文件夹里一看全是React，笑死，根本看不懂。

怎么办？硬着头皮学呗。而且本来也计划要学一下前端的框架的。

假期里学了html css js，但是实际开发中用这些效率实在是太低了，非常容易出问题不说，出了问题根本没法改，代码结构太乱了，一万个人一万种写法。所以前端也发展出了自己的框架，目前主流的就是vue react angular。本来是想学vue的，因为vue是比较新的，最近这几年特别火，中国的大部分公司前端都是用vue的，而且这语言本身就是中国人写的。

但是当时想学的时候看了半天看不明白，跑去学JavaScript基础了，现在倒是对React挺感兴趣的了。

跟着React官网教程做的TicTacToe，做倒是做出来了，就是代码看着还是有点逻辑混乱，毕竟没接触过这种框架式的前端开发，有点看不明白。

还是看着b站上的视频学的，第一次写一个像模像样的网页，还是挺有成就感的。

用的都是html和css的基础，还没有涉及到js，虽然现在学的这些都是实际开发中不会用到的，但是这种一点一点跟着教程把一个网页用最原始的元素搭起来的感觉真到好爽啊。

首页

写css前需要清除掉一点浏览器自带的属性。参考京东的写法，方便我以后忘记了可以来看一看。