由于很久没有写博客了，很多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连上去玩就行。

这个不知道从哪个群里下来的txt文件已经在我的桌面上呆了快半年了，强迫症看着难受，但是说删了吧，看看里面的内容，虽然乱但是还是能看出点东西的，所以就想着先扔到博客上吧，这样看着也方便。

再次声明一下，这是二爹写的，我只是从群里搞来的。

  简化篇

【Aqours】 恋になりたいAQUARIUM ,HAPPY PARTY TRAIN
【缪斯】 Snow halation

【天晴れ!原宿 / Appare 】 キミだけのワンダーランド
【FES☆TIVE 】 OIDEMASE!!極楽
【ベイビーレイズJAPAN 】 夜明け Brand New Days
【真っ白なキャンバス 】 Shout
雷蛇（only the railgun）
哈姆太郎
天体驱动 (Astrogation)
电波蛇（over the future）
【ポポロコネクト】 勇気がたりない,ねむたいパンク
【プランクスターズ 】 MACH DRIVE TIME
【偶想drop】 Go su,Level, Painfully violent
【Nilkly 】 Rainy dance,Asthma，The Edge of Goodbye,GIGABITE

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

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

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

主文件

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

由于在2021年还在使用128G硬盘的笔记本实在头疼，决定给这台老古董换一下硬盘。其实去年就想换了，因为每次用着用着就提示硬盘容量不足，然后到处清理，导致正在做的事思路一下子被打断，就在考虑换一下硬盘。可惜拖延症本症是在是行动力不足，就拖到了现在。。。

换硬盘这件事还是做了不少功课的，一开始还在想能不能换，搜了很多发现我这台笔电是最后一个可以换硬盘的版本，后面出的机器硬盘都焊在板子上了，这点还是比较幸运的。
然后就是看硬盘了，官方的硬盘标价太离谱了，搜了一下能换哪种硬盘。还好虽然接口不同，但是淘宝上有卖转接头，而且看了很多大佬换硬盘都是用的这种方式，也没什么严重的问题。于是我就决定也这样搞。

最终敲定硬盘买的是Samsung的970EvoPlus，因为本来的硬盘就是三星的颗粒，理论上稳定性兼容性什么的会好一点，而且看了大部分的教程用的都是这块硬盘。（其实是970Evo，去年想换的时候看了一下这块硬盘停产了，然后又有人说什么970EvoPlus有问题，会不识别什么的，于是就放弃换了。）
最近就好好研究了一下这玩意，其实之前那些人说的没错，确实是会有这个问题，但是那都是2019年的事了，其实那只是当时的固件有问题才导致的，而且只要刷一下固件，更新一下就能解决问题。看的视频的那时候三星还没有给出解决方案，20年年初才放出的新固件。所以还是被过时教程坑了一把，担心了很多没有的事。现在出厂的硬盘都是默认是新的固件，完全不会有不能用的问题。

时隔三个月（上次更换了电池）再次拆开背板，这样的工业设计确实没话说。

同源政策

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，做倒是做出来了，就是代码看着还是有点逻辑混乱，毕竟没接触过这种框架式的前端开发，有点看不明白。

今天是8月18日，暑假快要结束了，开学就是大三，莫名有点焦虑，但是现在生活的状态就是纯摆烂，就是看到了世界的参差，自己和身边人的差距，但是自个完全不想努力。不知道这种状态什么时候能改变。

标题‘夏日夜未央’这个名字是在MTL的微博看到的，本来是8.7的活动，但是被突如其来的一波疫情完美干碎，好在上海控制住了，在夏天的末尾还能举办最后一次这样的活动，夏日祭也就改成了夏日夜未央。喜欢这个名字，联想到月曜夜未央，听说还不错，下次看看。