Author Archive

你尝试过写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}

继续阅读全文……

javascript的作用域是一个重要的知识点，javascript作用域（scope）是通过javascript的作用域链（scope chain）来实现的。

javascript作用域

javascript作用域(scope)：简单的说，就是创建一个函数时在什么环境下创建的，它控制了javascript代码运行时变量和函数的访问范围。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

全局作用域（Global Scope）

在代码中任何地方都能访问到的对象拥有全局作用域，注意：全局变量是魔鬼！因为它效率低（后面讲到），污染全局环境！一般有一下三种方式获取全局作用域。

代码最外层定义的函数和变量拥有全局作用域

在代码的最外层，定义的函数、变量，都是拥有全局作用域的。

var a = 1;
function b(){
    var a = 2;
}
b();
alert(a);//1

函数内部不使用var定义的拥有全局作用域

在函数内部，不使用var定义的变量拥有全局作用域，这是个坑！要注意，很多前端开发工程师不习惯写var，其实这时候你已经污染了全局作用域！

var a = 1;
function b(){
    a = 2;
    c = 3;
}
b();
alert(a);//2
alert(c);//3

继续阅读全文……

javascript有this关键字，this跟javascript的执行上下文密切相关，很多前端开发工程师至今对this关键字还是模棱两可，本文将结合代码讲解下javascript的this关键字。

this和对象的关系

首先来看下面的代码：

var person = {
	name:'Theo Wong',
	gender:'male',
	getName:function(){
		console.log(person.name);
	}
};
person.getName();

定义了一个person对象，对象中包含了name、gender属性，还包括了一个getName的方法，其作用是输出person对象的name。在这种情况下，我们可以使用this来在person对象中代替person对象本身，所以上面的代码跟下面的直接结果是一样的：

var person = {
	name:'Theo Wong',
	gender:'male',
	getName:function(){
		console.log(this.name);
	}
};
person.getName();

请记住一点：this永远指向的是函数对象的所有者！上面的例子中getName的所有者是person对象，所以this指代的是person。

this和全局对象

我们再来看看再全局对象中，this指代的是什么，我们知道javascript是脚本语言，所以javascript的执行需要有一个宿主环境，在浏览器中这个宿主环境就是window对象，所以在全局函数中，this指代的是window对象（除非使用new，call，apply方法来改变this的指代关系）。懂得了这个关键点，下面的代码就好理解了：

var a = 1;
console.log(a);//1
console.log(this.a);//1
console.log(window.a);//1

很多前端开发工程师经常使用在函数名字之前添加个window来调用函数，这是因为在浏览器中全局对象就是window，所有的函数变量都是在window对象之中，所以下面的代码中的this指代window对象就好理解了：

var a = 1;
function foo(){
	var b = 2;
	console.log(this.a+b);//3
}
foo();

所以说，只要记住：this永远指向的是函数对象的所有者，即this的值是由激活执行上下文代码的调用者决定的，就好理解this的指代关系了。
继续阅读全文……