数组乱序的正确姿势

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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 的事件给移除了。

CSS 实现垂直居中

我们有这样一个结构的 HTML:

1
2
3
<div class="parent">
<div class="children"></div>
</div>

如果我们要实现 .children.parent 中垂直居中。

通常第一印象会想起给父元素设置相对定位,给子元素设置绝对定位。这样子元素就相对于父元素定位,再通过 topleft 各偏移 50% 父元素宽度,使用 margin-* 来修正子元素的位置。

Sass 初探

为什么学 Sass

说起来其实很早就知道 Sass 这东西。刚开始写 Even 这个博客主题的时候就有在考虑是要用 Less 还是Sass,最后用了变量名用 @ 开头的 Less(可能是 PHP 的原因,对 $ 开头的变量名没什么好感)。

最近正在看 Foundation,源码是用 Sass 写的。Bootstrap 之前也是用 Less 的,不过后来也转向了 Sass。然后发现 Foundation 写得挺不错的,看看博客主题写的代码,简直不能看。正好打算把主题给重构重构,就顺手学学 Sass,用 Sass 写。

使用 Nokogiri 解析 HTML

Nokogiri 是 Ruby 的一个 HTML/XML 文件的解析库。在需要解析 HTML/XML 文件获取数据时,它是一个很好的选择。

解析 HTML 文档

使用 Nokogiri 解析 HTML 将会生成 Nokogiri documens
生成该对象的方式有三种,分别是通过字符串解析,通过文件解析,通过网络解析。

通过字符串解析

通过字符串解析,即是将字符串当作函数的参数传给 Nokogiri::HTML 函数。

1
doc = Nokogiri::HTML("<html><body><h1>Ahonn</h1></body></html>")

使用 JavaScript 实现简单的拖拽

步骤

使用 JavaScript 实现拖拽的步骤:

  • 让元素捕获事件(mousedown, mousemove & mouseup)
  • 单击并不释放,触发 mousedown,标记开始拖拽,并获取元素和鼠标的位置
  • 拖动鼠标,触发 mousemove,不断的获取鼠标的位置,并通过计算重新确定元素的位置
  • 释放师表,触发 mouseup,结束拖拽,确定元素位置并更新

被拖拽的元素必须是相对父元素定位,或者是绝对定位

记第一次面试

记录第一次面试 流水账 想到什么写什么

第一次正正经经的去面试,虽然只是个软件开发暑期实习生。

刚开始是在网上无聊的逛 V2EX 什么的,然后看了看 conde 社区。后来神不知鬼不觉的不知道为什么就跑到了 Ruby China 去了,又神不知鬼不觉的跑去看了招聘的版块。

其实在这之前的两个星期都有在拉钩上投实习,虽然有几个简历通过了,但是却毫无沟通的直接定了面试时间。不是刚刚好顶到上课时间,就是早上 10 点的(也就是说我得早上 7 点起床赶去广州面试)。说实在的对那些公司兴趣也不是很大。

从 optimizeCb 说起

optimizeCb

underscore 中的内部函数 optimizeCb,顾名思义就是 optimize callback,即优化回调函数。

optimizeCb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Internal function that returns an efficient (for current engines) version
// of the passed-in callback, to be repeatedly applied in other Underscore
// functions.
var optimizeCb = function(func, context, argCount) {
if (context === void 0) return func;
switch (argCount == null ? 3 : argCount) {
case 1: return function(value) {
return func.call(context, value);
};
// The 2-parameter case has been omitted only because no current consumers
// made use of it.
case 3: return function(value, index, collection) {
return func.call(context, value, index, collection);
};
case 4: return function(accumulator, value, index, collection) {
return func.call(context, accumulator, value, index, collection);
};
}
return function() {
return func.apply(context, arguments);
};
};

不合常理的变量提升

变量提升

合乎常理的预期

按照合乎常理的预期,程序应该是由上至下一行一行执行的,如果使用了之前没有定义的变量的话,正确的反应应该是会报错,就象下面这段 C++ 代码:

1
2
3
4
5
6
7
8
#include <cstdio>
using namespace std;
int main() {
printf("%d\n", &n); // Error
int n = 2;
}