从零开始制作 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");

什么时候使用构造函数?

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

JavaScript 最佳实践:提升代码质量的建议和技巧

翻译自:JavaScript Best Practices: Tips & Tricks to Level Up Your Code
没有严格的按照原文翻译,删减修改了部分内容。

在这个教程中,会列出一些重要的 JavaScript 的最佳实践,学习这些并不会很困难。

避免污染全局作用域

声明变量是很有趣的,有时候你会在你不知情的情况下声明了全局变量。在现在的浏览器中,全局变量将会存储在 window 变量中。在全局作用域中的变量可能在不经意间被覆盖。

如何减少浏览器回流

什么是浏览器回流

浏览器在显示网页时,需要计算每一个元素应该放置的位置,这个计算过程就称为浏览器回流(browser reflow)。回流会重新计算页面的布局,在回流中会重新计算元素的尺寸与位置,并且也会触发对子元素的回流。

触发浏览器回流的操作:

  • 在 DOM 中插入,移除或者更新元素
  • 修改页面上的内容
  • 移动 DOM 元素
  • 修改元素 CSS 样式
  • 修改元素的类名
  • 调整窗口的大小