Vim 折腾记

昨天在微信读书上面看到了池建强的《MacTalk 人生元编程》,然后花了差不多一天看完,其中有篇有关于 Vim 的文章提起了我对这个编辑器的再一次兴趣(对的,我对它感兴趣很多次了,每次都懒..)。

一直懒得去慢慢配置它,又不想用别人的配置。自己用的编辑器还是想自己折腾,然后今天就趁着我对这个还有点热度赶紧折腾起来。

MacVim

其实在命令行里面直接写代码还有有些不习惯的,所以选了 MacVim 这个 GUI 版本。这样又可以与其他编辑器一样单独打开,想小改代码的时候又可以直接打开命令行搞。

在 MacTalk 的文章里面有提到 Vim 中文版本的帮助文档,遂下载之。果然还是中文的比较浅显易懂。

以前看别人的 .vimrc 配置,里面有些编辑器的基本配置,也不知道是哪里查的。原来这些配置可以在编辑器中输入 :help options 进行查看。

JavaScript 继承的那些事

众所周知,JavaScript 的继承是实现继承,而没有 Java 中的接口继承。这是因为 JavaScript 中函数没有签名,而实现继承依靠的是原型链来实现的。

原型链继承

JavaScript 中通过修改对象原型指向的对象来实现继承,即是将一个对象的原型指向要继承的对象实例,从而实现继承对象的属性及方法。

从零开始制作 Hexo 主题

写在前面

本文将会从零开始开发一个简单的博客主题。样式主要参考 Hexo theme 中的 Noise 主题。

开始之前你需要了解:

  • 模板引擎
  • CSS预处理器
  • Hexo 文档

本文使用的模板引擎为 ejs,使用的 CSS 预处理器为 stylus。这也是 hexo 项目预装了的 render 插件,如果想使用其他模板引擎或者其他 CSS 预处理器,可以安装相对应的 render 插件。例如我的 Even 主题使用的是 Swig 与 SCSS。

本文的代码: theme-example

2016 年终总结

一转眼 2016 年就快要结束了,这一年对自己来说收获了很多。

去年的总结,给自己定下了个 2016 年的计划。现在 2016 也差不多快结束了,我对自己执行的情况还是比较满意的。

关于 Github

去年年底参加了 Github 上的一个编程马拉松,一开始 commit 都是没有断过的,但是之后慢慢的总会有抓脑袋想 commit 的状况出现。不能说这样不好,只不过会让自己为了 commit 而 commit,本末倒置了。所以后面就不再管是否连续 commit 了,也把之前几个自己觉得不行的项目给删除了。贴一张今年 Github 上的 commit 图,虽然还是有很多质量不高的提交,但也算是今年对自己的付出的一点交代了。

JavaScript 创建对象的一些姿势

工厂模式

在函数中创建 Object 对象,并为对象添加属性。函数返回添加属性之后的对象。

1
2
3
4
5
6
7
8
9
10
11
function createPerson(name, age) {
var o = new Object()
o.name = name
o.age = age
o.sayName = function () {
console.log(this.name)
}
return o
}
var p = createPerson("ahonn", 21)

JavaScript 数据类型判断

最近开始读之前没有读完的 underscore 的源码,刚把 Object 部分读完。对 JavaScript 中类型判断部分的总结。

Object.prototype.toString()

在进行类型判断时,使用到最多的当属 Object.prototype.toString()

toString() 方法返回一个代表该对象的字符串。每个对象都会继承 Object 上的 toString 方法,如果该方法没有被同名方法覆盖的话。使用 toString() 方法将会返回字符串 "[object type]"。其中 type 根据对象的类型的不同而不同。

关于 Object.prototype.toString() 的详细描述可以查看:Object.prototype.toString() - JavaScript | MDN

「微信小程序」入坑总结

前段时间去了广州参加了关于「微信小程序」的技术沙龙,整场下来收获颇多。实际上微信小程序刚刚发布出来的时候就关注,弄了破解了的开发工具,跑了个官方的 Demo。

听完回来之后就想着挖个相关的坑,正好看到手机上的 「ONE · 一个」。上网找到了 ONE 的接口,打算搞一个仿照 ONE 官方 APP 的小程序,最后就有了 weapp-one 这个项目。

关于小程序

微信小程序不是 Web 也不是 Native,尝试之后给我的感觉有点像是 weex。因为之前尝试 weex 的时候是下载一个 APP,然后通过应用内扫码来运行对应的应用。这一点上小程序类似。

在沙龙上有位分享嘉宾有提到,小程序实际上是在 Webview 之上再加上一层原生的组件。例如底部的 tabbar 以及顶部的 navbar 就是原生的。还有小程序的 map 组件,是调用原生的 map 组件。

React 路由跳转后回到页面顶部

在 React 组件间进行页面跳转后,发现页面的位置并不在页面顶部,而是在页面跳转前的位置。就是说浏览器的滚动条并没有回到顶部的位置。

经过搜索之后找到了解决方案:Scroll to the top of the page after render in react.js

可以使用下面这种解决,但是这种方式不是一种很好的解决方法。而且 scrollIntoView() 方法并不回到页面的顶部,应该使用 scrollTop = 0 的方式。

1
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

所以得到的解决方案是:

1
2
3
componentDidUpdate() {
ReactDOM.findDOMNode(this).scrollTop = 0
}

React 生命周期函数小结

生命周期函数是指,在组件生命周期上的特定点上执行的各个函数。
React 的组件声明周期函数分为三种:挂载,更新以及卸载。

挂载

组件挂载的生命周期函数都在初始化渲染前后被调用。

componentWillMount

只调用一次,在客户端与服务端都执行。在初始化渲染之前被调用。

正则表达式备忘录

JavaScript 创建正则表达式有两种方式:

  • 使用正则表达式字面量:var re = /abc/;
  • 调用 RegExp 对象的构造函数:var re = new RegExp("abc");

什么时候使用构造函数?

当正则表达式的模式会变发生改变,或者需要从其他地方得到时(例如用户输入),适合使用构造函数的方式。