vi  /usr/local/nginx/conf/nginx.conf

开头有一个

#user  nobody;

把井号删掉,nobody改为  用户名 [空格] 用户组,例如

user nginx  web;

即以web组的nginx用户来运行nginx.

修改完以后

/usr/local/nginx/sbin/nginx -s reload

重启nginx

注:具体重启的命令在具体的环境下有区别。所有的路径也一样,请注意。

来源:http://my.oschina.net/cxz001/blog/97206

1
2
3
4
5
6
7
8
9
10
11
12
13
var getCursorPositionOfPage = function(e){
    var x, y;
 
    e = e || window.event;
 
    x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
    y = e.pageY || (e.clientY + (document.documentElement.scrollTop  || document.body.scrollTop));
 
    return {
        'x':x,
        'y':y
    };
};

使用方式:

1
document.querySelector("body").addEventListener("click",getCursorPositionOfPage ,false);

1
document.getElementsByTagName("body")[0].onmousemove = getCursorPositionOfPage ;

经过简单的测试,各个浏览器的差异如下:

1
2
3
4
5
6
7
8
9
 pageY       chrome/IE10/IE9/firefox29          随滚动条滚动而变化        页面高度   X 同理      IE8/IE7 未定义
 
 clientY     chrome/IE10/IE9/IE8/IE7/firefox29  不随滚动条滚动而产生变化   窗口高度   X 同理
 
 
 
 document.documentElement   chrome/IE10/IE9/IE8/IE7/firefox29     html
 
 document.body              chrome/IE10/IE9/IE8/IE7/firefox29     body
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 滚动条未滚动
 document.documentElement.scrollTop    chrome            0
 
 document.body.scrollTop               chrome            0
 
// 滚动条滚动
 document.documentElement.scrollTop    chrome            0
 
 document.body.scrollTop               chrome            100
 
 
// 滚动条未滚动
 document.documentElement.scrollTop    IE10/IE9/IE8/IE7/firefox29            0
 
 document.body.scrollTop               IE10/IE9/IE8/IE7/firefox29            0
 
// 滚动条滚动
 document.documentElement.scrollTop    IE10/IE9/IE8/IE7/firefox29            100
 
 document.body.scrollTop               IE10/IE9/IE8/IE7/firefox29            0

上面的 0 表示就是 0 ,100 表示有值。

兼容多种模块规范的 javascript 模块化写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
;(function(name,definition){
 
    var hasDefine  = typeof define === 'function',  // 检测上下文环境是否为 AMD 或者 CMD        
        hasExports = typeof module !== 'undefined' && module.exports;  // 检查上下文是否为 node
 
    if(hasDefine){
        define(definition); // AMD 或者 CMD 环境
    }else if(hasExports){
        module.exports = definition(); // 定义为普通 node 模块
    }else{
        this[name] = definition(); // 将模块的执行结果挂载在 window 变量中,在浏览器中 this 指向 window 变量。
    }
 
})('hello',function(){ // 此处 hello 只是作为模块化的示例名称
    var hello = function(){};
    return hello;
})

不过此种写法要保证前端引用或者后端使用没有全局的 define 函数覆盖 AMD 或者 CMD 的 define 函数。

此代码来源于 深入浅出Node.js P45 2.7.4,此处为记录以及熟悉。

在经过了IE6 IE7的洗礼之后,我们终于可以放心的使用 inline-block 了,但是在使用 inline-block 的时候,我们总会发现很多莫名其妙的空隙出现在两个 inline-block 元素之间,例如我们的代码如下所示:

1
2
3
4
5
<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>
1
2
3
4
5
nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

然后在浏览器里面的结果就是:

但是一般情况下,我们这么写,总是想让各个元素紧挨在一起的,如果需要中间有空隙,那我们可以通过 css 来更精确地控制。难道这个是一个 bug。刚刚好可以方便的使用这个属性值了,又出现 bug 了,难道又要骂娘了?

其实,了解了背后的原理,就明白这里其实并不是一个 bug,因为对浏览器来说,回车和换行都会被当做有效地字符,只是看不见而已,由于其被当做有效地字符,所以这个空隙的大小会随着定义的文字大小而改变,所以这里也就是为什么我们不需要它的出现,而要自己控制间隙的原因。那么既然知道了产生这个问题的原意,那就有解决方案来应对它。

方法一,可以通过代码来去掉这个inline-block 元素之间的空格。

1
2
3
4
5
6
<nav>
  <a href="#">
    One</a><a href="#">
    Two</a><a href="#">
    Three</a>
</nav>

或者

1
2
3
4
5
<nav>
   <a href="#">One</a
  ><a href="#">Two</a
  ><a href="#">Three</a>
</nav>

或者

1
2
3
4
5
<nav>
  <a href="#">One</a><!--
  --><a href="#">Two</a><!--
  --><a href="#">Three</a>
</nav>

然后,这就解决了这个问题,主要就是想办法去掉那个换行或者空格。但是这样子的话,会让我的结构很不好看,尤其是对于处女座的前端来说。

方法二:负边距

1
2
3
4
nav a {
  display: inline-block;
  margin-right: -4px;
}

此时需要给相应的元素以负边距来抵消产生的空隙,但是上面的原因说过了,由于跟其字体大小有关系,所以在具体的情况下,需要更具字体来调整。风险是,万一用户系统中没有你设定的字体呢?

方法三:不写结束标签

1
2
3
4
5
<ul>
  <li>one
  <li>two
  <li>three
</ul>

方法四:字体大小 0

由于空隙来源于字符,那我让他为 0 的大小不就行了?对嘛,真聪明。

1
2
3
4
5
6
nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

不过,这样的方式,在某些平台以及某些浏览器上是有 bug 的。而且,如果使用 em 作为单位,那么下面的文字再怎么设置都是 0 了(em相对于父级)。

反正,每种方法都不算优雅,但基本都可以解决问题。

但或者,我们有可能根本就不需要 inline-block ,float 如果好用的话。或者以后可以用 flexbox 了。美好的愿望,在国内。

来源于:Fighting the Space Between Inline Block Elements 按自己的理解翻译,未忠实于原文。

本来打算翻译呢,一个手抖给弄丢了,不过这里找到了一个维基百科的中文版本,维基百科的版本质量很不错的,大家可以看看吧,自己也做个记录。

请查看中文版的 HTTP 状态码:维基百科 HTTP 状态码

这是 W3C 的标准:W3C Status Code Definitions

下载地址: http://pan.baidu.com/s/1dD065Z7  提取密码: igv3

sort 作为数组的方法,被定义在 Array.prototype.sort,也即在 JavaScript 中所有数组都可以使用 sort 方法进行排序。虽然一般情况下,sort 甚至可以不用传递排序函数一样可以正常工作,但很多情况下,我们还是必须明确的定义排序函数,才能更好的按我们的需求来工作,这也是一般情况下建议的方式,因为不知道不同的 js 引擎在不传递排序函数的时候,会按照什么方案进行排序。
例如:

1
2
3
var colors = ['red', 'green', 'blue', 'yellow', 'white'];
console.log(colors.sort());    // ["blue", "green", "red", "white", "yellow"]
console.log(colors);           // ["blue", "green", "red", "white", "yellow"]

如果不传递排序函数,那么,对于字符串来说,其将按照字母顺序来进行排序,可是,如果这些字符串里面有大写小写字母混合呢?

1
2
var colors = ['red', 'green', 'blue', 'Yellow', 'White'];
console.log(colors.sort());    // ["White", "Yellow", "blue", "green", "red"]

怎么样,结果不一样了吧?这是因为此时按照 ASCII 编码的顺序进行排序了。

同时,另一个问题是,sort 函数作用于原数组,也即是排序的结果会覆盖排序前的数组。

然后,对于数字数组,不传递排序函数的话,会是什么结果呢?

1
2
var money = [12, 3, 7.4, 200];
console.log(money.sort());    // [12, 200, 3, 7.4]

咦?并没有得到预期的结果(除非你的预期不是按数字大小),那么为什么呢?

因为在 sort 排序的时候,如果不传递排序函数,那么会先将所有的元素转换为 字符串 ,然后才会一个字一个字(ASCII,对于 true 或者 false 这类型的值都是一样的)的排序,为什么都转换成字符串,因为 JavaScript 数组中可以是任意类型的数据,所以 JavaScript 无法推断到底转换为什么类型去排序。

那么我们看看不同的数据类型,排序函数的一些写法:

数组内都是数字,或者期望按数字为主的排序方式。

1
2
3
4
var money = [12, 3, 7.4, 200];
var compare = function(a, b) {return a - b;};
console.log(money.sort(compare)); // [3, 7.4, 12, 200]
//console.log(money.sort(function(a, b) {return a - b;})); // [3, 7.4, 12, 200]

这是最基础的排序函数,任何讲到 JavaScript 排序的地方,基本都会讲这个。首先取前两个元素赋值给 a b,返回 a-b 的值,如果返回负值则 a 在 b 前,等于 0 则无所谓,因为两个元素相等,返回正直,则 a 在 b 后。

对于字符串的元素来说,和数字的差不多,无非就是不同的排序函数,那如果是对象呢?

1
2
3
4
5
6
7
8
9
10
11
12
var people = [
    {
        name: 'Alice',
        id: 1234
    },
    {
        name: 'Bob',
        id: 567
    }
];
var compare = function(a, b) {return a.id - b.id;}
console.log(people.sort(compare)); // Bob is before Alice now

对于元素的排序函数传递的参数都一样,两个数组中的元素,然后此处主要比较两个对象元素的 id 的值,来进行排序的。

可是如果如下面这种情况呢?

1
2
3
var everything = [4, 'Red', '$200', 'white', 7.4, 12, true, 0.3, false];
var compare = function(a, b) {return a - b;};
console.log(everything.sort(compare));

当排序函数进行计算的时候,由于有减法运算的参与,所以这里都会先转成数字进行计算的,但是如果是字符串的话,此处就会转换为 NaN,因为在 ECMA 规范中没有明确定义这时候应该如何进行排序,所以各个平台,也就是各个浏览器(JavaScript环境)的不同,导致最终的结果会不一定相同。大家可以自己在不同的浏览器上测试下。

例子来源:http://zhangwenli.com/blog/2013/11/02/sorting-in-javascript/

一般情况下,我们都使用 JavaScript 的 console.log() 进行 debug 但是,对于 Object 来说,每次 console.log 之后,输出的都是不是十分有好的数据,例如:

1
2
3
4
5
6
7
var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];
 
console.log(languages);

输出的就如同下图所示(当然,会根据不同的浏览器以及不同的版本会有所差别):

logging_with_console_log.

然后呢,其实看起来还是那么回事,虽然麻烦点,但是还可以看的清楚,到底什么是什么东西。

再然后呢?如果我们使用这里介绍的 console.table 呢?

不过,聪明的人一眼就看出来其中的玄机了,或者,看到这里,直接就去浏览器的console里面,执行这句代码就完了。怎么样?很好用吧?

不过还是给个例子比较好,因为大部分都比较懒嘛。
还是上边的对象,然后使用 console.table(language) 输出看看。

logging_with_console_table

看到了吧,多么的一目了然!

然后点击各个表头试试看,还可以排序哦。

logging_with_console_table_sorted

好了,上面是数组,但是其实对于对象也是可以使用的哦。

1
2
3
4
5
6
var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};
 
console.table(languages);

然后看看结果,看到了吧?

logging_with_console_table_object

可是,如果就这么点,那么除了更好的阅读方式之外,就没什么意思。

那么,它还可以过滤,哈哈。

这么:

1
console.table(languages, ["name", "paradigm"]); //多个 key 组成的数组

或者这么:

1
console.table(languages, "name”); //单个 key

很多内容来自:http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

前几天,在 Twitter 看到一句非常整洁的代码:

1
var bind = Function.prototype.call.bind(Function.prototype.bind);

第一次看的时候,我可以知道这段代码想干嘛,它让 x.y(z) 变成 y(x,z). 带着非常愉快的心情,我把这段代码给我的学生们看,但是,他们问我这段代码干嘛用呢。然后我就开始解释,但是我不知道从何说起,然后我就转身走开了。

应该明白的是,大部分比较好的代码,应该直接告诉我们它们是用来做什么的,带着这些在函数式 JavaScript 领域的经验,并且也在不断的阅读函数式 JavaScript 相关的书籍,在读的时候,我觉得是没有任何问题的,但是解释,将这些函数式程序解释给别人来说,还是没有太多经验。

但是,我还是想尝试下,通过我的方式,一些简单的示例,还有大量的注释,来解释一下这段代码的意思。

定义一个简单的对象 context

1
var context = {foo : “bar”};

定义一个函数,使用了一个在 this 上下文中,被命名为 foo 的变量,

1
2
3
function returnFoo(){
	return this.foo;
}

这个变量不存在于作用域中,因此,其返回 undefined。
(具体解释为,此时, this 指代全局的 window,而 window.foo 没有定义,所以返回 undefined)

1
returnFoo(); // undefined

但是,如果我们将此函数绑定到某个上下文。

1
var bound = returnFoo.bind(context);

现在变量 foo 存在于作用域中了.
(即,在 context 这个上下文中,是有定义 foo 变量的)

1
bound(); // bar

这就是 Function.prototype.bind 的作用,因为 returnFoo 是个函数,所以其继承了 function 的 prototype。

除了这种方式,还有另外其他方式来改变一个函数的上下文。例如 call 和 apply。

1
2
returnFoo.call(content); // bar
returnFoo.apply(content); // bar

还有就是将函数附加给某个对象,作为某个对象的一个方法。

1
2
content.returnFoo = returnFoo;
content.returnFoo();  // bar

让我们再来看看其他一些使用方法

Array.prototype 有一个特别好用的方法,叫做 slice。

在数组上调用此方法,它会返回一个从开始到结束的这个数组的一个拷贝,例如:

1
[1,2,3].slice(0,1);  // [1]

现在将,slice 赋值给一个本地变量。

1
var slice = Array.prototype.slice;

slice 现在未被绑定到任何对象,所以它和 Array.prototype.slice 比起来,对提供给它的上下文,或者 this,是不能正常的工作。

1
2
slice(0,1); //typeError
slice([1,2,3],0,1); //TypeError

但是,如果我们通过 call 或者 apply 来调用它,并且给它提供一个上下文。

1
2
slice.call([1,2,3],0,1);   // [1]
slice.apply([1,2,3],[0,1]);  //[1]

那么对于 bind 呢?我们来试试。

1
2
slice = Function.prototype.call.bind(Array.prototype.slice);
slice([1,2,3],0,1);  //[1]

很酷吧,那么我们对 bind 使用和 slice 一样的方式。

1
2
3
4
5
6
7
8
9
var bind = Function.prototype.call.bind(Function.prototype.bind);
 
var content = {foo : ”bar”};
function returnFoo(){
	return this.foo;
}
 
var amazing = bind(returnFoo, content);
amazing();   //bar

这样,就明白了 这段代码的意图。

这个bind 的解释是来源于 MDN 的,但是不明白为什么 Google 对 MDN 的东西这么低的评价,所以要翻页才能找到的。

翻译原文:Bind, Call and Apply in JavaScript

方法一:
该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。
HTML结构部分:

1
2
3
<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<span><img src="images/demo.jpg" alt="" /></span>
</div>

CSS样式部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style type="text/css">
#box {
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box span {
    display:table-cell;
    vertical-align:middle;
}
#box img {
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box {
    position:relative;
    overflow:hidden;
}
#box span {
    position:absolute;
    left:50%;top:50%;
}
#box img {
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二:
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法。
HTML结构部分:

1
2
3
<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<i></i><img src="images/demo.jpg" alt="" />
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<style type="text/css">
#box{
    width:500px;height:400px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #d3d3d3;background:#fff;
}
#box img {
    border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
}
#box img {
    vertical-align:middle
}
</style>
<![endif]-->

方法三:
该方法针对IE6/IE7,将图片外部容器的字体大小设置成高度的0.873倍就可以实现居中,标准浏览器还是使用上面的方法来实现兼容,并且结构也是比较优雅。
HTML结构部分:

1
2
3
<div id="box">
    &nbsp;&nbsp;&nbsp;&nbsp;<img src="images/demo.jpg" alt="" />
</div>

CSS样式部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#box {
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
 
    /* 兼容标准浏览器 */
    display: table-cell;
    vertical-align:middle;
 
    /* 兼容IE6/IE7 */
    *display:block;
    *font-size:349px; /* 字体大小约为容器高度的0.873倍 400*0.873 = 349 */
    *font-family:Arial; /* 防止非utf-8引起的hack失效问题,如gbk编码 */
}
 
#box img {
    vertical-align:middle;
}

以上方法来源于:雨夜带刀's Blog

另一篇关于这个问题解决方案的文章,请看 大小不固定的图片、多行文字的水平垂直居中