L.Rain's Blog™

网易(北京)前端开发工程师

职位描述：
1、熟悉W3C标准，能熟练运用XHTML、CSS进行合理的网页制作，熟悉常用浏览器，利用自己的经验有效地解决浏览器兼容问题；
2、熟悉JavaScript语言，能进行常规WEB应用的开发；
3、对交互体验、可用性、用户体验有一定程度的理解；
4、有良好的责任心和团队合作能力，能承受较大的压力；
5、具备良好的学习能力，能脚踏实地做事；
6、严格遵守团队的代码格式、结构的规定，编写易读、易维护、高质量、高效率的代码；
7、javascript开发经验优秀者优先考虑；

工作职责：
1、与产品保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作；
2、能很好的将美术设计的效果图实现成HTML页面；
3、熟练使用Javascript准确地进行代码构建，实现产品所需的动画效果以及交互效果；
4、了解服务器端的技术实施规则，能很好的和后台工程师实现数据互通；

使用Trident内核的浏览器：IE、Maxthon、TT、The World等；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。

使用Webkit和Trident双核心浏览器：Maxthon3.x,QQ浏览器5，搜狗浏览器2.x,

检测浏览器方法：

var ua = navigator.userAgent.toLowerCase();

_$IE = /msie/.test(ua);

_$OPERA = /opera/.test(ua);

_$MOZ = /gecko/.test(ua);

_$IE6 = /msie 6/.test(ua);

_$IE7 = /msie 7/.test(ua);

_$IE8 = /msie 8/.test(ua);

_$SAFARI = /safari/.test(ua);

风花树

常用工具以下工具均来自互联网，整理的目的是为了方便在线调试使用和阅读。版权归作者所有
» CSS3.0 中文在线参考手册 | CSS3 Generator
» Cubee Guide(与jayli整理)
» CSS压缩工具 – CSS Compressor
» JS格式还原 – jsbeautifier
» JS语法校验 – jslint
» JS压缩工具 – jsmin
» 正则表达式 – regexpal

————–

常用拉丁字符、符号的unicode编码

虽然字体的CSS规则名称叫font-family, 但它的实质是一个font set，而不等是印刷意义上的font family，印刷上的font family 是指一系列相同字样的不同强度组合。
很多人对字体的概念还是停留在 font-family: “宋体”, Arial, Helvetica, serif 的阶段，却不明白为什么这样设置，这样设置是否合理等等。作为一个合格的前端工程师我们必须了解字体的一些究竟。
W3C提出了font set 的概念将一系列近似的字体按照优先级顺序组成一个列表；浏览器从列表头部开始匹配，直到找到第一个可用的字体，并使用该字体进行显示。但是可能存在一台电脑，上面没有我们所设置的字体，那么它仍然无法正确显示上面的这段文字，于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统，导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”，也就是我们经常看见的 serif 和 sans-serif。我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下，浏览器指定的一种最终的代用字体”。 请注意两点，首先，通用字体族具体对应哪个字体，是由浏览器决定的，其次，通用字体族只是一种在font set中其他字体都无效时的代用方案。因此设计者应该尽可能的给出齐全的font set，以尽可能的覆盖所有的系统，而不应该依赖于通用字体族。
类似于以下的两种写法都是错误的：
LRain
它相当于根本没有指定字体，仍旧是交由浏览器选择字体，写了相当于没写。
LRain
你应该务必使通用字体处在font set中的最后一位。

下面介绍下serif 和 sans-serif：
一：Serif 在印刷学上指衬线字体。事实上，只要满足末端加强原则的字体都是衬线字体。所谓的末端加强，就是使用衬线或粗细变化，使字体笔画的末端得到加强，以改善小号文字的可读性。因为衬线字体的可读性非常好，所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。

比较常见的衬线字体有 Georgia, Garamond, Times New Roman, 中文的宋体等等。
纽约时报：http://www.nytimes.com/
font-family：georgia,”times new roman”,times,serif
二：sans-serif
衬线字体以外的一切字体都是无衬线字体，它的意思是“没有”。所以sans-serif就是无衬线字体。
无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。

常见的无衬线字体有Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

测试：不写通用字体族在FireFox下默认使用的是sans-serif所设置字体。
不写通用字体族在Safari、Opera下默认使用的是普通字体。通用字体族serif和sans-serif都对应的是普通字体。
解决方案：如果你希望保证中文的显示效果，那么你必须把你想要显示的中文字体放在 family-font 定义的第一位，这样做的缺点也是显而易见的，一般中文字体中都会包含英文字符，而中文字体中的英文字符，通常都不怎么好看。

但不知道因为什么原因，IE 和 Opera 在第一个没搜索到相应的字体时，都没有顺序搜索下一个字体，甚至也没有搜索后面的sans-serif，而是直接跳到系统默认字体了，Win下都是宋体。
对比：
印刷业为了节约成本，因此会尽可能的在保证可读的情况下，把文字印小。显示器不存在这样的成本，因此可以显示比较大的文字。在文字足够大的情况下，无衬线字体也是同样可读的。而且因为无衬线字体通常有艺术性，因此在显示器上显示通常比较赏心悦目；而且无衬线字体种类比衬线字体多得多，因此选择余地也很大。所以大家尽可以放心去使用。但是必须保证以下原则：如果你要使用无衬线字体显示网页的正文内容，那么，你必须把它的font-size设的足够大，以保证用户能轻易阅读。对于11px以下的英文字体，推荐使用衬线字体。至于中文，因为显示器的硬件限制，不论是什么字体，都不推荐使用11px以下的font-size来显示，同样大小的衬线字体比无衬线字体容易阅读，衬线字体的可读性其实仅仅体现在小字体上。

此外CSS还允许以下几个通用字体族：
monospace 等宽字体：所谓的等宽字体，是指每个字符宽度都一致的字体。一个著名的例子就是 Courier New 字体。因为字符宽度一致，所以特别容易对齐，能快速精确的定位到某行某列，因此经常用来显示代码。一个等宽字体同时也可以是一个衬线（或者非衬线）字体。比如 Courier New 这个字体也可以看作是一个serif。
cursive 书写体：相当于印刷学中的手写体。中文的华文行草就是这样的一个字体。
fantasy 梦幻体：相当于印刷学中的装饰体。非常少见的一种字体，基本没有参考价值。

body {font-family: “宋体”, sans-serif; }
这个写法可能的缺点在于：
1. 宋体在Safari和Vista的IE 7下，看起来很难看。（我稍后把截图补上）
2. 宋体的英文字很难看。
3. 如果在CSS里写中文，你得小心你HTML和CSS的编码是否一致。

body {font-family: SimSun,sans-serif; }替代，但是Opera不支持SimSun，所以需要用unicode表示
body { font-family:\5b8b\4f53,sans-serif; } 这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持

常用西文字体介绍：
一：

Tahoma是我很多设计师比较喜欢的一种非衬线字体。首先几乎所有的系统都默认安装了这个字体，所以不会存在兼容性问题，其次，这个字体也比较均衡，显示段落也不错。
目前使用的是腾讯微薄：

效果图：

Tahoma的bug：http://www.mikkolee.com/118
二：

Verdana太宽了，不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。几乎所有的系统也都会默认安装这个字体。
目前使用的是网易邮箱：

效果图：

在Input表单输入英文用户名使用该字体还是很有优势的，不那么紧密，每个字母让人一目了然，防止出错。
三：

Windows 操作系统的默认sans-serif 字体。
目前使用的是新浪微薄：

四：

以前网易微薄使用：

字体的别名：
宋体的正式名称是SimSon，而“宋体”只是它的别名。
什么时候在字体名称前面加引号：
不加引号的时候，浏览器对于字体名称中空白字符的解释应该和XML中一样，即忽略字体名称左右的空白字符，并且单词中间的空白字符被解释为一个空格。比如 font-family: Times New Roman , serif; 会被解释成 font-family: Times New Roman, serif;
加引号的时候，浏览器必须保留引号内所有的空白字符。如果写成 font-family: “Times New Roman”; 那么浏览器不会显示 Times New Roman 字体，而是搜索一个叫做“Times New Roman”的字体。

最后，我的推荐是：
body { font-family: Arial,sans-serif，\5b8b\4f53; }
input { font-family: Verdana,sans-serif; }

    杯具的事情终于第一次发生了，也希望是最后一次，所有的数据回退到4月份而且一些后台功能损坏，并且只给我留了2篇博文，还好老罗转了几篇去UED，可以从那里找回几篇。其他的只能通过网页快照慢慢找然后再调格式，太折腾人了。以后要做好备份工作！

  今天下午在听歌的时候无意听到Tom Baxter的一首,歌词的旋律不由自主的把我带到<非诚勿扰>中北海道绿油油的菜油地 ，夕阳西下 黄昏的阳光有点刺眼，她穿着长裙在翩翩起舞，这是很美的一副画面。北海道是一个约定，蜜月目的地之一，是我一直向往的地方，干净迷人，人口稀少，宁静，没有喧嚣，是人和大自然的结合，我相信我会带上相机去记录这一刻，配上这段背景音乐，最后完成一张属于我自己的纪录片，做为一份礼物送给我们的那一刻。一个一晃而过的想法，我想我会去努力实现它。(writed by 10/06/22)
SongTaste播放地址

目前比较常见的排行榜设计都习惯将靠前的TOP3与其他七项有所区别，主要是序号的背景或者文字的颜色有所区别，
如图
这种排行榜实现按以前的思维，习惯在for循环输出对大于0小于3的输出一种格式，其他几项采用另外一种格式，代码如下：
<ul>
#set($list=$tag.getList(“topicid=00853R2J;listnum=10;titlelength=20;pointstart=60;pointend=80;”))
#if ($list)
#foreach ($one in $list)
#set ($til=${tools.replaceAll([标题],”\””,”＂”)})
#if($velocityCount<4)
  <li class=””hot””><span>$velocityCount</span><a title=””$til”” href=””[链接]””>$til</a></li>
#end
#if($velocityCount>4 && $velocityCount<10)
  <li><span>$velocityCount</span><a title=””$til”” href=””[链接]””>$til</a></li>
#end
#end#end
</ul>
其实单从后台语言输出来看确实觉得优化空间比较小，所以换一个从css的角度进行优化。

我们可以将序号的css背景先整合在一张sprite，用于ul 的背景图，这样根据ul里li的数量增加ul的背景也能相应的显示出来，而且后台输出代码也能简化逻辑，不需要再做逻辑判断只要输出li就可以。代码如下：
<ul>
#set($list=$tag.getList(“topicid=00853R2J;listnum=10;titlelength=20;pointstart=60;pointend=80;”))
#if ($list)
#foreach ($one in $list)
#set ($til=${tools.replaceAll([标题],”\””,”＂”)})
  <li><a title=””$til”” href=””[链接]””>$til</a></li>
#end#end
</ul>
sprite如图所示：

当文档或它的某些元素发生了某些事情时，Web浏览器就会生成一个事件(Event)，如果Javascript应用程序注重特定文档元素的特定类型的事件，它就会为那个元素这种类型的事件注册一个事件句柄，即一个Javascript函数或代码段。
目前有3种完全不同的不兼容的事件处理模型。
1：原始事件模型(0级Dom Api)
2：标准事件模型(2级Dom Api)
3：IE事件模型
一：作为HTML属性的事件句柄
例Code:
<input type=”button” value=”click me” onclick=”alert(‘thx’)” >
<input type=”button” value=”click me” onclick=”typeof(this.onclick)” >
事件句柄属性的值是一个任意的Javascript 代码串。在事件句柄要求多个语句时，可以把这些语句定义在一个函数体内，然后用HTML事件句柄属性调用那个函数，这样处理起来会更加容易。
例Code:

<form action=””index.html””> return语句返回值的写法，有利于在表单比较值钱进行一些有效的数据检验，如果都满足检验条件，validateForm函数会执行返回true，表单就会触发默认submit() 提交事件，但如果false的话，会停止表单提交事件。
通过return false；的方式阻止默认动作的时间句柄包括:onclick,onkeydown,onkeypress,onmousedown,onmouseup,onreset,onsubmit.
二：作为 Javascript 属性的事件句柄
文档中的每个HTML元素在文档树种都有一个相应的DOM元素，Javascript对象的这个属性对应那个HTML元素的属性。
Ps：无论HTML属性采用什么大小写形式(onclick,onClick尽量小写，满足xhtml规范)，Javascript属性必须是全小写(onclick)。
Javascript属性较HTML属性的两点好处：
1:减少了HTML和 Javascript的混合，增强了代码的模块性，使代码更为简洁，也更容易维护。
2：动态的改变注册到HTML元素的时间句柄。
缺点：当文档Javascript没加载完全触发了某些事件，可能因为还未定义不能执行。
例Code:
<input onclick=””alert(‘thx’)”” type=””button”” value=””click” />
对应的Javascript 代码如下：
<input id=””inputNode”” type=””button”” value=””click” />
document.getElementById(“inputNode”).onclick = function() {
  with(document) {
    with(this.form) {
      with(this) {
        alert(‘thx’)
      }
    }
  }
}
重复的with语句构建了一个扩展的作用域链。关于事件句柄作用域的讨论只适用于定义为HTML属性的事件句柄。

document.getElementById(“fm”).onsubmit = function {
  alert(“submit”);
}
document.getElementById(“fm”).onsubmit()这种直接调用事件句柄的方法不是模拟事件发生时的真正状况，也就是说执行该方法不会触发表单的提交，仅仅是执行一个函数而已。
Dom中的高级事件处理（标准模式）
事件传播：
三个阶段：第一捕获(capturing)阶段，事件从Document对象沿着文档树下关下传播给目标节点，下一阶段是发生在目标节点自身，第三阶段是起泡(bubbling)阶段，在这个阶段事件将从目标元素向上传播回document对象的文档层次。，任何事件句柄都可以调用事件的Event对象的stopPropagation()方法(IE:window.event.cancelBubble = true)，停止事件的进一步传播。
相比Javascript 属性的事件句柄的优势:可以给对象同一个类型的事件注册多个处理函数，在该类型的事件在该对象上发生时，被注册的所有函数将都被执行，但不确定执行的顺序。
function addEvent( elem , eventName , handler , useCapture ){
  if( elem.addEventListener ){
    elem.addEventListener( eventName , handler , useCapture );
  }else if( elem.attachEvent ){
    elem.attachEvent( “on” + eventName , handler);
  }else{
    elem[ "on" + eventName] = handler;
  }
}
function removeEvent( elem , eventName , handler , useCapture ){
  if( elem.removeEventListener ){
    elem.removeEventListener( eventName , handler , useCapture );
  }else if( elem.detachEvent ){
    elem.detachEvent( “on” + eventName , handler );
  }else{
    elem[ "on" + eventName] = null;
  }
}

function checkForm(e) {
  e = e || window.event;
  if( e.preventDefault ) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
  if(e.stopPropagation ) {
    e.stopPropagation()
  } else {
    e.cancelBubble = true;
  }
}
addEvent(document.getElementById(“fm”),“submit”,checkForm, false);
综上诉3种事件绑定机制，我比较推荐用第三种标准事件模型来为节点绑定事件句柄,首先它可以为一个节点元素同一个事件绑定多个方法，而且更符合事件代码结构设计， 在Javascript里Event是非常复杂也是非常重要的一部分，还需要花更多的时间去研究其内部机制。
Ps:一种不常见的事件绑定机制
用 进行绑定

用json（可选）和script标签，解决ajax的跨域问题，ajax的XMLHttpRequest因为js的安全问题是不能跨域的
但是可以用src=”http://otherSite.com/a.js”可以跨域所以动态写入一个就OK了.
demo：
var A = document.createElement(“script”) , B = document.getElementsByTagName(“head”)[0];
A.src = “http://comment.sports.163.com/data/sports_nba_bbs/df/5C472DDM00051CA1_1.html”;
A.language = “javascript”;
A.type = “text/javascript”;
A.onload = A.onreadystatechange = function(){
    alert(this.readyState); //onreadystatechange
    alert(“A”);
}

解决浏览器差异： FF:onload ； IE:onreadystatechange。

如果使用了jQuery的话。 跨域问题就更容易解决了。

$.getJSON(
  ”a.php?callback=?”,
  function(data){
    alert(“CallBack Data: ” + data );
  }
);

在此必须要用 callback=? 进行跨域调用，jQuery会返回一个JSONP的返回值代替‘？’，实际上传递给后台脚本的应该是类似‘&callback=jsonp12126279’。所以需要在后台脚本中截获 callback的参数，然后加在原先的JSON前。（可以理解成是一次验证过程）。

同样可以采用这种方式异步加载图片：
var A = document.createElement(“img”) , B = document.getElementsByTagName(“body”)[0];
A.src = “http://img.openv.tv/t/UserFiles/Image/20090612/20090612_1709056640541058.jpg”;
A.onload = A.onreadystatechange = function(){
  alert(this.readyState);
  alert(“A”);
}
B.appendChild(A);