Kily's Blog » web前端关注

前端开发利器vim

kily — Fri, 17 Jun 2011 11:01:21 +0000

老早就听大湿们说vim是真正的程序员用的编辑器，我也是经过无数次的“使用-放弃-使用-放弃”之后，最终选择了vim这个神器。综合起来我用到的vim功能并且觉得好用的有以下几条：

1. 界面美观、轻巧、系统资源损耗小
2. 跨平台，Windows下的Gvim , Linux下的vi , Mac下的mac vim
3. 主题风格超级多（http://code.google.com/p/vimcolorschemetest/），我用monokai , 很经典、很酷
4. 代码自动补全+zencoding可以说是完美了

不幸的是vim的可定制性太高，很多参数设置都是需要手动配置的。而且Windows下用vim会出现一些问题，多数是因为用户不会配置.vimrc文件，一个设置就可能让你放弃vim。比如：

1. vim字体不好看
2. vim文件格式
3. vim的三种模式：命令、可视、插入
4. vim快捷键设置。
5. 。。。

很多新手可能会因为这些问题放弃使用vim。我建议先看看善用佳软博客的我这样使用VIM。

不过我有一个自己觉得好用的版本，是依照我个人习惯设置过来的。放出个压缩包给大家，大家可以参考下。使用方法如下：

1. 先下载gvim7.2的版本安装，点这里
2. 解压的我包到vim安装目录
3. 安装YaHei.Consolas字体（强烈建议安装）

我用的vim7.2：下载地址

YaHei.Consolas字体：下载地址

更新：adam的VIM视频教程很强大，强烈建议学习研究。地址：

http://bbs.yuyadong.com/read.php?tid=3930

CSS类名class用下划线”_”还是减号”-”

kily — Sat, 07 May 2011 06:23:18 +0000

其实这个问题早先已经有人讨论过了，但是没有定论。一个人写代码的时候爱咋样咋样，但量在团队合作的时候就会出现问题，一般来说都会制定相应的标准来保证代码风格的一致性。

关于CSS类名的命名方式大致有三种：

1. 下划线，即：class=”main_nav”
2. 减　号，即：class=”main-nav”
3. 驼峰式，即：class=”mainNav”

三种方法各有利利弊，我大概总结了下面几点：

1.下划线

优点：和程序兼容性好，因为所有程序语言里的变量命名都可以用下划线。

缺点：生硬难看，多余一个字符。

2.减号

优点：与CSS代码原生匹配，比如：text-align:center; 视觉上有一致性，也很美观。

缺点：用减号分割的字符一般的文本编辑器会认为它是两个字符，从而影响“双击选中”操作，另外在程序里减号是变量的运算符，可能会造程序书写困难。

3.驼峰式

优点：符合编程语言命名规范，节省1个字节

缺点：XHTML规定都是小写，~~用某些代码整理工具可能会误把类名全部转化成小写~~

大家如果觉得有什么要补充的可以讨论下，个人还是喜欢减号多一点。因为比较原生嘛！

招聘前端开发工程师（帮忙）

kily — Fri, 15 Apr 2011 08:18:58 +0000

好吧！沉默了一阵子的总算能有机会写写博客了，最近也是为了工作的事情忙里忙外。现在帮朋友发一则招聘信息。是我特别想去但没有去了的一次机会，如果有意应聘的同学们可抓紧哦。

具体要求如下（http://www.douguo.com/hr.html）：

职位名称：前端开发工程师
招聘人数：1名
岗位职责：

1. 负责豆果网web产品的前端开发及维护工作；
2. 负责web产品前端相关技术的规范标准。

任职条件：

1. 热爱前端开发、喜欢钻研各类互联网应用；
2. 2年以上前端开发经验，熟悉web标准化，性能优化方法，有成功案例；
3. 熟悉CSS，JS框架，有较强的学习能力；
4. 熟悉PHP/Actionscript优先。

多说一句，如果你是迫于生计想找一份工作那么这工作未必适合，如果你对前端充满激情并渴望有一片能挥洒自己青春的地方，那么这份工作将非常适合你。

关于豆果你还可以看看以下信息了解更多

http://fairyfish.net/2011/03/22/douguo/
http://tech.qq.com/a/20110304/000171.htm

联系方式：
直接发送简历到：hr@douguo.com
或者联系我：keeliizhou@gmail.com

Eclipse中用SVN简单部署你的项目

kily — Sat, 18 Dec 2010 08:33:34 +0000

在实际的项目开发总会遇到一些问题，比如多人协作coding的时候更新版本不统一。简单说就是：

当你在修改代码的时间可能其它人也在修改，为了避免更新版本时出现混乱，我们会用到SVN也是是版本管理。

理论知识：SVN ，subversion

神马SVN服务器，客户端的就不多说了，自己去查，我主要给大家说说如何在Eclipse中用SVN。

一、SVN服务器

我们可以选择GoogleCode提供的。当然前提是你知道Open Source的意思，也就是说项目的源代码是以你选择的某种开源协议放在Google服务器上的。不放心的可以自己在本地搭建SVN服务器，建议新手用这个VisualSVN(即有图形界面的SVN服务器端)

1.打开http://code.google.com/hosting/createProject按自己的需要创建一个项目，不过要记住在Version control system里面选择Subversion就行。

2.创建完成后点击导航栏上面的“Source”项目，这里Google会给出项目提交的SVN库(repo)地址，比如我的是：https://kily-wordpress-theme.googlecode.com/svn/trunk/。点击下面的google.com password进入设置界面，记下Google自动为你生成的SVN链接密码。

`二、SVN客户端`

这一步我们不需要自己建客户端，因为我们要用Eclipse的一个插件，其实也算是SVN客户端，唠叨了？囧~如果你没有Eclipse的话也可以试试这个SVN客户端：Tortoisesvn

1.在Eclipse中点击“帮助-添加一个新插件”（help-install new software）输入Eclipse插件subeclipse的更新地址：http://subclipse.tigris.org/update_1.6.x安装完成后重启Eclipse。

2.在Eclipse中调出SVN视图：window - show view – other – SVN - SVN资源库。右键新建一个SVN资源库。URL填第二步中Google给的地址。下一步直到完成。

3.在Eclipse的项目视图中右键一个项目-Team – ShareProject - SVN一路下一步。不过别忘写初始导入的注释。

4.提交(commit)你的项目并加上注释，右键项目-team-提交(commin)即可。提示你输入用户名时就填你Google账号地址比如：keeliizhou@gmail.com密码用第二步Google为你自动生成的登陆。好了你的项目已经在Google的服务器上了。接下来就试着更新下版本吧。

`三、使用版本更新及对比`

改动项目里面任何一个文件的源代码。比如多加一行。保存后commit到SVN服务器并写下改动注释。

右键那个文件compareWith - 与分支/标记进行比较。选择以前的那个版本确定。你就能很清晰的发现两个版本之间的异同了！

分享一段可定制的分享代码

kily — Wed, 13 Oct 2010 10:00:18 +0000

最近在给公司做网站的时候需要给产品页加上分享到微博的代码，本来用addthis的代码，但可定制性太差。于是就自己上网搜索了下总结出一个感觉还不错的代码。效果类似于文章下面的“收藏&分享”。

如果觉得不够的话自己去搜索链接代码，图标用的是eicodesign发布的免费图标哦。

用法：

1.复制下面的HTML代码到你的HTML文件中(最好下载，免得替换符号)：


	
		分享：
		
			新浪微博
		
		
			网易微博
		
		
			腾讯微博
		
		
			QQ空间
		
		
			豆瓣

2.在你的样式表中加入如下代码：

#ak_share     { padding:10px 0; font-size:12px; }
.ak_share      { height:1%; overflow:hidden; }
.ak_share dt { float:left; font-weight:bold; color:#A5A5A5; height:16px; line-height:16px; }
.ak_share dd { margin-right:10px; margin-left:0; height:16px; float:left;  }
.ak_share a:hover { color:#ed7811; text-decoration:underline;}
.ak_share a     { float:left; height:16px; line-height:16px; padding-left:18px; background:url(share.gif) left top no-repeat; color:#666; text-decoration:none; }

.ak_share .t_163_s     { background-position: 0 -16px; }
.ak_share .t_qq_s     { background-position: 0 -32px; }
.ak_share .qzone_s     { background-position: 0 -48px; }
.ak_share .douban_s     { background-position: 0 -64px; }

注意：红色的图片路径自己修改

点击查看效果

素材打包下载

JavaScript 正则表达式学习笔记<2>

kily — Sun, 27 Jun 2010 11:23:23 +0000

那么今天继续了，上次我们熟悉了一下关于JavaScript正则表达式的一些基本匹配方式，今儿个咱来学习下String对象的一些和正则表达式有关的方法，关于这个应该不用多说，常用于表单的字符串验证。

1.String对象的replace()方法

String对象最基本的方法之一，它用于替换目标字符串中的某个字符。比如：

var s = “—Hello11—”; //将这个字符串中的-替换成#
alert(s.replace(“-”,”#”)); //返回#–Hello11—而不是###Hello11###
//要替换所有的-号我们可以用正则了
alert(s.replace(/-/,”#”)) //用/-/来替换#,结果与上面一样，原因是你忘了加上匹配模式
alert(s.replace(/-/g,”#”)); //这样就可以将字符串的所有的-替换成#了
//如果我想把目标字符串替换成#Hello11#该怎样写正则呢？
alert(s.replace(/-+/g,”#”)); //+是什么作用请查上篇笔记

String对象正则实现trim（去空格）效果

var s = “ Hello “;
alert(“|”+s.replace(/^\s+/,”")+”|”); //替换前面的多个空格：^
alert(“|”+s.replace(/\s+$/,”")+”|”); //替换后面的多个空格：$ 注：加上“|”易辨认
//整合到一个trim函数里面去,调用此方法时可以去掉字符串两边的空格
function trim(s){
var re1 = /^\s+/,re2 = /\s+$/;
s= s.replace(replace(),”");
return s.replace(re2,”");
}

2.String对象的split()方法

此方法将目标字符串用某字符分割开，并返回一个数组对象。基本用法如下：

var s = “12,34,56″;
var arrs = s.split(“,”)
alert(arrs[0]+”\n”+arrs[1]+”\n”+arrs[2]);

小扩展：当目标字符串是用户输入的一些字符，比如生日。我们该如何分别获取他的年、月、日。

var s = “1988-8-8″; //这里是用户输入的数据
var date = s.split(“-”);
var year = date[0],month = date[1],day = [2];
alert(“您出生于：”+year+”年”+month+”月”+day+”日”);

对于一些“不按常理出牌”的用户，我们可以用正则去搞定，比如：

var s = “1988- 8 -*8″; //比如用户这样输入了数据
var date = s.split(/[^0-9]+/); //脱字符^放在[]中间表示匹配相反内容
//这个正则表示匹配多个非数字字符，用其分割
var year = date[0],month = date[1],day = [2];
alert(“您出生于：”+year+”年”+month+”月”+day+”日”);

3.String对象的search()方法

这个方法表示查找字符串中与之匹配的字符并返回其下标值，没找到匹配值时返回-1 。比如：

var s = “My age is 18.”;
alert(s.search(“1″));//返回10,search方法与indexof方法的区别在于search可以使用正则

4.String对象的match()方法

这个方法类似于正则中的exec方法，如：

var s = “Ubuntu 8.10″;
var re = /^([a-z]+)\s+(\d+)\.(\d+)/i; //正则中的.表示匹配任意字符，这里要转义它
var arrs = s.match(re);
alert(“name:”+arrs[1]+”\nversion:”+arrs[2]+”\nsub-version:”+arrs[3]);

休息一下..

JavaScript正则表达式学习笔记<1>

kily — Thu, 24 Jun 2010 04:38:46 +0000

刚刚收到李炎恢老师的弟子CJ写的一部JavaScript+Ajax+JQuery视频教程，对于我这种刚入门级的菜菜来说真是雪中送炭呀！今天看到了正则表达式章节，感觉老师讲得非常不错，做点笔记与大家分享，当然也做个免费广告哈：如果想购买此视频教程的话点击这里。绝对物超所值，现在网络上最新的关于JS的视频教程也就是这个了哦。

1.什么是正则表达式

正则表达式是由普通字符（如a到z）以及特殊字符（称为元字符）组成的文字模式，该模式描述在查找文字主体时待匹配的一个或者多个字符串。作为一个模板，将字符模式与所搜索的客串进行匹配。

关于元字符与匹配内容可以参考这张表：正则匹配表

2.怎么创建正则表达式

var re = new RegExp();//RegExp是一个对象,和Aarray一样
//但这样没有任何效果,需要将正则表达式的内容作为字符串传递进去
re = new RegExp(“a”);//最简单的正则表达式,将匹配字母a 可简写为“var re = /a/”
re = new RegExp(“a”,”i”);//第二个参数,表示匹配时不分大小写

RegExp构造函数第一个参数为正则表达式内容，而第二个参数则为可选项标志，而且可以组合使用。可选标志如：

g （全文查找）
i （忽略大小写）
m （多行查找）

var re = new RegExp(“a”,”gi”);
//匹配所有的a或A。可简写为“var re = /a/gi”

3.正则表达式对象的方法

三种方法分别是test，exec，compile：

test：返回一个Boolean值，它指出在被查找的字符串中是否存在模式。
exec：用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。
compile：把正则表达式编译为内部格式，从而执行得更快。

4.正则表达式的属性

常用的有以下几种：

source：返回表达式文本的复本。只读。
lastIndex：返回字符位置，它是被查找字符串中下一次成功匹配的开始位置。
$1…$9：返回九个在模式匹配期间找到的、最近保存的部分。只读。
input ($_)：返回执行规范表述查找的字符串。只读。
lastMatch ($&)：返回任何正则表达式搜索过程中的最后匹配字符。只读。
leftContext ($`) ：返回被查找的字符串中从字符串开始位置到最后匹配之前的位置之间的字符。只读。
rightContext ($’) 返回被搜索的客串中从最后一个匹配位置开始到字符串结尾之间的字符。只读

5.动手测试正则表达式是如何工作的

用test方法测试是否匹配模式：

var re = /he/; //最简单的正则表达式,将匹配he这个单词
var str = “he”;
alert(re.test(str)); //用test方法测试是否匹配，返回true
str = “we”;
alert(re.test(str)); //false
str = “HE”;
alert(re.test(str)); //false
re = /he/i; //加上可选标识i(ignoreCase)来忽略大小写
alert(re.test(str)); //true
str = “yeah~he loves her”;
alert(re.test(str)); //true

脱字符（^）开头匹配：（查表看看什么是脱字符）

re = /^he/i;
alert(re.test(str)); //false,因为he不在str最开始
str = “He is a good guy!”;
alert(re.test(str)); //true

美元符（$）末尾匹配：

re = /^he$/i; //$表示字符结束位置
alert(re.test(str)); //返回false说明”he is a good guy”不是以he结尾
str = “He”;
alert(re.test(str)); //返回true

（\s）空白字符匹配：（包括空格，制表符，换行，换页等）

str = “user Name”;
re = /\s/;
alert(re.test(str)); //str=”user\nName”也将返回true

方括号（[ ]）范围匹配：

re = /^[a-z]/i; //匹配开头为a~z中任意字符并且不区分大小写
str = “variableName”;
alert(re.test(str)); //true
str = “123variableName”;
alert(re.test(str)); //false

用exec方法测试哪些字符匹配了模式：

var osVersion = “Ubuntu 8″;
var re = /^[a-z]+\s+\d+$/i; //+表示字符至少出现1次，\d表示一个数字
//这个正则表示：匹配以a~z中任意字母为开头、至少有一个空白字符、至少有一个数字结尾的字符串
alert(re.test(osVersion));   //true
re = /^[a-z]+\s+\d+$/i;
arr = re.exec(osVersion);
alert(arr[0]);     //将osVersion完整，因为它刚好匹配re
//我们只想取出数字..
re=/\d+/;
arr = re.exec(osVersion);
alert(arr[0]);     //返回8

复杂一点的子匹配：

re = /^[a-z]+\s+(\d+)$/i;    //用()来创建子匹配
arr = re.exec(osVersion);
alert(arr[0]+”\n”+arr[1]);   //arr[1]为第一个子匹配也就是版本号8
osVersion = “Ubuntu 8.10″;
re = /^[a-z]+\s+(\d+)\.(\d+)$/i;    //.是正则中的元字符需要转义即“\.”表示输出一个.号
arr = re.exec(osVersion);
alert(“完整版本：”+arr[0]+”\n大版本号：”+arr[1]+”\n字版本号：”+arr[2]);

休息一下精彩继续…

漂亮的JQuery可编辑表格

kily — Tue, 01 Jun 2010 01:42:11 +0000

可编辑表格在网页开发中非常常见，尤其是与后台做Ajax应用。花了点时间学习了下这种表格的制作方法，有JQuery的时候一切都是那么简单。如果换成纯JavaScript的话一系列的DOM操作的确相当繁琐，JQuery中实现起来却异常简单。

核心JQuery代码在这里：

$(function () {
	//隔行换色
	$("tbody tr:odd").css("background-color", "#eee");
	var numId = $("tbody td");
	numId.click(function () {
		var tdIns = $(this);
		if (tdIns.children("input").length > 0) {
			return false;
		}
		var inputIns = $(""); //需要插入的输入框代码
		var text = $(this).html();
		inputIns.width(tdIns.width()); //设置input与td宽度一致
		inputIns.val(tdIns.html()); //将本来单元格td内容copy到插入的文本框input中
		tdIns.html(""); //删除原来单元格td内容
		inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中
		inputIns.click(function () {
			return false;
		});
		//处理Enter和Esc事件
		inputIns.keyup(function (event) {
			var keycode = event.which;
			if (keycode == 13) {
				var inputText = $(this).val();
				tdIns.html(inputText);
			}
			if (keycode == 27) {
				tdIns.html(text);
			}
		});
	});
});

效果点这里

鼠标点击单元格时单元格变成可一个文本框，可用enter和esc控制操作完成与否。

嗯。效果挺不错的吧！废话一句漂亮与否还得看CSS哦！

从HTML5的角度重新思考表单元素

kily — Fri, 21 May 2010 13:53:18 +0000

这是一篇我在nettuts上看到的一篇文章，写得挺不错的。原文在这里：Rethinking Forms in HTML5 最近网上HTML5和Flash的口水战也不少，做为一个合格的前端了解些新知识还是很有必要的。

先来看一个传统的表单：

这个表单看起来相当臃肿，而且不利于特殊人群阅读网页内容。在新的HTML5规定中会有一些增加一些新的属性来完美它们，如：autofocus, autocomplete, list, required, multiple等。

自动聚焦（autofocus）

这些新属性的作用就是让它们相对的好理解。例如：

autofocus>

这种情况的要点就在于一旦页面加载，这个文本输入框就自动聚焦，使用户的输入更加便捷。

autocomplete="off">

这种情况，通过关闭表单自动完成功能让浏览器无法显示自动完成的效果。这就避免了因自动完成功能而输入错误内容的情况。

数据表(list)

list="url_list">
<datalist id="url_list">

这个list属性的确很酷，当你用鼠标点击这个输入框时下面会自动显示出datalist的内容，通过点击它可以将内容自动添加到上面的输入框。这个效果如果要用JS制作的话就会相当麻烦了。注：建议使用新版的opero浏览些效果，如下：

多选框(multiple)

multiple>

multiple属性让大家可以调用页面中datalist中的内容(如上)，这双节省了我们用JS去写此功能的时间。

必填项(required)

required>

此属性表明该项目为必填项目，提交表单时如果为空则自动给出提示！完全不需要另写JS。

正则(RegEx)

pattern="[0-9][A-Z]{3}">

此属性会检查输入内容和目标正则表达式的匹配情况。

验证(Validation)

range" min="1" max="10" step=".5" value="5" >

当输入框类型为range时就可以定义内容的范围等相关项目。

当然以上提到的这些属性并不是每个浏览器都支持的，具体情况看下图：

更多精彩内容请阅读原文，这里只做抛砖引玉的介绍。