Jekyll build error
September. 10, 2015
今天将博客使用Gulp构建工具来进行管理。在使用的过程当中，总是在jekyll build这个命令的时候报错。错误如下图所示，提示No such file or directory @ rb_sysopen ...：
图中报错的原因是找不到该文件或者目录。
最后发现这个原因是因为，node_modules目录下面安装的一些插件的目录路径过长，而Windows系统支持的文件目录路径的长度是有限制的，因此就会产生错误。
解决办法是：
更改Jekyll的配置文件_config.yml，使用exclude将node_modules目录排除在外，这样jekyll在转换相应文件的时候就会排除exclude指定的文件、文件夹。即，添加如下一句话：
exclude: ["node_modules"]
更改完成之后，便能正确执行了，如下图：
CSS-display:inline-block布局
September. 04, 2015
《CSS权威指南》：
行内块元素是一个混合产物，它是块级元素和行内元素的混合。
在行内块元素内部，会像块级元素一样设置内容的格式。就像所有块级或行内替换元素一样，行内块元素也有属性width和height，如果比周围内容高，这些属性会使行高增加。
写在前面的话：IE6/7 是不支持 display: inline-block 的。因此如果我们要使用 display:inline-block 来取代 float 来实现列表的水平布局，需要考虑浏览器的兼容性。不仅如此，使用 display: inline-block 来实现水平布局还会产生空白间距的问题，关于这个问题可以看 大漠 写的一篇文章（文章最后有链接）。
对于display: inline-block 布局，张鑫旭写过文章详细介绍过（文章最后有链接）。所以本文算是自己的一个简单整理吧。
IE6/7 下的 display: inline-block
IE6/7 本身是不支持 display: inline-block 的。
在IE6/7下使用display: inline-block 会触发 IE6/7的 hasLayout （IE8以后已经不在使用， IE6/7下的一些bug很多时候就是和这个有关的。这时就需要触发hasLayout，一般的触发方法和触发BFC（Block Formatting Contexts）是一样的。本人觉得最好使的方法就是使用 zoom: 1;）。
因此，在IE6/7下，将inline元素转化为inline-block元素，触发了hasLayout，从而使内联元素拥有了行内块元素的一些特性（可以像块元素一样设置内容的样式），呈现和其他浏览器一样的效果。
而对于将block元素转化为inline-block元素，虽然也同样触发了hasLayout，可是对于块级元素，它本身就是行布局，所以触发后，依然是行布局，依旧会产生换行。
JavaScript-闭包
September. 02, 2015
《JavaScript高级程序设计》读书笔记
首先明确一下匿名函数的概念。匿名函数是指在function关键字后面没有标识符的函数。使用函数表达式创建的函数都是匿名函数。
var test = function(arg1, arg2) {
console.log("我是匿名函数");
}
闭包
闭包是指有权访问另一个函数作用域中的变量的函数。从这句话中，就可以看出，闭包的创建是依赖于函数的。
闭包是内部函数，存在于包含函数（即外部函数）里面的函数。它能够将包含函数的活动对象添加到它的作用域链中。
function createComparisonFunction(propertyName) {
return function(object1, object2) {
var value1 = object1[propertyName];
var value2 = object2[propertyName];
if(value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
};
}
// 创建函数
var compareNames = createComparisonFunction("name");
// 调用函数
var result = compareNames({name: "Nicholas"}, {name: "Greg"});
// 解除对匿名函数的引用（以便释放内存）
compareNames = null;
下图展示了调用compareNames()的过程中产生的作用域链之间的关系。也能够比较清楚的看到：闭包会携带包含它的函数的作用域。因此闭包会比其他函数占用更多的内存。过度使用闭包可能导致内存占用过多，只在绝对必要时再考虑使用闭包。
JavaScript-垃圾收集
September. 02, 2015
《JavaScript高级程序设计》读书笔记
垃圾收集
JavaScript具有自动垃圾收集机制，执行环境会负责管理代码执行过程中使用的内存。这种垃圾收集机制的原理，就是找出那些不再继续使用的变量，然后释放其占用的内存。整个过程会按照固定的时间间隔（或代码执行中预定的收集时间）周期性地执行。
上面提到JavaScript的垃圾收集是通过判断变量是否在使用。那如果判断呢？
比如说函数中的局部变量的生命周期。局部变量只在函数执行的过程中存在。在这个过程中，会为局部变量在栈（或堆）内存上分配相应的空间，以便存储它们的值。然后在函数中使用这些变量，直至函数执行结束。一旦函数执行结束，函数内的局部变量就不在使用，也就没有存在的必要了，因此可以释放它们的内存以供将来使用。对于全局变量，在浏览器关闭相应页面时释放。
var outer = "i'm global"; // 关闭页面时释放
function gc() {
var inner = "test"; //局部变量inner
console.log(inner);
}
gc(); // 函数执行完成后，释放局部变量内存空间
JavaScript的垃圾回收具体用到浏览器中的实现，通常有两个策略。
Continue Reading →【转】CSS-Block Formatting Contexts
September. 02, 2015
译文原文：HaoCn
英文原文：Ritesh Kumar
块级格式化上下文是网页CSS视觉渲染的一部分，并用于决定块盒子的布局。在定位体系（Positioning Scheme）中它属于常规流（Normal Flow）。根据W3C所言：
浮动、绝对定位元素（
position为absolute或fixed）、行内块元素display:inline-block、表格单元格display:table-cell、表格标题display:table-caption以及overflow属性值部位visible的元素（除了该值被传播到视点viewport的情况）将创建一个新的块级格式化上下文。
上面的引言差不多总结了一个BFC是如何形成的。但让俺们用另外一种更通俗易懂的方式来重新定义它。一个BFC就是一个HTML盒子，它至少满足以下条件之一：
float的值不为noneposition的值不为static或relativedisplay的值为table-cell、table-caption、inline-block、flex或inline-flexoverflow的值不为visible
创建一个块级格式化上下文
一个BFC可以显示触发。如果我们想创建之，我们只需要给它添加上面提到的任何一个CSS样式。
比如，看下面的HTML：
<div class="container">
some content here
</div>
一个新的BFC可以通过给容器添加任意一个必要的CSS样式来创建（如上面所列出的）。尽管上述条件都可以创建BFC，但也会产生一些其他效果，如：
display: table可能引发响应性问题overflow: scroll可能产生多余的滚动条float: left将把元素移至左侧，并被其他元素环绕overflow: hidden将裁切溢出元素
所以无论何时，当要创建一个BFC时，我们要基于需求选择最恰当的样式。为了保持一致性，我在本文的所有例子中均使用 overflow: hidden。
.container {
overflow: hidden;
}
两个月的流水账
August. 23, 2015
题记
两个月的时间，还来不及细细的品味，已瞬间即逝。
你是走的如此着急，让我怎么追赶你？
似乎唯独回忆，才能重回过去，帮我再来好好的看看你。
即使，现在的你，依然在不停的，嘀嗒嘀嗒...
流水账
两个月，是我离开家，离开武汉最长的一次时间。没有想到，我居然也可以独自一人在另外一个城市待这么久。此刻的我，想的最多的是，我好想家，好想爸爸妈妈，好想BF。
来到H城市，我印象最深的是：这里的私家车，公交车真的好文明，每次都会提前几秒钟停下来等行人。其次就是：这里也会下很长很长时间的雨，这里也特别的热啊。
Continue Reading →面试记录
August. 02, 2015
一面
这一次的面试我真的是乱糟糟的，由于事发突然，面试赶在了组内开会和组内聚餐的中间了 ，接到电话的时候我都是手足无措，不知道怎么处理了。当时的我，应该和面试官说明情况， 争取下次时间面试的。可是迟钝的我，硬着头皮面试了，还让组内的同事到处找我吃饭。最后， 面试的中途又不得不和面试官说，今天进行不下去了......。已哭瞎啊~
一、this的使用场景
写在前面的话：需要注意的是，在严格模式下（即使用"use strict";进行声明），函数调用中的this的值会指向undefined。
MDN中的一篇文章向严格模式过渡，中写道：
Continue Reading →在普通的函数调用f()中，this的值会指向全局对象。在严格模式中，this的值会指向undefined。 当函数通过call和apply调用时，如果传入的thisvalue参数是一个null和undefined除外的原始值(字符串,数字,布尔值)，则this的值会成为那个原始值对应的包装对象，如果thisvalue参数的值是undefined或null，则this的值会指向全局对象.在严格模式中，this的值就是thisvalue参数的值，没有任何类型转换。
JavaScript单线程&setTimeout
July. 09, 2015
JavaScript是单线程的
JavaScript是单线程的，同一时间只能做一件事情。
作为浏览器语言，JavaScript的主要用途是实现交互。 试想：如果JavaScript是多线程的。如果同时有两个线程，这两个线程同时操作同一个DOM节点，一个添加内容，一个是删除操作，这时浏览器该如何响应呢？
单线程机制—》任务队列排队执行
同步任务：主线程排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。（主线程上形成一个执行栈） 异步任务：不进入主线程，而进入“任务队列”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
（一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行）
Continue Reading →先执行同步任务，再执行异步任务。
块元素，行内元素，置换元素
July. 09, 2015
定义
块元素
什么是块元素？块元素是diaplay属性值为block的元素。块元素会产生换行。行内元素
行内元素是display属性值为inline-block的元素。置换元素
置换元素是：一个内容不收CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素。 （除置换元素之外的元素是非置换元素）
Continue Reading →不是所有的行内元素都不能设置宽高的，行内置换元素是可以设置的，比如
img，input，button，select，textarea；而行内非置换元素是不可以设置的。