分类：写写代码

连续赋值与求值顺序
看到一个2010 年的帖子^[1]，里面讨论了一段 JavaScript 代码：
```
var a = {n:1};
a.x = a = {n:2};  
alert(a.x);     // --> undefined 
```
帖子里有很多的讨论来分析为何 a.x 是 undefined，下面是我的一些思考。

首先，在JavaScript中，有以下几点需要明确的：
1. 可以说一切都是对象
2. 赋值运算符（=）是除逗号运算符（,)外优先级最低的，并且是右结合的。^[2]
3. 求值顺序^[3]是从左向右的^[4]。
（更多…）
2012/01/13
纯 CSS3 绘制 K-ON! 秋山澪

只能说佩服了。

References:
Pure CSS3 Design Akiyama Mio

2011/12/21
解决IE6点击链接无法跳转
出于减少空链接的目的，对于非实际链接而是触发 JS 效果的 a 标签，我一般都是使用 “javascript:;” 来设其 href 值而不是 “#”，然而最近碰上在 IE6 下这种情况无法跳转页面的情况：比如说，对于一个 href 为 “javascript:;” 的 a 链接，绑定点击时通过设置 window.location.href 来进行页面跳转，但在 IE6 下会无法进行跳转。实际上代码没有出错，location 后面的语句也可以执行的。

解决方法有二：
1. 点击处理函数增加阻止默认事件
2. reset href
对于 IE6，阻止默认事件可以简单使用 if (window.event) window.event.returnValue = false

至于 reset href，则是将触发事件的链接改为 ‘#’，然后再调整；或者直接将其 href 值改为需要的目标地址。

Demo （更多…）
2011/10/30
src与onload

（更多…）

2011/10/09
input file 在不同浏览器中的呈现

文件选择（input type=”file”）是一个常用的元素（虽然我比较少用），在浏览器中的表现是没有完全一致的。以下是其在 IE/Firefox/Chrome/Opera 四种浏览器中的一些异同（Safari 和 Chrome 同是基于 Webkit，故不再详说）。

对于文件选择元素，可以分为2部分，一部分是按钮，一部分是文字展示，如图1：

下面图2～图5是4个浏览器对于3个不同状态下的文件选择元素的呈现：

其中：第一个是默认状态下选择了一个文件；第二个是设定了 300px 的宽度；第三个设定了 50px 的宽度；

（更多…）

2011/10/04

鼠标滚轮缩放图片

浏览网页的时候，有时候图片局限于网站而很小，即便原来是一张大图。为了偷懒不想新标签页打开图片，于是写了个小小的 bookmarklet 来直接在图片上通过鼠标滚轮来进行缩放。

javascript:(function(){var imgs=document.getElementsByTagName('img');var rate=rate||0.1;for(var j=0,l=imgs.length;j<l;j++){(function(i){var item=imgs[i];item.onmousewheel=function(e){e=e||window.event;zoom(imgs[i],mouseWheelRes(e),rate);};if(item.addEventListener){item.addEventListener('DOMMouseScroll',function(e){zoom(imgs[i],mouseWheelRes(e),-rate);},false);}})(j);}function zoom(img,inOut,rate){if(inOut>0){img.width=img.width*(1+rate);img.height=img.height*(1+rate);}else{img.width=img.width*(1-rate);img.height=img.height*(1-rate);}}function mouseWheelRes(e){e.preventDefault?e.preventDefault():e.returnValue=false;e.stopPropagation?e.stopPropagation():e.cancelBubble=true;return e.wheelDelta||e.detail;}})();

可读性良好一些的代码如下：
（更多…）

2011/10/01

适时打破单入口单出口
断断续续看书学习中，今天看的一段还是很有感触的。

遵循单入口单出口的原则，在面对分支的时候时常会写出层层嵌套的代码（我就写过好多嵌套的，鄙视一下自己）
```
double getPayAmount(){
    double result;
    if (_isDead) result = deadAmount();
    else {
        if (_isSeparated) result = separatedAmount();
        else {
            if (_isRetried) result = retiredAmount();
            else result = normalPayAmount();
        }        
    }
    return result;
}
```
不再固守单入口单出口的原则，提前通知函数返回，看起来代码逻辑更清晰了。

（更多…）
2011/09/26
IE6块元素高度问题

在 IE6 中 block 空元素高度无法直接通过 height 设为0，具体和字体大小、行距有关，一个简单的解决方法是设置 oveflow 为 hidden。

Reference:

CSS设置IE6中容器高度BUG

2011/08/23
min-height
没太多好说的，只是为了 IE6 而已。
```
min-height:150px;
_height:150px; /* hack for ie6 */
```
demo
2011/08/09
jQuery tmpl
动态请求数据来更新页面是现在非常常用的方法，比如博客评论的分页动态加载，微博的滚动加载和定时请求加载等。

这些情况下，动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML，总之不在浏览器端拼数据就在服务器端拼数据。不过，从传输量方面来看，返回 HTML 不划算，而在 web 传输方面，现在更多的是使用 JSON 而不是 XML。

浏览器端根据 JSON 生成 HTML 有个很苦恼的地方就是，结构不复杂的时候还好，结构一复杂，就想死了，需要很小心很小心地写出几乎无法维护的 JavaScript 代码。

如同为解决 PHP 拼数据这方面的问题而有了 Smarty 这些模版，JavaScript 也可以利用模版来解决这些问题，比如基于 jQuery 的 jquery.tmpl，现在已经被接受为官方的模版插件了。详细的 API 在 jQuery 的 Templates 里，内置的 demo 也尽情地演示了各种用法。

就我自己的几次使用，感觉很不错，用更加直观方面的 HTML 写法而不是 JavaScript 拼凑来写结构，然后用 JSON 变量来占位的方式来填充数据，代码看起来好多了。

Update

需要说明的是，由于我相对熟悉的是 PHP，尽管是使用 $作为变量开始符号，但与 tmpl 的$ {} 标识没有冲突；而 JSP 本身使用 ${} 来作为变量内容输出，所以在 JSP 会导致模版无法正常工作，这里是一些相关问答。

解决方法：
1. 禁用（本项目） JSP 的 ${} 标签功能，方法见相关问答；但明显代价太大。
2. 对 tmpl 中的 ${} 进行转义，即使用 \${}的方式；这样将静态 demo 转为开发版本需要细心更正一下。
3. 不想用模版的就依然手动拼字符串；仍想用模版的就切换到别的不是使用 ${} 来解析的模版。
2011/08/07

分类： 写写代码

分类：写写代码