从零开始写一个 React:初始化渲染

『从零开始写一个 React』 将会是一个小系列,记录学习 React 源码的过程,并逐步实现一个简易的类 React 库。

这是本系列的第一篇文章,该文章将阅读 React 初始化渲染相关的代码,并实现一个简单的将 JSX 渲染到页面的功能。(不包括组件生命周期与事件处理相关部分)

阿里巴巴暑假实习面试总结

2月末的时候,通过 simplyY 内推了阿里巴巴暑期实习的前端开发岗,在此表示感谢。
接着3月1号收到了内推的通知邮件,完善信息后很快就接到了一面的电话(3月3号)。

一面

面试了大概20分钟左右,整体内容还是比较偏基础。一开始是正常流程的自我介绍,说是三分钟自我介绍,但是我语速比较快的不到两分钟的介绍完了。(刚好是临近中午,原本打算吃饭的,要是去吃饭的话就得在路上面了…)

CSS 垂直居中

这个写过一篇博文专门总结过,不过面试的时候还是太过紧张没有答全。主要是 Flexbox 布局的垂直居中比较容易忘记。

具体就不再啰嗦了,详情可以查看:CSS 实现垂直居中

答前端面试题

中级前端工程师面试 我想问的几个问题 中的几个问题,感谢 @SimplyY

我最大的优势以及为什么选择前端

  • 我最大的优势是自学能力与理解能力强,并且不给自己套上『我是前端程序员』的枷锁,对于所有技术保持好奇心,不畏惧舒适圈外的事物并敢于尝试。
  • 选择前端的理由是,前端能够迅速的把想法实现,可选技术栈广泛(Web,移动端,桌面客户端),也是前端的优点之一。

从零开始制作 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 图,虽然还是有很多质量不高的提交,但也算是今年对自己的付出的一点交代了。

「微信小程序」入坑总结

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

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

关于小程序

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

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

数组乱序的正确姿势

underscore 中有一个函数,其作用是将数组乱序排序,实现如下:

// Shuffle a collection, using the modern version of the
// [Fisher-Yates shuffle](http://en.wikipedia.org/wiki/Fisher–Yates_shuffle).
// `shuffle` 函数。
_.shuffle = function(obj) {
var set = isArrayLike(obj) ? obj : _.values(obj);
var length = set.length;
var shuffled = Array(length);
for (var index = 0, rand; index < length; index++) {
rand = _.random(0, index);
if (rand !== index) shuffled[index] = shuffled[rand];
shuffled[rand] = set[index];
}
return shuffled;
};

Vue 中使用 highlight.js

今天遇到一个问题:在使用 vue 的练手项目中,渲染的 HTML 里 <code> 标签中的代码没有代码高亮。

遂想到用 highlight.js 来解决,按照平常那样在 HTML 文件中引入 jscss 文件,然后在<header> 中加上一句 <script>hljs.initHighlightingOnLoad();</script>。但是却没有效果。

在 Vue.js 的论坛上找到了解决方案 Getting highlightjs to work with vue-router。highlight.js 没有效果是因为使用了 vue-route,在 route 改变时,页面将会重新渲染并且会移除事件,这里就把 highlight 的事件给移除了。

12