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
的值不为none
position
的值不为static
或relative
display
的值为table-cell
、table-caption
、inline-block
、flex
或inline-flex
overflow
的值不为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;
}
Continue Reading →
两个月的流水账
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
;而行内非置换元素是不可以设置的。