Pivot Code

记忆商铺 Memery Store

Vidar Liu — Thu, 21 Jul 2011 10:17:36 +0800

很多时候，我们有大部分的思想都活在过去。

每个人都有不同的记忆，可是也有很多时候，你经过一个人，或是一家店，只是觉得熟悉，却再也想不起是什么时候，邂逅过这个人或是这里。

记忆的命题很广泛，可能是已不在身边的某个人，抑或是曾经旅行中经过的一处风景，是你的童年，我们的青春，一个玩具，一首老歌，一种味道，一本书，一家店，一张明信片，一个吻，一份铭心的爱情……

人生中什么都留不住，我们只能更多的去记录，以各种可能的方式。

没错，这里经营记忆，这里有你的记忆，当你再想起这里的时候，你已经不在这里。

随机日志

你出给我人生的一道题

Vidar Liu — Fri, 14 Jan 2011 21:21:56 +0800

当命中注定失去一个人，或即将把你忘记⋯⋯

夜依旧伴随着白昼的落幕而降临

已经记不起这是它交替的第几个轮回了

毕竟，我不是一个有心的人

乎然发觉萧尘蔽日的夜空下我已身处只影

月下，我不知路人的故事

心上，却只念梦中有你

注定的相遇把一段岁月付之于彼此

流水的人生把隐忍的情恨驱之遣来

还是别离，你我终没脱逃

茫宇之袤欲存沉星而滑落

纷繁之世我欲厮守而相离

树不留深秋的叶

江不留入海的鱼

你不留爱你的我

我不留爱我的你

这不是结局

而是彼此的开始

依然会有相遇

可惜下一个不再是你

己不欲往昔历历在目

心不觉热涌潸然而滴

彼此誓约的永远在彼此面前碎落

寒风骤起，那一天发生在某年某日的冬季

那个冬天把寒风牢牢的拥在身边，遗弃了白雪

谁会厮守呢？为了爱或誓言的无力⋯⋯

伏案，执笔

我想说我们的故事

只字，片语

铭森

随机日志

JSON基础

Vidar Liu — Thu, 26 Aug 2010 10:14:44 +0800

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

它可以通过序列化把一个简单对象转换为一个简单的字符串,在网络中进行传输,然后在客户端进行反序列化,得到原始对象.功能上和XML差不多,只是它的体积小,在客户端解析方便,所以被广泛使用

JSON建构于两种结构：

“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。

值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式：

对象是一个无序的”‘名称/值’对”集合。一个对象以”{“（左括号）开始，”}”（右括号）结束。每个”名称”后跟一个”:”（冒号）；”‘名称 /值’ 对”之间使用”,”（逗号）分隔。

数组是值（value）的有序集合。一个数组以”["（左中括号）开始，"]“（右中括号）结束。值之间使用”,”（逗号）分隔。

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。

字符串（string）与C或者Java的字符串非常相似。

数值（number）也与C或者Java的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

空白可以加入到任何符号之间。以下描述了完整的语言。(以上部分摘自:http://www.json.org/json-zh.html)

JSON举例(javascript中使用json):

先来个最简单的:

         var user = {"Id":1,"Name":"Hubery","Age":23,"Email":"hubery@163.com"};
         alert(user.Id); //这样访问也没问题alert(user["Id"]);
         alert(user.Name);
         alert(user.Age);
         alert(user.Email);

我们添加Address属性,定义更细的用户信息结构:

 var user = {
             "Id":1,
             "Name":"Hubery",
             "Age":23,
             "Address":
               {
                   "City":"Beijing","ZipCode":"111111"
               },
             "Email":"hubery@163.com"
           };
 
           alert(user.Id);
           alert(user.Name);
           alert(user.Age);
           alert(user.Address.City);
           alert(user.Address.ZipCode);
           alert(user.Email);

下面我们把Address属性定义成数组,用户有两个Address:

 var user =  {
             "Id":1,
             "Name":"Hubery",
             "Age":23,
             "Address":
               [
                 {"City":"Beijing","ZipCode":"111111"},
                 {"City":"Langfang","ZipCode":"222222"}
               ],
             "Email":"hubery@163.com"
           };
 
           alert(user.Id);
           alert(user.Name);
           alert(user.Age);
           alert(user.Address[0].City);//还可以这样:alert(user.Address[0]["City"]);
           alert(user.Address[0].ZipCode);
           alert(user.Address[1].City);
           alert(user.Address[1].ZipCode);
           alert(user.Email);

如果我们想要一个用户列表,能行吗?答案是,没问题!

 var user =  [ {
                 "Id":1,
                 "Name":"Hubery",
                 "Age":23,
                 "Address":
                   [
                     {"City":"Beijing","ZipCode":"111111"},
                     {"City":"Langfang","ZipCode":"222222"}
                   ],
                 "Email":"hubery@163.com"
               },
               {
                 "Id":2,
                 "Name":"Chris",
                 "Age":24,
                 "Address":{"City":"Beijing","ZipCode":"100085"},
                 "Email":"chris@163.com"
               }]
 
           alert("Id: "+user[0].Id+"\r\nName: "+
           user[0].Name+"\r\nAge: "+
           user[0].Age+"\r\nAddress: ("+
           user[0].Address[0].City+","+user[0].Address[0].ZipCode+") ("+user[0].Address[1].City+","+user[0].Address[1].ZipCode+")\r\nEmail: "+
           user[0].Email);
 
           alert("Id: "+user[1].Id+"\r\nName: "+
           user[1].Name+"\r\nAge: "+
           user[1].Age+"\r\nAddress: ("+
           user[1].Address.City+","+user[1].Address.ZipCode+")\r\nEmail: "+
           user[1].Email);

随机日志

HTML5初探——个人HTML5简历

Vidar Liu — Wed, 04 Aug 2010 11:06:34 +0800

下一个WEB时代将是HTML5的?它是一场WEB的革命，因为改写了WEB的历史?
呃，关于HTML5我只使用，不说话……

HTML5被浏览器支持了有很长一段时间了，而由于我的惰性，因此只知道其中的一些标签可以用来做什么，而一直没有去实践过如何去做。

也曾经一时兴起的用dreamweaver新建一个html文档兴致勃勃的一边查阅W3C教程一边在dw里编写HTML5代码。可是当我在chrome下浏览的时候却发现页面呈现的效果简直狗屁不是!于是我怀疑chrome所说的支持HTML5会不会是一个谎言？

后来的后来我才知道，原来是我的声明有问题！这些最基础的东西竟然被我忽略掉了，惭愧的说其实之前对于文档声明我从来都是被DW默认习惯了，因此从没有去关注过……

<!DOCTYPE HTML><!--HTML5声明就是这么简单-->

在HTML5中增加了很多更符合语义化的标签，应用这些标签能让你在尽可能不单独定义class的情况下呈现你的布局与样式。并且需要着重再强调一次的是它更加符合语义化。如果您想了解更多关于HTML5的知识，您可以访问W3C网站的HTML5教程:http://www.w3school.com.cn/html5/

废话少说，以下是我结合简单的HTML5标签来制作的个人简历（您需要在chrome、safari、opera、Firefox下才能正常浏览）

在这份简历中，用到的HTML5标签有

<header></header>
<aside></aside>
<article></article>
<address></address>
<fieldset>
<legend></legend>
</fieldset>

需要提醒一下的是，开始我用header标签在chrome下能正常显示布局，而在firefox和opera下不能正常显示，后来才知道原来在firefox和opera下默认的header标签是行内元素而不是我期望的块级元素，于是，我们在使用之前，仍需要重置css样式。下面是我在网上找到的HTML5的css重置代码：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, audio, canvas, details, figcaption,
figure, footer, header, hgroup, mark, menu, meter, nav,
output, progress, section, summary, time, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
 
body {
	line-height: 1;
}
 
article, aside, dialog, figure, footer, header,
hgroup, nav, section, blockquote {
	display: block;
}
 
nav ul {
	list-style: none;
}
 
ol {
	list-style: decimal;
}
 
ul {
	list-style: disc;
}
 
ul ul {
	list-style: circle;
}
 
blockquote, q {
	quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
ins {
	text-decoration: underline;
}
 
del {
	text-decoration: line-through;
}
 
mark {
	background: none;
}
 
abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
 
input[type="submit"], input[type="button"], button {
    padding: 0 !important;
    margin: 0 !important;
}
 
input, select, a img {
	vertical-align: middle;
}

简历HTML部分

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" /> 
<title>刘铭森的个人简历</title>
</head>
<body>
<fieldset class="mt10 mb10">
<legend>个人简历</legend>
<header class="clearfix">
	<aside><img src="http://www.pivotcode.com/wp-content/uploads/2010/07/mingsenliu.jpg"></aside>
	<h1>刘铭森</h1>
	<h2>- 前端开发 <a href="http://www.pivotcode.com" target="_blank" title="前端开发技术博客">http://www.pivotcode.com</a></h2>
	<h2>- 摄影 <a href="http://photo.mingsenliu.com" target="_blank" title="摄影博客">http://photo.mingsenliu.com</a></h2>
	<div class="clear"></div>
</header>
<article>
	<fieldset>
	<legend>职能</legend>
 
		<ol>
			<li>精练使用<abbr title="EXtensible HyperText Markup Language">xHTML</abbr>、<abbr title="Cascading Style Sheets">CSS</abbr>规范代码，兼容主流浏览器（包括IE6）</li>
			<li>熟用javascript动态<abbr title="Dynamic Hypertext Marked Language">DHTML</abbr>效果实现,兼容主流浏览器</li>
			<li>有学习与实践 <abbr title="HyperText Markup Language">HTML5</abbr> 与 <abbr title="Cascading Style Sheets">CSS3</abbr> 前沿技术经验</li>
			<li>熟用jQuery代码库，了解YUI,Ajax</li>
			<li>精练Photoshop切图与效果实现，会用flash制作简单动画，对ActionScript有所了解</li>
			<li>对php,sql的后台实现有所了解，对php代码有所研究，会应用前端技术嵌套PHP代码制作Wordpress模板</li>
			<li>翻唱某些歌不走调，而且唱得还可以</li>
			<li>会用单反相机拍摄点不影响对方形象的照片</li>
		</ol>
 
	</fieldset>
	<fieldset>
	<legend>工作能力</legend>
 
		<ol>
			<li>懂得如何协作和怎样协作才可以以同样的时间获得更高的效率</li>
			<li>编写代码的质量和效率高</li>
			<li>懂得如何优化网站性能与<abbr title="search engine optimization">SEO</abbr></li>
			<li>接触过很多项目，有丰富的web2.0网站前端开发经验</li>
			<li>对用户体验和产品交互有自己的认识，同时也了解用户的使用习惯</li>
			<li>学习能力能适应开发和业务需求，需要什么就能学什么并且学会学好</li>
			<li>不会吸烟，不污染办公室环境</li>
		</ol>
 
	</fieldset>
	<fieldset>
	<legend>工作经验</legend>
 
		<dl>
			<dt>2009.11--今 <a href="http://www.yeeyan.org" target="_blank">北京译言协力传媒科技有限公司</a></dt>
			<dd>·<abbr title="Cascading Style Sheets">CSS</abbr>与<abbr title="EXtensible HyperText Markup Language">xHTML</abbr>页面重构与体验优化</dd>
			<dd>·Javascript动态效果实现(结合jQuery)</dd>
			<dd>·兼部分页面设计与广告Banner设计</dd>
			<dt>2009.3--今(兼职) <a href="http://www.internetsolutionz.com" target="_blank">Internet Solutionz Inc.</a></dt>
			<dd>·公司网站设计与切图</dd>
			<dd>·公司的网页重构项目参与（<abbr title="Cascading Style Sheets">CSS</abbr> &amp; <abbr title="EXtensible HyperText Markup Language">xHTML</abbr>）</dd>
			<dd>·公司项目Javascript动态效果实现(结合jQuery)</dd>
			<dd>·公司宣传Banner与VI设计</dd>
			<dt>2008.10--2009.3 <a href="http://www.liaoru.com" target="_blank">北京了如科技有限公司</a></dt>
			<dd>·负责旗下品牌房友圈网站的页面重构（<abbr title="Cascading Style Sheets">CSS</abbr> &amp; <abbr title="EXtensible HyperText Markup Language">xHTML</abbr>）</dd>
			<dd>·负责部分页面与企业VI设计</dd>
			<dt>参与网站项目 <a href="http://www.joboto.com" target="_blank">周伯通互动招聘社区</a></dt>
			<dd>·<abbr title="Cascading Style Sheets">CSS</abbr>与<abbr title="EXtensible HyperText Markup Language">xHTML</abbr>页面重构</dd>
			<dd>·Javascript动态效果实现(结合jQuery)</dd>
		</dl>
 
	</fieldset>
	<fieldset>
	<legend>您可能还想知道的</legend>
 
		<dl>
			<dt>习惯的开发环境</dt>
			<dd>·<abbr title="windows Apache MySql PHP">WAMP</abbr> & Aptana & FireBug</dd>
			<dd>·<abbr title="windows Apache MySql PHP">WAMP</abbr> & Dreamweaver & FireBug</dd>
			<dd>·<abbr title="windows Apache MySql PHP">WAMP</abbr> & EditPlus & FireBug</dd>
			<dt>习惯的测试环境</dt>
			<dd>Windows 7 + FireFox & Chrome &  &amp; Opera &amp; IE8 & IE Tester</dd>
			<dt>学历</dt>
			<dd>·6年级开始学画画，高中开始不好好学习，现在开始后悔</dd>
			<dd>·故目前学历只有中专（天津精通学院计算机专业）</dd>
			<dt>语言能力</dt>
			<dd>·一口掺杂着河北保定方言的汉语普通话</dd>
			<dd>·一般的英语读写能力（在不断学习和积累的路上）</dd>
			<dd>·看不懂和听不懂的其他语言能力</dd>
			<dt>我在读的书</dt>
			<dd><script type="text/javascript" src="http://www.douban.com/service/badge/mingsenliu/?show=dolist&amp;n=20&amp;columns=10&amp;hideself=yes&amp;cat=book" ></script></dd>
			<dt>我读过的书（不完全统计）</dt>
			<dd><script type="text/javascript" src="http://www.douban.com/service/badge/mingsenliu/?show=collection&amp;n=20&amp;columns=10&amp;hideself=yes&amp;cat=book" ></script></dd>
		</dl>
 
	</fieldset>
 
	<fieldset>
	<legend>如果以上信息没让您失望</legend>
		<address>
			<ul>
				<li>手机：<span>15101123812</span></li>
				<li>E-mail & Gtalk : <span>mingsenliu@gmail.com</span></li>
				<li>QQ & MSN : <span>mingsenliu@msn.com</span></li>
				<li>个人网站：<span><a href="http://www.pivotcode.com" target="_blank">http://www.pivotcode.com</a></span></li>
				<li>现住址：<span>北京市朝阳区水锥子社区5号楼209室</span></li>
			</ul>
		</address>
	</fieldset>
</article>
</fieldset>
</body>
</html>

简历CSS部分

fieldset{width:880px;margin:0 auto;-webkit-box-shadow:3px 3px 0px #E0E7F1;box-shadow:3px 3px 0px #E0E7F1;-moz-box-shadow:3px 3px 0px #E0E7F1}
fieldset fieldset{width:auto;margin-bottom:20px;padding:10px;}
legend{font-weight:bold;text-align:center}
fieldset fieldset legend{text-align:left}
header{width:840px;padding:20px;background:#E0E7F1;margin-bottom:10px;}
header h1{font-size:26px;color:#036;margin-bottom:10px;}
header h2{font-size:14px;color:#36C;line-height:25px;}
header aside{width:60px;height:60px;padding:1px;float:right;background:#fff;border:1px solid #ccc}
header aside img{width:60px;height:60px;}
article h2{line-height:30px;margin-bottom:10px;}
article ol{margin-left:30px;list-style:decimal;font-size:12px;}
article ol li{line-height:30px;}
article dl{margin-left:5px;font-size:12px;line-height:30px;}
article dl dt{font-weight:bold}
article dl dd{line-height:20px;}
address ul{list-style:square;font-size:12px;margin-left:20px;font-family:Georgia,"simhei","Times New Roman", Times, serif}
address ul li{line-height:30px;}
address ul li span{color:#06C;font-style:normal;font-size:14px;}

由简历的源代码可见，结构完全摆脱掉了class样式的依赖。对于HTML5你心动了吗？

当归

Vidar Liu — Wed, 04 Aug 2010 09:45:33 +0800

最近一直在做积累，因此少了很多的分享。我订阅了很多大牛的博客，每天都幸会看到这些人或多或少的知识积累与分享，由而深觉受益匪浅。

只是在一次偶然之间吧！在我读订阅的时候。我忽然发现一个人的思想可以感染一个人，并可能那个人会因为这个思想而改变，这将是多么可怕的一件事情！！

或者是我写了很权威性的东西，或者完全是写一篇日记小文，也就罢了！对于能看到的人，算是对我的认识。然而，愧疚的是我分享的内容连我自己都不能完全明白的前提下还去分享以我的见解来领会的东西，我深感罪深恶极。

……也许之于此不同人有不同的看法，而我在乎的却是这些子虚乌有的精神罪恶吧！

我回来了，也该回来了吧，虽然怀揣着罪恶，但是不去积累、不去集思广益那么可能我就永远不会前进。而我也尽可能的去记录那些自己能真切体会的东西来分享。

是的，端着集思广益的旗帜，荣归。

谢谢!

随机日志

巷

Vidar Liu — Sun, 30 May 2010 19:00:14 +0800

巷子里会重复的喇叭不知换了几家和几个广播主题。而我却一直都在同一个窗台无心的记录着这些琐碎的改变。

巷子要拆了，嗯，我也要走了。在这个混杂着各行业经营的商贩在做着临走前的挣扎。

刚淋过雨，很小，很短。剩下的几许蓝天在厚厚的积云变幻下展露、掩盖。楼下的巷子永远那么噪杂，仿佛路过的都是不安的人们，熙熙噪噪个不停。

这里离繁华很近，又觉得离繁华很远，于是很多很多的人都聚集在这个本来不大的巷子里，他们不是为逃避繁华，而倒是为了在繁华中寄存本不应属于这里的躯体。

夏天已至，四季的脚步在未得及感触之时早已全变了模样，超市回来的路上，忽然伫足观望那条搬家后再为触及的狭窄公路，在被乌云滤光的作用下显得凄凉宁静！树绿了，很绿的绿，深浅，交错。或许如果执笔入画，并没有足够的时间描绘出来的那种细腻。云散着，天在渐暗的过程中又明了些许，天边泛橘黄色的红白渐变成天蓝，几摸乌青的云把天色拨开一半一半。薄之处，也泛着橘黄，透着红白。蓝天，乌云，余光，仿佛这原本破旧的巷子忽然跃然于莫奈的作品之中，而我只是在有心观赏。

近景的色已深，远景的色在落日之前依然保持着它应有的色彩。三角的屋顶把交错的平房组合扰乱了规矩。电线杆直纵的立在那边不知过去了多久，架线的铁杵在风雨之下锈泽斑驳，漆染了支撑它的石灰柱和无心看到它的人。几条线在那上面的捆扎，交错，没有规则的似乎只是为了适应这个巷子格调。风动了树梢摇摆，挂在架线杆子上的白色塑料袋随着节奏摆动着，貌似它在那了很久，已至于看到它并不那么突然。

过路的鸟儿停了飞了，过路的人儿路过走了，停着的人儿或许会埋怨这个蓄谋已久的变迁，可他们依然笑说着有趣的事情。执笔的人儿心停了，笔停了，他回到了自己的现实生活。

没什么，我无聊了。

随机日志

LOGO设计的几点建议

Vidar Liu — Fri, 14 May 2010 12:42:13 +0800

1. LOGO大要好看

当一个logo大大的出现在户外看板上，它必须清楚的让所有人都一目了然，这是logo具有清楚辨识度的基本原则。

2. LOGO小要好看

当logo出现在明片上，比一个拇指还小，因此设计一个logo，请用直径两公分的大小试试看，是不是缩小也一样好看。

3. LOGO黑白要好看

当你传真公司文件，logo颜色会变成黑白，你的logo因该像Nike、Mac，在经过最糟糕的复制影印方式后看起来一样清楚。

4. LOGO可以有各种颜色

Nike的标准色是红色，但你也可以看到蓝色、绿色或是黑白各种色彩。同样拥有篮球、棒球、高尔夫球、网球甚至F-1方程式赛车系列等产品，都具有独特性，这些色彩纷陈的广告却不会让你对于Nike的品牌有任何混淆。因为一个品牌精神不是单靠—颜色建立的。

5. LOGO可以轻易的画出来

拿起比来，你可以很轻易的画出Nike的弯勾、麦当劳的M，可以随手画出来表示你的LOGO也很容易被记住。

6. LOGO在CMYK与RGB都很好看

印刷用CMYK，电视或电脑萤幕用RGB，你的logo会经常出现在杂志、电视或电脑萤幕上，在没有特别色的情况下，LOGO要再这些寻常的媒体上一样好看。(就是要你别用特别色啦！例如萤光色。)

7. LOGO能够做成动画

你不能忽略网路的广告行销盛行，LOGO具备容易转换成动画的条件，在网站上的活泼多变更容易吸引注意。

8. LOGO具有国际画质感

选择一个放诸四海皆宜的图案，像是POLO的马就不会有任何文化代沟，要让全世界都看得懂的LOGO是最基本的。

9.LOGO代表的是企业精神

Nike的弯勾不代表一双鞋子，这是取自希腊神话中女神的翅膀，许多企业跨足不同的领域；房地产、保险到食品都隶属同一集团，所以LOGO表现企业精神，而不是画出企业的所有营业项目。

10.LOGO具有广泛的应用性

GUCCI的logo具有多种的应用性，它可以放在牛皮、金属、陶瓷、铁鍊、塑胶等各种不同材质上。为了你公司生产的产品週边商品方便，LOGO必须具有容易复制在特别材质的特性。

11.想让人穿在身上

一个好logo最重要的判断标准，是印在衣服上会想要穿在身上PRADA、Nike、CHANEL，都会想要迫不及待想要穿出去？

本文转自帕兰印象

英语原文: http://yyoyya-deer.blogspot.com/2007/09/logo.html

玩转Google(谷歌)搜索

Vidar Liu — Thu, 13 May 2010 10:22:31 +0800

在我爱水煮鱼的博客看到这样一篇文章，介绍了一些常用而不常在谷歌使用的功能在谷歌中怎么应用！好吧上句话是够绕口的，嗯，看看下面的内容吧！以后肯定会用到的！另外还有他没有写道的，我加在文章前面了。

查看网站的收录情况

自己的网站被谷歌收录了多少呢？在google搜索框中输入site:your site url试试。于是你看到了全都是自己网站中的内容列表，其实呢，这些全都是被谷歌收录的你的网站内容。

查找 Flash 文件

查找 Flash 文件，只需搜索“关键词 filetype:swf”。实际上 Google 已经可以支持13种非 HTML 文件的搜索。除了 PDF 文档，Google现在还可以搜索 Microsoft Office (doc, ppt, xls, rtf）、Shockwave Flash (swf)、PostScript (ps)和其它类型文档。新的文档类型只要与用户的搜索相关，就会自动显示在搜索结果中。

当然，依此类推，你也可以查找其它文件格式，其语法是：关键字 filetype:文件类型

比如要查找一首“冰雨”的Flash歌，可以输入：冰雨 filetype:swf

地图查寻

使用Google查寻城市地图或具体地址，您只需要在捜索框直接键入城市名或地址后加上“地图”即可，或直接输入具体地址。
比如要查找深圳地图，可以输入：深圳地图

度量转换

Google可以对货币类型，重量单位，长度单位以及其它单位进行转化。比如要知道1厘米等于多少英寸，可以有以下几种输入方法：

1. 1厘米等于多少英寸　或者　1厘米等于多少inch　或者　1cm等于多少inch 或者 1cm等于多少英寸
2. 1cm=? inch 或者　1厘米=?英寸或者 1厘米=?inch 或者 1cm=?英寸

看了上面的例子，相信你已经明白了。在查找的时候google支持中文和符号这种单位的表达形式，而且两种表达可以混合使用。还有一点，google支持用中文来描述问题，也可以用算术表达式，如：

1. 20人民币等于多少美元
2. 1USD=?RMB
3. 3.5 USD =? GBP
4. 10新加坡元等于多少印度卢比
5. 8人民币换成泰国的货币
6. 30 人民币每公升 =? 美元每加仑

计算器

是的，google还可以用来当计算器用。是的，没错，Google 不仅能够当计算器用，而且功能比一般的计算器要强多了。你只需要在搜索字段中输入算式，按一下回车键或者搜索就可以了。这个计算器可以用来做所有简单的计算，一些复杂的科学计算，单位换算，以及提供各种物理常数。可以试下面的几个例子：

5+2*2
2^20
sqrt(-4)

一磅=?克
光速乘以二秒等于多少公里

Google 计算器能让您在不用记住固定格式的情况下理解您的计算问题并帮助您解决这个问题。下面是一些常用的格式（同时也有一些有趣的搜索）示例：

以下是最常用的两个变量之间的计算符号，比如1+1 。

符号功能示例
+ 加 3+44
- 减 13-5
* 乘 7*8
/ 除以 12/3
^ 的…次方 8^2
% 模 (除之后的余数) 8%7
选组合运算X选Y表示在X个单位中选Y个有多少种选法 18选4
开…次方计算一个数的n次方根 32开5次方

以下是用于一个变量的计算符号，这个符号将出现在变量之前。所以最好将变量加上括号。

符号功能示例
sqrt 平方根 sqrt(9)
sin, cos, etc. 三角函数（括号中的数字单位为弧度） sin(pi/3) tan(45)
ln 以 e 为底的对数 ln(17)
log 以 10 为底的对数 log(1,000)

以下是出现在变量之后的符号。
符号功能示例
! 阶乘 5!
% 百分之 20%

其他说明
您可以将等号（=）放在一个式子之后对这个式子进行强制计算。如果这个式子是合理的，我们将返回结果。比如，1-800-555-1234= 将返回计算结果，而 1/0= 将不会返回结果。
您可以将您想先计算的部分加上括号。比如，(1+2)*3 将使加法先算，乘法后算。
您可以用是几，等于多少，或者＝？来做单位间的换算。比如，三十摄氏度等于多少华氏度。
您也可以用十六进制，八进制，或者二进制数进行计算，只需要在十六进制数前加前缀 0x ，在八进制数前加前缀 0o ，在二进制数前加前缀 0b 。比如，0×7f + 0b10010101 。

Google 计算器能识别很多单位，以及各种物理和数学常数。您也可以在计算表达式中直接用这些常数。通常这些单位和常数都有简称和英文原称，您用哪种方式输入我们都可以识别。比如，物理单位焦耳和简称焦，以及英文简称 J 都能被我们识别，再比如，不管是光速还是 c 我们也都可以识别。您可以试一试下面的例子：

1 a.u./c
56*78
1.21 GW / 88 mph
e^(i pi)+1
1加仑等于多少升
1市两=?磅
30度的正弦
G*(6e24 kg)/(4000 miles)^2
XVII 表示成中文
0b1100101*0b1001

中英文字典

Google 给中英文单词互译带来了极大的方便。您只需输入一个关键词(“翻译”,“fy” 和“FY” 任选其一）和要查的中 (英) 文单词，Google会直接显示您要查的单词的英文（或中文）翻译。

例如，要查找 apple (或苹果）的中（英）文翻译。只需在搜索字段中输入：
fy apple 或者　fy 苹果

天气查询

用Google 查询中国城市地区的天气和天气预报，只需输入一个关键词（“天气”,“tq” 或“TQ” 任选其一）和您要查询的城市地区名称即可。Google返回的网站链接会带给您最新的当地天气状况和天气预报。

例如，要查找深圳地区的天气状况，可以输入：tq 深圳

股票查询

用Google 查询股票价格和股市行情，非常简洁方便。您只需输入一个关键词（“股票”,“gp” 和“GP” 任选其一）和想查询的股票证券名称或是其六位数代码，Google就会返回其他链接让您只要一次点击便能得到有关股票证券的详尽资料。

邮编区号

用Google 查询邮政编码或长途电话区号，您只需输入关键词（“邮编”,“yb” 和“YB” 任选其一；“区号”， “qh” 和“QH” 任选其一）和要查的城市地名或邮政编码或电话区号即可。Google 会为您提供相关的所有信息，包括所在地的省市名称，邮政编码及长途电话区号。

例如，要在 Google 站点上查找深圳地区的邮编区号或邮编518100 ，区号0755的归属地，可以输入：
yb 深圳
qh 深圳
yb 518100
qh 0755

手机号码

用Google 查询手机电话号码归属地，您只需直接输入要查的号码即可（不需要任何关键词）。Google 能自动识别以13开头的11位数字为手机号码而返回相关的网站链接，让您即刻便知道答案。

例如，要查找手机号13123456789的归属地，可输入：13123456789

目前 Google 简体中文界面的股票，天气，邮编区号和手机号码查询功能仅适用于中国大陆地区。

农历日历转换

用Google 直接查询农历日期、节气和农历节日，只需键入关键词（“阳历”、“公历”、“阴历”、“农历”或它们的拼音缩写 “gl”、“nl”）加上日期即可。也可以直接输入节气名称、农历节日名称，加上年份或“去年”，“今年”，“明年”。例如：

nl 2006-12-20
公历 2006-12-20
明年立春
2008 小雪

定义

要查看字词或词组的定义，只需键入“define”，接着键入一个空格，然后键入您需要其定义的词。如果 Google 在网络上找到了该字词或词组的定义，则会检索该信息并在搜索结果的顶部显示它们。通过包含特殊操作符“define:”，并使该操作符与您需要其定义的字词之间不留空格，还可获得定义的列表。例如：

define:HTML
define:CSS

基础Javasctipt正则表达式

Vidar Liu — Thu, 15 Apr 2010 10:29:03 +0800

对于正则的使用，先前一直都是一个概念性的东西，只是知道用它可以匹配字符格式。后来在项目中遇到关于字符操作的问题，才开始着手对正则进行一些了解。而对于当时的那种了解，也只不过是项目的一时所需，只找到了适合自己的代码，然后应用到项目使用。因此从没有真正的去系统的学习。今天在订阅中看到幸福收藏夹转载的一篇关于javascript正则表达式的教程，看了一段以后就了解了关于正则表达式很多基础的系统性东西，因此转过来分享一下，也方便以后自己的复习。

网上正则表达式的教程够多了，但由于javascript的历史比较悠久，也比较古老，因此有许多特性是不支持的。我们先从最简单地说起，文章所演示的正则基本都是perl方式。

元字符

( [ { \ ^ $ | ) ? * + .

预定义的特殊字符

字符	正则	描述
\t	/\t/	制表符
\n	/\n/	制表符
\r	/\r/	回车符
\f	/\f/	换页符
\a	/\a/	alert字符
\e	/\e/	escape字符
\cX	/\cX/	与X相对应的控制字符
\b	/\b/	与回退字符
\v	/\v/	垂直制表符
\0	/\0/	空字符

字符类

简单类

原则上正则的一个字符对应一个字符，我们可以用[]把它们括起来，让[]这个整体对应一个字符。如

alert(/ruby/.test("ruby"));//true
alert(/[abc]/.test("a"));//true
alert(/[abc]/.test("b"));//true
alert(/[abc]/.test("c"));//true
alert("a bat ,a Cat,a fAt bat ,a faT cat".match(/[bcf]at/gi));//bat,Cat,fAt,bat,faT,cat

负向类

也是在那个括号里做文章，前面加个元字符进行取反，表示匹配不能为括号里面的字符。

alert(/[^abc]/.test("a"));//false
alert(/[^abc]/.test("b"));//false
alert(/[^abc]/.test("6"));//true
alert(/[^abc]/.test("gg"));//true

范围类

还是在那个中括号里面做文章。有时匹配的东西过多，而且类型又相同，全部输入太麻烦，我们可以用它。特征就是在中间加了个横线。

组合类

还是在那个中括号里面做文章。允许用中括号匹配不同类型的单个字符。

alert(/[a-f]/.test("b"));//true
alert(/[a-f]/.test("k"));//false
alert(/[a-z]/.test("h"));//true
alert(/[A-Z]/.test("gg"));//false
alert(/[^H-Y]/.test("G"));//true
alert(/[0-9]/.test("8"));//true
alert(/[^7-9]/.test("6"));//true
 
alert(/[a-m1-5\n]/.test("a"))//true
alert(/[a-m1-5\n]/.test("3"))//true
var a = "\n\"
alert(/[a-m1-5\n]/.test(a))//true
alert(/[a-m1-5\n]/.test("r"))//false

预定义类

还是在那个中括号里面做文章，不过它好像已经走到尽头了。由于是中括号的马甲，因此它们还是对应一个字符。

字符	等同于	描述
.	[^\n\r]	除了换行和回车之外的任意字符
\d	[0-9]	数字字符
\D	[^0-9]	非数字字符
\s	[ \t\n\x0B\f\r]	空白字符
\S	[^ \t\n\x0B\f\r]	非空白字符
\w	[a-zA-Z_0-9]	单词字符(所有的字母)
\W	[^a-zA-Z_0-9]	非单词字符

alert(/\d/.test("3"))//true
alert(/\d/.test("w"))//false
alert(/\D/.test("w"))//true
alert(/\w/.test("w"))//true
alert(/\w/.test("司"))//false
alert(/\W/.test("徒"))//true
alert(/\s/.test(" "))//true
alert(/\S/.test(" "))//false
alert(/\S/.test("正"))//true
alert(/./.test("美"))//true
alert(/./.test("  "))//true
var a = "\n\"
alert(/./.test(a))//true

量词

由于元字符与特殊字符或字符类或者它们的组合（中括号）甚至它们的马甲（预定义类）都是一对一进行匹配。我们要匹配“司徒正美这个词”，最简单都要 /…./，如果长到50多个字符岂不是要死人。因此我们逼切需要一个简单的操作，来处理这数量关系。

简单量词

代码	类型	描述
?	软性量词	出现零次或一次
*	软性量词	出现零次或多次(任意次)
+	软性量词	出现一次或多次（至道一次）
{n}	硬性量词	出现零次或一次
{n,m}	软性量词	至少出现n次但不超过m次
{n,}	软性量词	至少出现n次(+的升级版)

alert(/..../.test("司徒正美"))//true
alert(/司徒正美/.test("司徒正美"))//true
alert(/[\u4e00-\u9fa5]{4}/.test("司徒正美"))//true
alert(/[\u4e00-\u9fa5]{4}/.test("司徒正美55"))//true
alert(/^[\u4e00-\u9fa5]+$/.test("正则表达式"))//true
alert(/^[\u4e00-\u9fa5]+$/.test("正则表达式&amp;*@@"))//false
alert(/\d{6}/.test("123456"))//true
alert(/[ruby]{2}/.test("rr"))//true
alert(/[ruby]{2}/.test("ru"))//true
alert(/[ruby]{2}/.test("ry"))//true

/[\u4e00-\u9fa5]/用于匹配单个汉字。

贪婪量词，惰性量词与支配性量词

贪婪量词，上面提到的所有简单量词。就像成语中说的巴蛇吞象那样，一口吞下整个字符串，发现吞不下（匹配不了），再从后面一点点吐出来（去掉最后一个字符，再看这时这个整个字符串是否匹配，不断这样重复直到长度为零）

隋性量词，在简单量词后加问号。由于太懒了，先吃了前面第一个字符，如果不饱再捏起多添加一个（发现不匹配，就读下第二个，与最初的组成一个有两个字符串的字符串再尝试匹配，如果再不匹配，再吃一个组成拥有三个字符的字符串……）。其工作方式与贪婪量词相反。

支配性量词，在简单量词后加加号。上面两种都有个不断尝试的过程，而支配性量词却只尝试一次，不合口味就算了。就像一个出身高贵居支配地位的公主。但你也可以说它是最懒量词。由于javascript不支持，所以它连出场的机会也没有了。

var re1 = /.*bbb/g;//贪婪
var re2 = /.*?bbb/g;//惰性
//  var re3 = /.*+bbb/g;//支配性,javascript不支持，IE与所有最新的标准浏览器都报错
alert(re1.test("abbbaabbbaaabbbb1234")+"");//true
alert(re1.exec("abbbaabbbaaabbbb1234")+"");//null
alert("abbbaabbbaaabbbb1234".match(re1)+"");//abbbaabbbaaabbbb
 
alert(re2.test("abbbaabbbaaabbbb1234")+"");//true
alert(re2.exec("abbbaabbbaaabbbb1234")+"");//aabbb
alert("abbbaabbbaaabbbb1234".match(re2)+"");//abbb,aabbb,aaabbb

分组

到目前为止，我们只能一个字符到匹配，虽然量词的出现，能帮助我们处理一排密紧密相连的同类型字符。但这是不够的，下面该轮到小括号出场了，中括号表示范围内选择，大括号表示重复次数。小括号允许我们重复多个字符。

//分组+量词
alert(/(dog){2}/.test("dogdog"))//true
//分组+范围
alert("baddad".match(/([bd]ad?)*/))//baddad,dad
//分组+分组
alert("mon and dad".match(/(mon( and dad)?)/))//mon and dad,mon and dad, and dad

反向引用

反向引用标识由正则表达式中的匹配组捕获的子字符串。每个反向引用都由一个编号或名称来标识，并通过“\编号”表示法进行引用。

var color = "#990000";
/#(\d+)/.test(color);
alert(RegExp.$1);//990000
 
alert(/(dog)\1/.test("dogdog"))//true
 
var num = "1234 5678";
var newNum = num.replace(/(\d{4}) (\d{4})/,"$2 $1");
alert(newNum)

候选

继续在分组上做文章。在分组中插入管道符（“|”），把它划分为两个或多个候多项。

var reg = /(red|black|yellow)!!/;
alert(reg.test("red!!"))//true
alert(reg.test("black!!"))//true
alert(reg.test("yellow!!"))//true

非捕获性分组

并不是所有分组都能创建反向引用，有一种特别的分组称之为非捕获性分组，它是不会创建反向引用。反之，就是捕获性分组。要创建一个非捕获性分组，只要在分组的左括号的后面紧跟一个问号与冒号就行了。

var color = "#990000";
/#(?:\d+)/.test(color);
alert(RegExp.$1);//""

题目，移除所有标签，只留下innerText!

var html = "
 
<a href="http://www.cnblogs.com/rubylouvre/">Ruby Louvre</a>by <em>司徒正美</em>
 
";
var text = html.replace(/&lt;(?:.|\s)*?&gt;/g, "");
alert(text)

注意：javascript不存在命名分组

前瞻

继续在分组内做文章。前瞻与后瞻其实都属于零宽断言，但javascript不支持后瞻。

零宽断言
正则	名称	描述
(?=exp)	正向前瞻	匹配exp前面的位置
(?!exp)	负向前瞻	匹配后面不是exp的位置
(?<=exp)	正向后瞻	匹配exp后面的位置不支持
(?<!exp)	负向后瞻	匹配前面不是exp的位置不支持

正向前瞻用来检查接下来的出现的是不是某个特定的字符集。而负向前瞻则是检查接下来的不应该出现的特定字符串集。零宽断言是不会被捕获的。

var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?=room))///在我们捕获bed这个字符串时，抢先去看接下来的字符串是不是room
alert(reBed.test(str1));//true
alert(RegExp.$1)//bed
alert(RegExp.$2 === "")//true
alert(reBed.test(str2))//false
 
var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?!room))/  //要来它后面不能是room
alert(reBed.test(str1))//false
alert(reBed.test(str2))//true

题目，移除hr以外的所有标签，只留下innerText!

var html = "
 
<a href="http://www.cnblogs.com/rubylouvre/">Ruby Louvre</a>
 
<hr />
 
by <em>司徒正美</em>
 
";
var text = html.replace(/&lt;(?!hr)(?:.|\s)*?&gt;/ig,"")
alert(text)//Ruby Louvre<hr />by 司徒正美

边界

一个要与字符类合用的东西。

边界
正则	名称	描述
^	开头	注意不能紧跟于左中括号的后面
$	结尾
\b	单词边界	指[a-zA-Z_0-9]之外的字符
\B	非单词边界

题目，设计一个字符串原型方法，实现首字母大写！

var a = "ruby";
String.prototype.capitalize =  function () {
     return this.replace(/^\w/, function (s) {
            return s.toUpperCase();
            });
        }
       alert(a.capitalize())//Ruby

单词边界举例。要匹配的东西的前端或未端不能为英文字母阿拉伯字数字或下横线。

var str = "12w-eefd&amp;efrew";
alert(str.match(/\b\w+\b/g))//12w,eefd,efrew

实例属性	描述
global	是当前表达式模式首次匹配内容的开始位置，从0开始计数。其初始值为-1，每次成功匹配时，index属性都会随之改变。
ignoreCase	返回创建RegExp对象实例时指定的ignoreCase标志（i）的状态。如果创建RegExp对象实例时设置了i标志，该属性返回True，否则返回False，默认值为False。
lastIndex	是当前表达式模式首次匹配内容中最后一个字符的下一个位置，从0开始计数，常被作为继续搜索时的起始位置，初始值为-1，表示从起始位置开始搜索，每次成功匹配时，lastIndex属性值都会随之改变。(只有使用exec()或test()方法才会填入，否则为0)
multiLine	返回创建RegExp对象实例时指定的multiLine标志（m）的状态。如果创建RegExp对象实例时设置了m标志，该属性返回True，否则返回False，默认值为False。
source	返回创建RegExp对象实例时指定的表达式文本字符串。

var str = "JS's Louvre";
var reg = /\w/g;
alert(reg.exec(str));//J
alert(reg.lastIndex);//1
alert(reg.exec(str));//S
alert(reg.lastIndex);//2
alert(reg.exec(str));//s
alert(reg.lastIndex);//4
alert(reg.exec(str));//L
alert(reg.lastIndex);//6

格式化

Vidar Liu — Sat, 10 Apr 2010 17:52:33 +0800

3天前，硬盘的数据恢复到35G，软件提示系统内存不足，之后它再也不工作了，我从程序管理器里关掉数据恢复软件。自此再也没有试图恢复硬盘里的数据。我已经忘记硬盘里曾经属于我的一切；照片、音乐、电影、资料，有些我备份在了新的硬盘，有些则随那次的硬盘使用再也恢复不来了。

我试图从这35G数据里找到一些我觉得遗憾的东西，例如一个我没有备份出来的照片，抑或一首我暂时忘记旋律的歌曲。

我用列表的方式显示出所有文件的排序，按类型。

前面排列的系统文件很是臃肿，35G内容在一个文件夹里显示，导致CPU的运算有点力不从心。我费力的拖动着横向滚动条，目光逐一检索着数据条目：不知名文件、我的简历、几首歌、几个电影、一些学习内容……

从前分门别类的硬盘分区数据就这么被硬生生的撮合到了一起。连同有用内容和垃圾文件，我实在理不出有用的头绪。打开一首歌，文件损坏。打开一部电影，文件损坏。word文档，一样损坏。

如此，我知道即使利用软件检索出了那些数据的条目，却也难以检索出数据的内容了。

Ctrl&A我选中了已恢复的一切，Del……

后来我再也没有试图去存些数据到那个硬盘里，因为我知道，如果我不存，我依然可以使用一些手段试图找回那些格式化的东西，如果我存了，数据格式重写，那些格式化后的东西就再也找不回了。

我记得了，里面有我两个G的QQ聊天记录。2007-2010，那个精致的硬盘盒包裹着那个存储我三年数据积蓄的磁盘，在一次错误尝试中损坏。时间就如此而过，只用了几个数字的承载。数据就如此而逝，再一次失误之后。

之后，它依然被放在公司电脑主机上方，等待我下一次移动或拿起它。。。

Pivot Code

记忆商铺 Memery Store

随机日志

你出给我人生的一道题

随机日志

JSON基础

随机日志

HTML5初探——个人HTML5简历

简历HTML部分

简历CSS部分

相关日志

当归

随机日志

巷

随机日志

LOGO设计的几点建议

1. LOGO大要好看

2. LOGO小要好看

3. LOGO黑白要好看

4. LOGO可以有各种颜色

5. LOGO可以轻易的画出来

6. LOGO在CMYK与RGB都很好看

7. LOGO能够做成动画

8. LOGO具有国际画质感

9.LOGO代表的是企业精神

10.LOGO具有广泛的应用性

11.想让人穿在身上

相关日志

玩转Google(谷歌)搜索

查看网站的收录情况

查找 Flash 文件

地图查寻

度量转换

计算器

中英文字典

天气查询

股票查询

邮编区号

手机号码

农历日历转换

定义

相关日志

基础Javasctipt正则表达式

元字符

预定义的特殊字符

字符类

量词

分组

反向引用

候选

非捕获性分组

前瞻

边界

相关日志

格式化

随机日志