大踏步走

归程

iqianduan — Thu, 19 Jan 2012 20:44:30 +0800

晚上11点多，北京北，归家的火车即将到来，这时候，盼望着回家的那种感觉则更加强烈。。。

突然觉得，过去的2011，就这么过去了，好像没个结尾，很突兀。想想自己这一年，变化也不是很大,就这样也就结束了。

等哪天，一定的静下来好好总结下，不能就这样糊里糊涂的过去。。。

2012，还有很多事要做，所以，更要努力！大踏步走！！

2011 11 11

iqianduan — Fri, 11 Nov 2011 23:44:07 +0800

这是一个特殊的日子，百年难遇。然后，这一天过的，平常无奇，或许生活亦是如此。

曾经许下的愿，也没对我有任何表示，连点迹象都没有。今天夸下的海口无法实现，让朋友们取笑吧。。。

最近一直在想一个问题，自己究竟想要一个什么样的结果？想来想去也没个清晰的结论。或许自己心里还是有一种期望与不甘，这也支撑着自己能走到现在，希望这样的等待能够换来一个完美的结果。。。

今天，还真是个值得纪念的日子，公司的生日，走过了13载；而这里，我的小站，也恰3年了，一直陪我到现在，感谢有你！！

明天，还将继续。。。

2002-09-18

iqianduan — Sun, 18 Sep 2011 22:56:01 +0800

九年前的今天，我踏上了那个叫北京西的站台。。。

读《编写高质量代码》笔记之一高质量的CSS

iqianduan — Wed, 07 Sep 2011 00:25:21 +0800

床头一直放着阿当的那本《编写高质量代码》，很长时间了都没怎么翻。之前看目录，感觉讲的内容大多都是自己相对比较熟悉或者经常遇到的，以为没啥可看的。。。然而真正看了前面几章的内容，才知道自己又犯了眼高手低的毛病，真是罪过。。。

昨天看了第四章，讲的是高质量的CSS。从头看完，收获还是很多。以前经常遇到的一些问题，虽然凭经验知道解决的方法，但总归太过零散，没有有效的将这些问题整理、总结、沉淀下来；更深层次的讲，究竟是什么情况下会出现类似问题、产生问题的根本原因？等等这些，都需要自己以后多问个为什么。

言归正传，这就将本章中一些重点内容整理下，并结合自己的理解，敲打以记之。

一、关于DTD

这是最根本的问题，不必做过多阐述。按照W3C的标准，我们需要在HTML页面的最开始声明文件的DTD类型，如果漏写，在Firefox浏览器下仍然会按照标准模式来解析页面，但在IE中，就会触发怪异模式。而两种模式的区别就表现在对合模型的解析不一样。所以我们在日常的页面书写中，首先要声明正确的DTD类型。现在常用到的是(X)HTML下的三种模式和HTML5模式，当然如果是WAP页面，还有其相应的声明模式。

二、Css组织模式

公认最合理的三层结构：base层、common层和page层。当然这是相对于团队合作和比较大的项目来划分的。如果网站很小，仅仅几个页面，或者只是一个专题，个人觉得完全没必要分三层结构，这个根据实际情况来定。

二、Css组织模式

公认的三层结构：base层、common层和page层。当然这是相对于团队合作和比较大的项目来划分的。如果网站很小，仅仅几个页面，或者只是一个专题，个人觉得完全没必要分三层结构，这个根据

三、模块化Css

模块化可以让代码高度重用，提高开发效率，降低维护成本。我们讲的模块化，往往是结构和功能相对独立，并在页面中可多处使用的内容单独抽去出来，这部分形成一个模块。

模块化有这么几个原则：

1、模块与模块之间尽量不要包含相同的部分，如果有，则把他们单独提出来，形成新的模块；
2、模块在保证数量尽量少的原则下，做到尽可能的简单，保证它的重用性(*需要加深理解)。

四、Css命名

关于Css命名这方面的内容，自己曾经写过《最新整理的CSS命名与书写》，可做参考。

在这里补充几个问题：

1、Css Reset。相信大家都明白这个东西产生的原因，而且各个版本繁多。没有最好，只有更好。只要适合你、并能在团队项目中保持一致即可以。
2、Css应用时，继承定义还是挂多个Class？继承就是给父级容器定义足够全的样式，子类继承父类的样式，如果有不同的，则重新定义覆盖掉父级的定义；组合则是将复杂的样式拆分为容易产生变化的部分和相对稳定的部分。相对稳定的部分为主体Class；变化的根据特性拆分为一个个独立的Class，书写的时候通过挂多个Class来实现效果。相比较：继承容易产生多个重定义的Class，这样相对不统一，维护成本也大；而组合看着需要引用多个Class比较繁琐，但书写清晰，可多处使用，维护起来也更方便。所以还是推荐“多用组合，少用继承”。

五、Css常见问题

1、Css编码风格。现在有工具可以对CSS样式文件进行压缩和格式化，所以选择是单行还是多行，符合个人习惯就好，最终压缩上线即可。
2、Css编码风格。现在有工具可以对CSS样式文件进行压缩和格式化，所以选择是单行还是多行，符合个人习惯就好，最终压缩上线即可。
3、Id和Calss选择？建议尽量少用Id，多用Class。
4、Css Hack。恰好我上一篇就是整理的这部分内容，可参考《web页面Css Hack 整理》。
5、Css Sprite。可翻看之前在Web标准化交流会讲过这方面的内容，可参考《Web标准化交流会–Css Sprites应用之我见》。使用Css Sprite排列，要尽量使图片紧凑合理，同时要保证不会影响页面的正常显示和扩展性。
6、Inline-block。关于Inline-block我只说几点：
1)、Inline-block只能对行内元素设置，且在Ie6/7下无效。但Ie6/7下可以使用是因为触发了hasLayout；
2)、Ie6/7下有在表现上垂直对齐有问题，需要用hack来解决(*vertical-align:-10px;)；
3)、一些特殊标签默认就具有Inline-block的属性，比如Img和Button；
4)、设置了position:absolute和float会使标签的display自动设置为Inline-block，而position:relative则不会。
7、hasLayout与Zoom。hasLayout是Ie浏览器专有的一个属性，用于Css的解析引擎。既然是专有，那就也有些专有的问题，很多时候在Ie浏览器下会产品诡异的bug，而其他高级浏览器则正常解析，这就与hasLayout没有被触发有关，所以我们要触发hasLayout，这就要用到一个很好的神器--Zoom。Zoom从何而来，感兴趣的朋友可以搜索下。当你设置zoom:1后，在Ie浏览器下就基本会触发hasLayout，而从使页面能正常解析。但阿当在书中讲到：“‘zoom:1’并不是一定可以触发hasLayout的，在极少数特殊情况下，例如在非常复杂的Css设置，特别是使用DHTML的时候，使用‘zoom:1’也会无效。”这个没有提到具体实例，所以只能更进一步验证了，不过他提到了一个更牛逼的方法，使用“position:relative”来触发hasLayout，这个方法我之前也用过，确实可以；不过使用定位后对页面也有弊端，这个你要懂得。
8、水平居中和垂直居中。这里我想讲的是一个很常用的标签，可以用来处理未知宽度容器的水平居中，这就是Table。设置table {margin-left:auto;margin-right:auto;}，不必定宽，你试试在浏览器的显示效果~~不过也许是我才疏学浅。。。

还有些没有整理完，后继再补上吧，而且干巴巴的没有实例，看着也很费劲，希望以后可以改进。由于自己愚钝，有理解或书写错误的，还请朋友们海涵并指正！！

web页面Css Hack 整理

iqianduan — Thu, 01 Sep 2011 02:29:46 +0800

突然想整理css hack，是因为最近几乎天天都能用到这些东西。。。

一件很无奈的事情，就是你天天要和各种浏览器较真儿，纠结于各种浏览器下页面的各种间距是否一致等让人抓狂的兼容问题。。。我承让这种严谨的作风很好，能给用户有一致的体验，但我想知道的是用户真正最关系的是否是这些？？

作为一名页面开发者，你首先要保证你输出的页面高保真的还原与设计稿，并在个浏览器下兼容；然后能更好的方便后台同学来进行页面数据处理；最后就是性能优化。这些似乎都与css hack无关，但当你面对各个浏览器千差万别的解析，同样的代码展现出不同效果时，你有抓狂的感觉吗？但抓狂归抓狂，活还是你的，你得hold住！这时候，你会想起css hack吗？？

接下来我就工作中经常遇到的css hack统一整理，以备不时之需。具体如下：

一、css属性hack

.select {
color:#fff;
color:#ff0\9; /* ALL IE */
color:#f00\0; /* IE8-9 */
*color:#000; /* IE6-7 */
+color:#00f; /* IE7 */
_color:#0ff; /* IE6 */
}

二、css选择器hack

/* IE6 And IE6- */
* html .select {color:#f00;}
/* IE7 */
*+ html .select {color:#f00;}
/* IE7, FF, Saf, Opera */
html>body .select {color:#f00;}

三、css私有hack

/* IE */
.select {zoom:1;}
/* Firefox */
@-moz-document url-prefix(){
.select {color:#f00;}
}
/* Webkit And Opera */
@media all and (min-width: 0px){
.select {color:#f00;}
}
/* Webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){
.select {color:#f00;}
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.select {color:#f00;}
}

四、css样式文件的注释

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--[if IE6]>
<link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE7]>
<link rel="stylesheet" href="ie7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE8]>
<link rel="stylesheet" href="ie8.css" type="text/css" media="screen" />
<![endif]-->
<!--[if IE9]>
<link rel="stylesheet" href="ie9.css" type="text/css" media="screen" />
<![endif]-->

以上内容大部分都是在工作中会经常遇到也是经常用到的。在整理过程中，看到网上有朋友整理的相当详细，甚至连Firefox、Opera的内核浏览器的不同版本的私有属性都整理到了，非常佩服。但个人觉得还是本着可靠、实用的原则，而不是只求大而全。如果有哪位朋友发现有疏漏或者有不当的地方，欢迎您交流与指正！！

接下来有时间的话，我会整理相关的实例出来，以求验证并供朋友们参考。

网站终于又活过来了。。。

iqianduan — Wed, 03 Aug 2011 21:37:55 +0800

经历的5个多月的磨难，沉寂的网站终于复活。虽荒草遍地、罕无人迹，但该折腾还得折腾，就先从这儿开始吧。。。套句顺词儿：After all，Tomorrow is another day！！

2011-07-25

iqianduan — Mon, 25 Jul 2011 07:25:47 +0800

继续沉默。。。

JavaScript学习之运算符

hzhjun — Thu, 03 Mar 2011 17:04:32 +0800

我承认我又懒了很久。。。年过完了，工作也在不紧不慢的进行着，然而大概又一个月没更新了。年初定下的计划有很多，这一年注定要忙碌，但愿也能点收获。。。

这几天抽时间又看起了JavaScript，一如既往的又是从头看起，已经不知道这样往返的折腾了多少次。就当是打基础吧，接下来得大踏步的走了。今天在看JavaScript 运算符的时候，看到那么多不同类型就感觉眼晕，最主要的是要死记各类运算符的优先顺序是件很奔溃的事情。于是在网上搜了下并整理出来以备不时之用。

什么是运算符？

运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。例如：2+3,其操作数是2和3，而运算符则是“＋”。----摘自百度百科

JavaScript 运算符分类

操作符分类	操作符	描述
算术操作符	+	(加法) 将两个数相加。
	++	(自增) 将表示数值的变量加一(可以返回新值或旧值)。
	-	(求相反数，减法) 作为求相反数操作符时返回参数的相反数。作为二进制操作符时，将两个数相减。
	–	(自减) 将表示数值的变量减一(可以返回新值或旧值)。
	*	(乘法) 将两个数相乘。
	/	(除法) 将两个数相除。
	%	(求余) 求两个数相除的余数。
字符串操作符	+	(字符串加法) 连接两个字符串。
字符串操作符	+=	连接两个字符串，并将结果赋给第一个字符串。
逻辑操作符	&&	(逻辑与) 如果两个操作数都是真的话则返回真。否则返回假。
	\|\|	(逻辑或) 如果两个操作数都是假的话则返回假。否则返回真。
	!	(逻辑非) 如果其单一操作数为真，则返回假。否则返回真。
位操作符	&	(按位与) 如果两个操作数对应位都是 1 的话则在该位返回 1。
	^	(按位异或) 如果两个操作数对应位只有一个 1 的话则在该位返回 1。
	\|	(按位或) 如果两个操作数对应位都是 0 的话则在该位返回 0。
	~	(求反) 反转操作数的每一位。
	<<	(左移) 将第一操作数的二进制形式的每一位向左移位，所移位的数目由第二操作数指定。右面的空位补零。
	>>	(算术右移) 将第一操作数的二进制形式的每一位向右移位，所移位的数目由第二操作数指定。忽略被移出的位。
	>>>	(逻辑右移) 将第一操作数的二进制形式的每一位向右移位，所移位的数目由第二操作数指定。忽略被移出的位，左面的空位补零。
赋值操作符	=	将第二操作数的值赋给第一操作数。
	+=	将两个数相加，并将和赋给第一个数。
	-=	将两个数相减，并将差赋给第一个数。
	*=	将两个数相乘，并将积赋给第一个数。
	/=	将两个数相除，并将商赋给第一个数。
	%=	计算两个数相除的余数，并将余数赋给第一个数。
	&=	执行按位与，并将结果赋给第一个操作数。
	^=	执行按位异或，并将结果赋给第一个操作数。
	\|=	执行按位或，并将结果赋给第一个操作数。
	<<=	执行左移，并将结果赋给第一个操作数。
	>>=	执行算术右移，并将结果赋给第一个操作数。
	>>>=	执行逻辑右移，并将结果赋给第一个操作数。
比较操作符	==	如果操作数相等的话则返回真。
	!=	如果操作数不相等的话则返回真。
	>	如果左操作数大于右操作数的话则返回真。
	>=	如果左操作数大于等于右操作数的话则返回真。
	<	如果左操作数小于右操作数的话则返回真。
	<=	如果左操作数小于等于右操作数的话则返回真。
特殊操作符	?:	执行一个简单的“if…else”语句。
	,	计算两个表达式，返回第二个表达式的值。
	delete	允许你删除一个对象的属性或数组中指定的元素。
	new	允许你创建一个用户自定义对象类型或内建对象类型的实例。
	this	可用于引用当前对象的关键字。
	typeof	返回一个字符串，表明未计算的操作数的类型。
	void	该操作符指定了要计算一个表达式但不返回值。

JavaScript 运算符优先级

(优先级由高到低，相同优先级按照从左到右执行)

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
\|	按位或
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

以上部分内容来自网络，如有朋友使用，请将原作者一并谢之。

写在新年前的话

iqianduan — Mon, 31 Jan 2011 23:58:56 +0800

首先还是压抑不住此时鸡冻的心情：就在刚才，俺幸运的买到了返程的火车票，回京有着落了。。。

本来想在迈进2011的时候写个总结的，但却迟迟不得下手，个中理由很多，最主要的原因还是觉得这个2010年收获寥寥，没有达到自己的既定目标。不过不管咋样，还是写写，给自己的2010一个交代。

回想这一年，变化最大的可能就是工作。本来没有打算要换工作的，但有个合适的契机，又是自己很喜欢的公司，就心动了。接下来就是一轮轮的面试和等待，终于等到了那一天。过的很快，转眼半年的时间就这样过去了。新的团队，新的环境都已适应，工作也在继续着，。记得在部门进行新人秀的时候，让每个人写下自己的心情。我当时这么说：“2010是个转折年，2011则是奋斗年，希望自己能够付出更多，收获更多。”的确，过去的几个月还是太短，接下来的一年，需要更加给力，工作上给自己个交代。

2010年，值得表扬的是，和在京的初中同学联系的更紧密了，其中还有两次聚会。虽然大家都是很多年没有见面，彼此变化很大，但之前的那种感情还在，聊起来还是很HIGH，关于学校、关于老师、关于同学总有说不完的话题。。。现在在一起住有高中和大学的哥们，也算不寂寞，经常性的FB生活，使自己体重指数直线上升，这个问题已经很严重了，一定得制止。在2011里，一定将体重控制在中等水平并保持下去，否则要加入胖男一族啦。天气暖和后，运动要加强，我也要复出了。每周一场的足球不能少，虽然去年诳了几次一起踢球的哥们，不知道今年他还带不带我玩。更可气的是，有个小子竟然转会深圳，强烈地BS下他，以后不带他玩了，再回来也只能给我们做小弟当替补。。。

其他朋友联系的还是少，连几个嗜酒的家伙都没怎么聚几次，虽然大家每次的主题还是喝酒，但已经大不如从前。而且都一个个有家事、有2.0的人了，只是我还形单影只，惭愧呐。。。

说到另一半，这真是个问题。不是自己有什么条件，只是觉得这件事情勉强不来，也不想为了一时的勉强而让一辈子来承受。我始终相信还是能碰到我要找的那个人。虽然之前几年的时间换来的是一个无言的再见，但过去的总是美好的,无需后悔。分开了，只能说明一个简单的道理：还是不够爱。接下来，还需要耐心的寻找，遇到了就不要错过，希望能够在这个世纪光棍节的那一天，结束自己的光棍生涯。。。

说到父母、家人，自己还是亏欠太多。让他们为我操心，这就是最大的不孝，只能自己尽力的去弥补，让他们放心。其实父母的真的不希望子女能为他们做什么，只是在你想到他们的时候，多个电话就好了。从小到现在，我受家的影响很大，很多事情的决定，都有考虑到家的因素，而我也始终把家庭、亲情放在第一位，现在是，未来也如此。

。。。

还有很多话想说，时间不允许了。一会就要踏上回家的列车，这或许也是给父母、家人最好的礼物。接下来的几天，可能很少上网，终于能过几天与网隔绝的日子，但我的心里不会忘记这里，不会忘记来这里的每一位朋友。

在此，提前祝朋友们及家人新年快乐！在新的一年里，好运源源！好事连连！！

2011年1月1日

iqianduan — Sat, 01 Jan 2011 00:00:23 +0800

新年快乐！！