Category Archives: 手记

Unicode签名BOM引发的事故

Posted on 十二月 31, 2008 by 花匠

做前端开发的同学大概都遇到过这样的问题，IE下平白无故的空出一行，而Firefox下是正常的，你怎么查也查不出是什么原因导致的，因为根本看不出哪里有问题。可能你这里用了包含(include)文件，通常header和footer会这么做。打开被包含文件发现页面属性中“包括Unicode签名BOM”这一项是勾选的，那么我告诉你就是这个BOM引发的事故。今天我在写一个JS脚本的时候又出现了BOM事故。我在页面中插入一个外部JS，然后里面有这样一句话$.getJSON(“/my/newmsg”,function(data){alert(data);});其它浏览器都能正常的弹出内容，唯独IE下没动静，我郁闷了近一个小时，我怀疑这句话写错了怀疑JSON数据格式错了怀疑我人品有问题… 后来我怀疑编码不对，于是就看到了可恶的BOM打了勾，把它一去掉神迹就从乌云底下冒了出来。虽然我懒惰很少更新博客，但不得不上来记录一下这个事，因为真是太意外了，JS也会因为BOM引发事故 – -| Unicode规范中有一个BOM的概念。 BOM是Byte Order Mark的简写，就是字节序标记，这个东西在普通文本编辑器下是看不到的，可以说它是文件头吗？在二进制编辑器下才可以看到？可能是这样。在UCS 编码中有一个叫做”ZERO WIDTH NO-BREAK SPACE”的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符”ZERO WIDTH NO-BREAK SPACE”。这样如果接收者收到FEFF，就表明这个字节流是Big-Endian的；如果收到FFFE，就表明这个字节流是Little- Endian的。因此字符”ZERO WIDTH NO-BREAK SPACE”又被称作BOM。 UTF-8不需要BOM来表明字节顺序，但可以用BOM来表明编码方式。字符”ZERO WIDTH NO-BREAK SPACE”的UTF-8编码是EF BB BF。所以如果接收者收到以EF BB BF开头的字节流，就知道这是UTF-8编码了。Windows就是使用BOM来标记文本文件的编码方式的。

Posted in 开发, 手记 | Tagged css, js | 6 Comments

投票统计图/进度条

Posted on 十二月 3, 2008 by 花匠

做投票统计图，我想到的第一个办法是直接写入图片width值百分比，这是大家最熟悉的，以前都这样做。为了更方便满足需求，后来我统一用了一张空的透明的gif，然后定义图片不同背景background(图片也可以定义背景，甚至背景图，如果背景透明的话) 再后来需求又有升级，设计图进一步美化，已经不能通过拉伸图片来达到效果了，就像上图一样，怎么办？我想了想，然后直接把结构写成了这样： <ul id="progress"> <li>项目1：70%</li> <li>项目2：50%</li> <li>项目3：0%</li> <li>更多项目n：10%</li> </ul> 先别看演示，想想这个结构怎么实现图上的效果。其实这里如果使用表格也算比较合理的，当然项目名要用th 话外小经验：一个优秀的前端开发工程师，任何时候都得想着把表现层放到CSS里，尽量语义化(x)html结构，能少用一个标签就不多用一个标签。 display的参数inline-block(线性块状物，就是不换行也可以定义高宽的盒子，像img一样)其实很好用，挺爽的。 IE下网页编码的不同会造成灵异事件 IE下li的行间距多出几个象素，margin设不成0，解决办法加vertical-align或float

Posted in 开发, 手记 | Tagged css | 3 Comments

jQuery头像裁剪 Image Cropper

Posted on 十月 29, 2008 by 花匠

最近工作又开忙了，今天要整一个头像裁剪脚本，想了想还是想到了亲爱的jQuery。做完后发现在移动的时候清晰图有一点点抖，不过不碍事。这是一个基于jQuery UI的图像裁剪前端脚本。利用Draggable和Resizable两个插件让虚线框可移动可缩放，并且设置相关参数移动界限、初始大小和位置、等比缩放、事件。给大图加CSS透明度，于是它就灰了。虚线框内清晰图其实就是CSS背景background。以大图左上角为原点，计算出虚线框左上角的坐标offset（就叫坐标吧- -|）。虚线框的坐标值跟背景图position值刚好相反。当移动或缩放时计算一下，然后改变背景图的位置position，这样效果就出来了。再说下预览图，首先预览图跟实际图是不一样大的，它们之间存在一个比率n（所设预览图大小除实际图大小）。前面已经计算过虚线框的坐标了，预览图的scrollTop和scrollLeft乘比率n刚好跟这个坐标值相等，当移动或缩放时计算一下，然后改变预览图的位置scrollTop和scrollLeft，这样效果就出来了。当移动完或缩放完时顺便将虚线框的坐标和宽高记录到隐藏域传给后台程序，剩下工作归后台技术了。有问题或建议可以给我留言查看演示 Image Cropper

Posted in 开发, 手记 | Tagged jQuery | 11 Comments

图片比文字抢眼

Posted on 十月 24, 2008 by 花匠

我看到挺多这样的排版结构，标题在上，图片在下。其说法是，让人第一眼看到标题。这种想法没错，正常的视线是从上到下从左到右，但是这种情况只是我们的理想状态，整个页面比较平缓，不存在跳跃的时候。往往页面中都会存在视觉焦点，那么视线就会产生跳跃，比如这里的图文混排，首先引起人们注意的会是那张漂亮的图而不是标题，假如要看标题，视线就要反常规的往上移，用户就会产生下意识的不愿意。严重一点的说，那个标题就成为了视觉盲点，而与我们的初衷“让人第一眼看到标题”恰恰相反了。我在新项目中，把这种结构稍稍的作些调整，图片在左标题在右。当图片这个焦点抢占了你的视线，那么看完这张图的下一步你会干嘛？我也不知道要干嘛，但是我的视线会习惯性的向右向下。我们没办法让用户第一眼看到标题，但是第二眼总算占上了。图片比文字抢眼，我想大家在浏览新闻门户时总会有这样的体会，拖动滚动条走马观花一遍，忽然有张图吸引了你，然后你寻找那张图的标题看看到底是什么，有兴趣，点击图片看详细。图文混排时，图片必须加链接。

Posted in 交互, 手记 | 2 Comments

CSS公用文件

Posted on 十月 16, 2008 by 花匠

由于各浏览器的默认CSS样式不一样，我们必须写一个CSS Reset统一起来。通常我的做法是在common.css里写全局控制，这里面也包括header和footer，其它CSS文件就通过@import url(“common.css”);引用。 body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Arial;} form,ul,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;list-style:none;} input,textarea,select,button{font-size:12px;} img{border:none;} address,cite,small{color:#999;font-style:normal;font-size:12px;} a{color:#09c;text-decoration:none;} a:hover{text-decoration:underline;} #header{…} #footer{…} 欺骗性广告最近老是收到来自WHOIS-A.CN的邮件，标题为“域名WHOIS信息正确性提醒:www.xij.cn”，这垃圾邮件我想大概骗倒了好多人 – -| 尊敬的用户：根据ICANN的规定，注册人必须保持域名信息正确完整。请您注意及时更新域名的注册信息。请登录 WWW.WHOIS-A.CN 检查您的域名whois信息是否正确