笨笨剥壳|BENBEN.CC

Javascript 绝句

破锣锅 — Mon, 30 Apr 2012 13:25:26 +0000

像诗一样的 Javascript 代码。

1. 取整同时转成数值型：

'10.567890'|0
//结果: 10
'10.567890'^0
//结果: 10
-2.23456789|0
//结果: -2
~~-2.23456789
//结果: -2

2. 日期转数值：

var d = +new Date(); //1295698416792

3. 类数组对象转数组：

var arr = [].slice.call(arguments)

4. 漂亮的随机码：

Math.random().toString(16).substring(2); //14位
Math.random().toString(36).substring(2); //11位

5. 合并数组：

var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
uneval(a); //[1,2,3,4,5,6]

6. 用0补全位数：

function prefixInteger(num, length) {
	return (num / Math.pow(10, length)).toFixed(length).substr(2);
}

7. 交换值：

a= [b, b=a][0];

8. 将一个数组插入另一个数组的指定位置：

var a = [1,2,3,7,8,9];
var b = [4,5,6];
var insertIndex = 3;
a.splice.apply(a, Array.concat(insertIndex, 0, b));
// a: 1,2,3,4,5,6,7,8,9

9. 删除数组元素：

var a = [1,2,3,4,5];
a.splice(3,1);

10. 快速取数组最大和最小值

Math.max.apply(Math, [1,2,3]) //3
Math.min.apply(Math, [1,2,3]) //1

(出自http://ejohn.org/blog/fast-javascript-maxmin/)

11. 条件判断：

var a = b && 1;
//相当于
if (b) {
	a = 1;
} else {
	a = b;
}
 
var a = b || 1; 
//相当于
if (b) {
	a = b;
} else {
	a = 1;
}

12. 判断IE（两种方法）:

var ie = /*@cc_on !@*/false;
var ie = !-[1,];

原文地址：http://bai.lu/RVT1X

Juicer – 一个Javascript模板引擎的实现和优化

破锣锅 — Sun, 22 Apr 2012 04:14:55 +0000

让我们从一段代码说起，假设有一段这样的JSON数据：

var json={
	name:"流火",
	blog:"benben.cc"
};

我们需要根据这段JSON生成这样的HTML代码：

1	<span class="name">流火 (blog: benben.cc)</span>

传统的Javascript代码一定是这个样子：

1 2	var html; html=''+json.name+' (blog: '+json.blog+')';

不言而喻，这样的代码混杂了html结构和代码逻辑，而且代码不具可读性，不便于后期维护，于是便有了这样一个函数：

function sub(str,data) {
    return str
        .replace(/{(.*?)}/igm,function($,$1) {
            return data[$1]?data[$1]:$;
        });
}

有了这个函数，我们拼接字符串的工作就可以简化为：

1 2	var tpl='{name} (blog: {blog})'; var html=sub(tpl,json);

看到这里，不用我多说，我想通过这个例子直观的展现出前端模板引擎的好处所在，这么做能够完全剥离html和代码逻辑，便于多人协作和后期的代码维护。当然，当我们的业务逻辑需要对数据源进行循环遍历，if判断等的时候，这个简明的函数很显然并不能满足我们的需求，于是便有了如今这市面上众多的模板引擎，诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin, etc.

“如无必要，勿增实体。” 这是著名的奥卡姆剃须刀法则，简单的说就是避免重复造轮子。那么就会有童鞋质疑，既然已然有这么多现成的东西可用，为什么还要重新打造一个呢？

我个人认为一个完善的模板引擎应该兼顾这几点：

语法简明
执行效率高
安全性
错误处理机制
多语言通用性

而市面上现有的模板引擎没有做到兼顾以上几点，比如Mustache支持多种语言，通用性不错，不过性能稍差，而且语法不支持高级特性，例如遍历的时候无法做if判断，也无法获得index索引值，jQuery tmpl依赖jQuery，缺乏可移植性，Kissy template虽然依赖Kissy, 不过性能和语法都值得推荐，doT/nTenjin 性能和灵活性都很不错，但是语法需要用原生的js来写，写好的模板代码可读性稍差。

鱼和熊掌不可兼得，语法的处理，安全性的输出过滤和错误处理机制的引入在一定程度上都会或多或少降低模板引擎的性能，因此就需要我们权衡。Juicer 在实现上首先将性能看做第一个重要的指标，毕竟性能好坏直接影响用户的感知，同时兼顾了安全性和错误处理机制（即便这样会导致性能的略微下降）。

首先来看下jsperf上同几个主流模板引擎的性能对比。

可以看到，性能上比传统模板引擎均有提升，下边的介绍主要从语法、安全性和错误处理，以及如何使用这几个方面介绍下Juicer.

a. 语法

循环 {@each}…{@/each}
判断 {@if}…{@else if}…{@else}…{@/if}
变量（支持函数）${varname|function}
注释 {# comment here}

详细的语法请参考 Juicer Docs.

b. 安全性

安全性，简单地说就是对输出数据在输出前进行一次转义过滤，避免XSS这样的脚本注入攻击，简单扫下盲，举个XSS的例子。

1
2
3

var json={
	output:''
};

如果JSON数据是第三方接口返回或者含有用户输入（像BBS、评价）的内容，我们如果赤裸裸的将output写到页面上就会执行恶意的js代码，所以Juicer默认是对数据输出做了安全转义的，当然如果不想被转义，可以使用$${varname}。

1 2	juicer.to_html('${output}',json); //输出：<script>alert("XSS");</script> juicer.to_html('$${output}',json); //输出：

c. 错误处理

如果没有错误处理，当模板引擎编译(Compile)或者渲染(Render)出错时候就会引起后续js代码停止执行，可想而知，如果因为一个逗号或者JSON数据的偶发错误导致整个页面挂掉，是我们不能接受的。但是Juicer在遇到这些错误的时候不会影响后续代码的执行，只会在控制台打出一句警告(Warn)告知开发者模板解析出现错误。

1 2	juicer.to_html('${varname,,,,,,,}',json); alert('hello, juicer!');

执行上边的代码就会看到控制台打出的“Juicer Compile Exception: Unexpected token ,”，但是不会因为错误导致后续的alert被阻塞掉。

实现原理

Juicer对一个模板的编译和渲染的过程主要有以下几个步骤：

1、对模板代码进行语法分析
2、分析后生成原生的Javascript代码字符串
3、将生成的代码转为可重用的Function (Compiled Template)

var json={
	list:[
		{name:"benben"},
		{name:"liuhuo"}
	]
};
var tpl='{@each data.list as value,key}$${value.name}{@/each}';
var compiled_tpl=juicer.compile(tpl,{errorhandling:false});

我们通过compiled_tpl.render.toString()看下编译后的代码：

function anonymous(data) {
	var data = data || {};
	var out = '';
	out += '';
	for (var i0 = 0, l = data.list.length; i0 < l; i0++) {
		var value = data.list[i0];
		var key = i0;
		out += '';
		out += ((value.name));
		out += '';
	}
	out += '';
	return out;
}

是不是已经明白了Juicer的原理？这个编译后的函数就会每次帮我们完成从数据到html代码的拼装操作。

这里有几点优化的地方值得分享下：

1、using += instead of array.push
2、avoid using with {}
3、cache the compiled template (function)

这几点优化在大数据量循环渲染时候性能提升显著，不过正因为放弃了with{}语句，所以JSON数据外层必须指定“data.”前缀，如果你觉得这点性能的提升不重要，也可以在options中指定loose:true（松散模式），这样就可以省去data. 前缀。

最后介绍下Options配置项，左侧为参数默认值。

{
	cache:true/false,
	loose:false/true,
	errorhandling:true/false
}

cache默认为true，即同一个模板编译后是否被juicer缓存，也就是说如果缓存开启的情况下，同一个模板第一次编译后，为了缩短耗时提升性能，后续不会再次执行编译的操作而是直接从缓存中去取编译好的模板函数。

Juicer的API. Juicer有两种使用方法，一种是通过

1	juicer.to_html(tpl,data,options);

直接根据提供的数据将模板转为html代码，另一种是通过compile方法先将模板编译好，在需要的时候再对模板进行数据的Render操作：

1 2	var compiled_tpl=juicer.compile(tpl,options); compiled_tpl.render(data);

最后附上Juicer的项目地址，上边有详细的文档和Demo代码。
http://juicer.name

Linux下创建最低权限的SSH账号

破锣锅 — Tue, 10 Apr 2012 11:18:00 +0000

如果你自己有一台 Linux 服务器，那么单纯用来做 Server 岂不是有点浪费了，下边的命令可以让你方便的创建一个安全的Tunnelier 专用SSH账号。

#create user
useradd -M -s /sbin/nologin -n username
#modify the password
passwd username
#remove the user
userdel -r username

juicer.js – another lightweight javascript template engine

破锣锅 — Sat, 07 Apr 2012 02:21:29 +0000

现在各种Javascript模板引擎层出不穷，JST、Mustache、Tenjin，即便如此还是挡不住我自己打造一个的兴趣，遂作此代码，名为榨汁机(Juicer)，目前经过测试，性能上已经完全超越了市面上传统的模板引擎。希望互相交流，把Juicer的性能再提升一个等级。

支持的语法：

1、if

1	{@if ...}...{@/if}

2、each

1	{@each var}...{@/each}

3、inline

${var}

更多的使用方法请参考juicer docs.性能上也毫不逊色，在jsperf上对比了几个常用的模板引擎，称得上是最快的模板引擎了。

放上Demo一枚：

<script type="text/javascript">
	var data={
		list:[
			{name:'guokai',show:true},
			{name:'benben',show:false},
			{name:'dierbaby',show:true}
		],
		blah:[
			{num:1},
			{num:2},
			{num:3,inner:[
				{'time':'15:00'},
				{'time':'16:00'},
				{'time':'17:00'},
				{'time':'18:00'}
			]},
			{num:4}
		]
	};
	var tpl=[
		'',
			'{@each data.list as it,k}',
				'${it.name} (index: ${k})
',
			'{@/each}',
			'{@each data.blah as it}',
				'',
					'num: ${it.num} 
',
					'{@if it.num==3}',
						'{@each it.inner as it2}',
							'${it2.time} 
',
						'{@/each}',
					'{@/if}',
				'
',
			'{@/each}',
		'
'
	].join('');
	document.write(juicer.to_html(tpl,data));
script>

Project Home: http://juicer.name
Github URI: http://github.com/PaulGuo/Juicer

Do more with {Less}

破锣锅 — Sun, 05 Feb 2012 08:53:30 +0000

什么是Less?

Less是一种动态样式语言。为什么称它是一种语言呢？因为它将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数等。Less 既可以在客户端上运行（支持IE 6+, Webkit, Firefox），也可以借助 Node.js在服务端运行。

为什么要用Less?

为了写更少的代码
为了提高写代码的效率，减少重复劳动，解放生产力
为了更方便的维护我们写过的代码
为了让我们写的代码能够在一个或者多个项目中复用

总之，Less即将改变我们组织CSS代码的方式。相信我，如果你有CSS的知识基础，那么Less对你而言简直是小菜一碟，你学起来就会感到异常的容易。

Less都有哪些让人眼前一亮新特性？

变量（让人性奋）
混合（这玩意儿很有码感）
嵌套规则（让代码结构更美）
函数 & 运算（丫的更像编程了）

1、变量

利用变量，我们可以单独定义一系列通用的样式，在需要的时候去调用，这样的好处就是在通用属性需要修改的时候只需要改动我们定义的几行代码就行了，而不需要我们再去一行行的改动每一处有引用的地方。

//LESS
@color: #4D926F;
 
#header {
	color: @color;
}
 
h2 {
	color: @color;
}

经过Less编译后的代码如下：

#header {
	color: #4D926F;
}
 
h2 {
	color: #4D926F;
}

2、混合

混合可以让我们方便的把某一个定义过的Class A引用到另一个Class B中，从而可以实现方便的样式继承，除此之外，我们还可以实现带参数的调用，就好比调用函数一样简单。

//LESS
 
.radius (@radius: 5px) {
	border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
}
 
#header {
	.rounded-corners;
}
 
#footer {
	.rounded-corners(10px);
}

编译后的CSS代码如下：

#header {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
 
#footer {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

3、嵌套规则

有了嵌套规则，我们可以在一个选择器中嵌套另一个选择器来实现继承，从而大大减少了我们的代码量，并且让我们的代码结构更加的清晰易懂。

//LESS
 
#header {
	h1 {
		font-size: 26px;
		font-weight: bold;
	}
 
	p { font-size: 12px;
		a {
			text-decoration: none;
			&:hover { border-width: 1px }
		}
	}
}

编译后的CSS代码如下：

#header h1 {
	font-size: 26px;
	font-weight: bold;
}
 
#header p {
	font-size: 12px;
}
 
#header p a {
	text-decoration: none;
}
 
#header p a:hover {
	border-width: 1px;
}

4、函数 & 运算

//LESS
 
@the-border: 1px;
@base-color: #111;
@red: #842210;
 
#header {
	color: @base-color * 3;
	border-left: @the-border;
	border-right: @the-border * 2;
}
 
#footer { 
	color: @base-color+#003300;
	border-color: desaturate(@red,10%);
}

编译后的CSS代码如下：

#header {
	color: #333;
	border-left: 1px;
	border-right: 2px;
}
 
#footer { 
	color: #114411;
	border-color: #7d2717;
}

Python一行代码实现list高效去重

破锣锅 — Mon, 23 Jan 2012 09:57:44 +0000

1	{}.fromkeys(list).keys()

其它方法参见：
http://www.peterbe.com/plog/uniqifiers-benchmark/

定风波·苏轼

破锣锅 — Sat, 21 Jan 2012 14:26:55 +0000

序：三月七日，沙湖道中遇雨。雨具先去，同行皆狼狈，余独不觉，已而遂晴，故作此。

莫听穿林打叶声，何妨吟啸且徐行。
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。
料峭春风吹酒醒，微冷，山头斜照却相迎。
回首向来萧瑟处，归去，也无风雨也无晴。

Python一行代码实现tuple转list

破锣锅 — Tue, 17 Jan 2012 15:35:09 +0000

1 2	def to_list(t): return [i if not isinstance(i,tuple) else to_list(i) for i in t]

Javascript一行代码实现两个数组diff

破锣锅 — Tue, 17 Jan 2012 15:22:43 +0000

<script type="text/javascript" language="javascript">
var diff=function(a,b) {
	return [].concat(a).filter(function(i) {return !(b.indexOf(i)>-1);});
}
var ret=diff([1,2,3,4,5],[1,3,6,8,9,10]);
//ret is [2,4,5]
script>

MySQL数据库root密码忘记怎么办？

破锣锅 — Mon, 16 Jan 2012 11:39:32 +0000

倘若你一不小心忘了root密码，抑或像我一样误操作将root权限调到了最低，大可不必惊慌失措，采用如下步骤即可轻松找回密码：

1、以安全模式运行MySQL并跳过安全验证

1	/usr/bin/mysqld_safe --skip-grant-tables

2、以root身份登录MySQL

1	/usr/bin/mysql -uroot

3、重置、清空root密码

1 2	mysql> use mysql; mysql> update user set password='' where user='root';

4、给root重新设置密码

1	/usr/bin/mysqladmin -uroot password 'Your Password Here'