基于宽度的布局

---

今天有一篇关于 CSS/Javascript 的文章在流传，标题是：基于宽度的布局。其理念是根据浏览器窗口的宽度自动调整页面的宽度。文章中附带了一段 38 行的 Javascript 代码（我已经尽可能简洁了）来实现这个功能。我将省去对他们代码的分解，直接展示下面改进后的代码。

$(window).resize(setWidth);
$(document).ready(setWidth);

function setWidth() {
  var de = document.documentElement;
  var w = (window.innerWidth || (de && de.clientWidth)
    || document.body.clientWidth) < 990 ?"alt":"main";
  $("#wrapper").addClass( w + "wrapper" );
}

这个新代码的演示页面可以 在这里 找到。讽刺的是，他们使用了 我编写的一段代码，但没有署名。

上面代码我最喜欢的部分无疑是我使用的短路操作。该部分的原始代码来自 这篇文章。我不知道为什么，但每当我看到一个包含多个赋值的 IF 语句时，我就会感到浑身不适。所以，下面的代码

if (window.innerWidth)
{
	theWidth = window.innerWidth
}
else if (document.documentElement 
  && document.documentElement.clientWidth)
{
	theWidth = document.documentElement.clientWidth
}
else if (document.body)
{
	theWidth = document.body.clientWidth
}

被修改成

var de = document.documentElement;
var w = window.innerWidth || (de && de.clientWidth)
  || document.body.clientWidth;

如果你好奇为什么这样行得通，可以尝试运行以下语句

alert(1||0); // You get 1
alert(0||2); // You get 2
alert(0||(2&&1)); // You get 1
alert(0||(3&&4)||2); // You get 4

你将对这段（曾经很冗长）代码中实际发生的事情有更清晰的认识。