前端开发

IE中的contains方法可以判断A元素是否包含B元素，如果包含则返回true，否则返回false，在开发中会在事件代理处理上面用到。W3C的方法是compareDocumentPosition，所以综上来说：JS通过contains和compareDocumentPosition方法来确定DOM节点间的关系,判断一个元素(对象)是否为另一个元素的子元素。
IE的contains方法很简单，但是W3C的DOMElement.contains(DOMNode)方法会返回却是一个数值。

DOMElement.contains(DOMNode)

link：https://developer.mozilla.org/En/DOM/Node.compareDocumentPosition。

DOMElement.contains(DOMNode)返回的不是一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

继续阅读全文……

元旦假期帮朋友折腾VPS，安装了centOS和lnmp，网站部好了，而且定时任务也加上了，觉得应该做个压力测试，之前用过apache自带的ab，不过今天使用的是webbench做压力测试。备份下安装测试过程。
首先我们先来安装webbench吧, 为了测试准确，请将 webbench 安装在别的linux服务器上, 因为webbench 做压力测试时，自身也会消耗CPU和内存资源, 否则, 很可能把自己服务器搞挂掉。于是我切换到了ubuntu系统做webbench测试。

安装webbench

安装过程比较简单，如果你的机子之前安装过一些常用软件直接使用下面的命令就可以了：

wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz
tar zxvf webbench-1.5.tar.gz
cd webbench-1.5
make && make install

webbench安装报错

没有安装ctags

如果没有安装 ctags make 编译会报错：/bin/sh: ctags: command not found
这时当然是要安装ctags啦，于是：

apt-get install ctags

搞定

没有安装gcc

这时候可能会报错：

cc: Command not found

这时需要gcc：

apt-get install gcc

其他报错

如果出现下面的错误：

cannot create regular file `/usr/local/man/man1′: No such file or directory

继续阅读全文……

你尝试过写javascript不用字母和数字吗？最近准备个xss的分享，记起了之前看到过老外一篇文章，内容是关于non-alpha javascript的，拿到代码分析下。
先看这段猥琐的javascript代码：

_=+[];$=_++;__=(_< <_);___=(_<<_)+_;____=__+__;_____=__+___;$$=({}+"")[_____]+({}+"")[_]+({}[$]+"")[_]+(($!=$)+"")[___]+(($==$)+"")[$]+(($==$)+"")[_]+(($==$)+"")[__]+({}+"")[_____]+(($==$)+"")[$]+({}+"")[_]+(($==$)+"")[_];$$$=(($!=$)+"")[_]+(($!=$)+"")[__]+(($==$)+"")[___]+(($==$)+"")[_]+(($==$)+"")[$];$_$=({}+"")[_____]+({}+"")[_]+({}+"")[_]+(($!=$)+"")[__]+({}+"")[__+_____]+({}+"")[_____]+ ({}+"")[_]+({}[$]+"")[__]+(($==$)+"")[___]; ($)[$$][$$]($$$+"('"+$_$+"')")();

看到这里你肯定抓狂了，但是这段代码是可以运行的，运行的结果是 alert('cool code'); 。

javascript分析

这段代码能够运行，原因是javascript是弱类型的脚本语言，而且语法相对松散。例如下面的javascript是正确的，而且是有出乎意料结果的：
继续阅读全文……

前几天看到国外人在github总结的javascript的奇巧淫技（http://t.cn/herRcq），里面对位运算提到的很多，所以来科普一下javascript的位运算。于是找到了w3cschool的这篇教程，很好很强大啊，于是就忍不住转载了……

ECMAScript 整数有两种类型，即有符号整数（允许用正数和负数）和无符号整数（只允许用正数）。在 ECMAScript 中，所有整数字面量默认都是有符号整数，这意味着什么呢？

有符号整数使用 31 位表示整数的数值，用第 32 位表示整数的符号，0 表示正数，1 表示负数。数值范围从 -2147483648 到 2147483647。

可以以两种不同的方式存储二进制形式的有符号整数，一种用于存储正数，一种用于存储负数。正数是以真二进制形式存储的，前 31 位中的每一位都表示 2 的幂，从第 1 位（位 0）开始，表示 2⁰，第 2 位（位 1）表示 2¹。没用到的位用 0 填充，即忽略不计。例如，下图展示的是数 18 的表示法。

18 的二进制版本只用了前 5 位，它们是这个数字的有效位。把数字转换成二进制字符串，就能看到有效位：

var iNum = 18;
alert(iNum.toString(2));	//输出 "10010"

这段代码只输出 “10010″，而不是 18 的 32 位表示。其他的数位并不重要，因为仅使用前 5 位即可确定这个十进制数值。如下图所示：

负数也存储为二进制代码，不过采用的形式是二进制补码。计算数字二进制补码的步骤有三步：

1. 确定该数字的非负版本的二进制表示（例如，要计算 -18的二进制补码，首先要确定 18 的二进制表示）
2. 求得二进制反码，即要把 0 替换为 1，把 1 替换为 0
3. 在二进制反码上加 1

要确定 -18 的二进制表示，首先必须得到 18 的二进制表示，如下所示：

0000 0000 0000 0000 0000 0000 0001 0010

接下来，计算二进制反码，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101

最后，在二进制反码上加 1，如下所示：

1111 1111 1111 1111 1111 1111 1110 1101
                                      1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

因此，-18 的二进制表示即 1111 1111 1111 1111 1111 1111 1110 1110。记住，在处理有符号整数时，开发者不能访问 31 位。

有趣的是，把负整数转换成二进制字符串后，ECMAScript 并不以二进制补码的形式显示，而是用数字绝对值的标准二进制代码前面加负号的形式输出。例如：

var iNum = -18;
alert(iNum.toString(2));	//输出 "-10010"

这段代码输出的是 “-10010″，而非二进制补码，这是为避免访问位 31。为了简便，ECMAScript 用一种简单的方式处理整数，使得开发者不必关心它们的用法。

另一方面，无符号整数把最后一位作为另一个数位处理。在这种模式中，第 32 位不表示数字的符号，而是值 2³¹。由于这个额外的位，无符号整数的数值范围为 0 到 4294967295。对于小于 2147483647 的整数来说，无符号整数看来与有符号整数一样，而大于 2147483647 的整数则要使用位 31（在有符号整数中，这一位总是 0）。

把无符号整数转换成字符串后，只返回它们的有效位。

注意：所有整数字面量都默认存储为有符号整数。只有 ECMAScript 的位运算符才能创建无符号整数。

继续阅读全文……

今天处理IE6下的一个bug，经过调试才发现是javascript文件文件总是执行不了，后来中午吃完饭回来才想起以前同事遇见的html中的javascript不可以执行的问题，怀疑是gzip的原因，此次的问题就是因为动态加载javascript文件导致代码不执行，经过研究发现gzip压缩过的javascript文件，如果header里Cache-Control 数据有no-cache, no-store，就会出现IE6中js代码不执行的问题。下面是转发的文章内容：

IE6下面调用开启了gzip压缩Javascript的时候，时常会碰到无法执行的情况，有可能是src调用，有可能是ajax调用，其它的浏览器工作正常，唯独IE6不能正常工作。
出现这个BUG的状况如下：

1. 用户使用IE6浏览器
2. 服务器没有设置 被请求文件(javascript) expires, cache-control.
3. 服务器端开启了chunked encoding模式
4. 通过javascrip的src调用方式或者ajax请求javascript文件
5. 有可能是通过php生成的javascript文件
6. 服务器端开启了gzip压缩

解决这个问题，我们要在服务器的cache-control和expires 头信息上做点工作。
经过测试，header头信息如下的gzip压缩过的javascript调用可以正常工作。

Cache-Control:maxage=1
Connection:keep-alive
Content-Encoding:gzip
Content-Type:application/x-javascript;charset=GBK
Date:Wed, 01 Dec 2010 01:24:07 GMT
Expires:Wed, 01 Dec 2010 01:24:08 GMT
Pragma:public
Server:nginx
Transfer-Encoding:chunked

分析上面的头信息，我们可以注意到：

1. cache-control必须要设置成maxage=time的格式，maxage是指定缓存生效时间，1为1秒
2. Expires必须要设置，它的时间稍大于Date即可，Date是页面请求时间，Expires是过期时间
3. Pragma设置为public

继续阅读全文……

js8.in这个域名已经快两年历史了，自己开博客也要有三年历史了吧，可以追溯到大学时候的日志，最早的域名是2fool.cn，可是09年的备案风波，我不得不换了js8.in，当时还是啊花童鞋帮忙起的，主机一直是蹭了他的godaddy主机。昨天去朝阳见了袁童鞋，感觉自己的差距越来越大了，他这半年研究了两个超级牛逼的东西：smarthome和手机当鼠标用的东东，自叹不如。回了家，思前想后，越来越惭愧。普加最近来北京的越来越多，小马哥打电话说：舍不得以前的团队，大家散了，可惜了。的确很想你们，虽然现在可以很容易的见面，可是就像万童鞋说的，来了北京发现少了那种归属感和责任感，现在的工作完全是合同关系。

本来想说博客的事情，却突然发了这么多的感慨。博客正式两年是2012年的1月22，也就是大年三十，那时候肯定没时间发博客，趁着现在有时间，又换了主题一段时间了，就总结下。

三水清博客的发展

本博客从最最开始记录大学的一些事情，到发展成为前端开发博客经历了不少“大事情”，期间换域名2fool.cn 更换问js8.in，顺便名字从二傻网，改为了断桥残雪部落格，之前徐同事经常戏称“残花败柳”，其实断桥残雪是西湖的十大美景之一，有点凄凉的感觉，后来啊花说自己一个朋友也是这个名字，所以一直相机会换下名字，为了找工作，注册了微博（其实之前是有的，因为参加APP大赛当了官方微博用了，后来被封了），并且起名字为“清-三水清”，三水清其实是我名字，因为某机关的优秀同志，把我的清换成了青，所以为了强调自己的清是清水的清，一直会说“是三点水的清的那个清”。

微博的主题

上个月博客换了主题，也就是现在的主题，顺便连博客的名字也就改了。感谢老纪同学百忙中听我唠叨，帮我设计博客主题，听说他快当爹了，提前祝福下老纪和嫂子。
继续阅读全文……

作为前端开发人员，总会有点自己的奇技淫巧，毕竟前端开发不同于后端，代码全部暴漏给用户不说，代码冗余了少则影响带宽，多则效率降低。所以今天我也来爆个自己的奇技淫巧。

javascript的String.replace方法应该javascript前端开发工程师都了解，可是你掌握了吗？replace有接受两个参数，第一个参数可以是字符串，也可以是正则表达式，第二个参数除支持字符串之外，还支持$1形式正则匹配的文本，除此之外还支持传入一个处理函数，这个函数的return值就是要替换成的内容。
了解更多javascript的String.replace用法，访问：http://www.w3school.com.cn/js/jsref_replace.asp

String.replace的妙用

在《javascript获取隐藏dom的宽高》中，我就使用了replace，使用replace做一些重复性的操作，减少不必要的代码。

其实这里说的重复性的工作就是循环！例如，我们要获取假如我要求id为div1和div2的两个元素的宽高，一部分人会一点一点的做，先算完div1的，然后做div2的，这样你是否觉得有部分是充分的操作呢，于是可以将取宽高的函数独立出来，这样多了一个函数，而且函数只用这两次，似乎有点浪费。

于是一部分人想到了使用split切分字符串，然后用Array.forEach做循环。例如下面的代码：

"div1 div2".split(' ').forEach(function(a,i){
    console.log(a);
	//do something
})

继续阅读全文……

感慨下：做前端开发不少日子了，在前公司也使用过一段时间linux系统，对apache配置比较熟悉，可是对nginx配置还是不熟悉，毕竟自己是做前端开发的，大后端的事情还是比较排斥，以后多练习。前些日子vps到期了，换了空间，没配置好eAccelerator，本来想要朋友全权处理，可是他最近比较忙，只好自己处理了，现在将安装eAccelerator过程记录下，以后留用。

vps是centOS系统，php为nginx+fastcgi，nginx安装目录/usr/local/nginx，php安装目录/usr/local/php，开始在linux安装PHP加速器eAccelerator吧！

预编译安装eAccelerator

安装前准备

安装之前使用需要安装make和phpize，如果安装过，跳过此步骤。运行下面的命令

yum install make php5-dev
//ubuntu下用apt-get

安装eAccelerator

然后开始下载eAccelerator，配置安装编译：

wget http://bart.eaccelerator.net/source/0.9.6.1/eaccelerator-0.9.6.1.tar.bz2
tar xjf eaccelerator-0.9.6.1.tar.bz2
cd eaccelerator-0.9.6.1
/usr/bin/phpize
./configure -enable-eaccelerator=shared -with-php-config=/usr/bin/php-config
make
make install

这时会将eaccelerator安装到php目录中，屏幕会显示eaccelerator.so所在路径，例如：
继续阅读全文……

一直使用apache，新的vps使用的是nginx，于是开始折腾nginx了，今天查到了检查nginx配置是否正确和重启的方法，记录下，高手飘过。我的nginx安装在/usr/local/nginx，系统为ubuntu

几个常用的nginx命令

Nginx 安装后只有一个程序文件，本身并不提供各种管理程序，它是使用参数和系统信号机制对 Nginx 进程本身进行控制的。 Nginx 的参数包括有如下几个：

可以这样使用

/usr/local/nginx/sbin/nginx -参数

-c ：使用指定的配置文件而不是 conf 目录下的 nginx.conf 。

-t：测试配置文件是否正确，在运行时需要重新加载配置的时候，此命令非常重要，用来检测所修改的配置文件是否有语法错误。

-s reload 重载

-s stop 停止

nginx启动/重启/停止

这个很简单，就是运行命令：

sudo /etc/init.d/nginx {start|restart|stop}

继续阅读全文……