请叫我一米

学习 Javascript 的同学们都知道，在数组字面量中每一个元素后都会根由一个小小的“,”逗号。但是就是这一个小小的逗号，让很多人在各种浏览器兼容的问题上头疼不已。
其实，这里的主要原因，就是数值或者属性/值对最后一个元素后面的逗号问题。而这个逗号主要表现的问题，就是 IE8 及以下浏览器和标准浏览器之间的解析差别。那么我们来看举一个栗子。

例如

var a = [1,2,3,], b = [,,];

像这样的数组生命形式，在标准浏览器中，例如 Chrome 或者火狐，就会将最后一个逗号省略掉，那么当使用

alert(a.length); 或者 alert(b.length);

的时候，就会得到 3 和 2 的结果。因为标准浏览器会忽略最后一个逗号，那么就变为：

a = [1,2,3], b = ["",""];

而在 IE8 及以下浏览器中，其却不忽略最后一个逗号，所以其就会变为：

a = [1,2,3,""], b = ["","",""];

也就是如果用数组的 length 属性 alert 的话，就会得到 4 和 3。

那么对于对象也是一样的。例如：

c = {
    x:5,
    y:6,
    z:9,
}

如果在标准浏览器中，最后一个逗号，也就是数字 9 后面的逗号会被忽略，javascript 代码就会正常运行。

而在 IE8 及以下浏览器中，则由于最后一个逗号的存在，浏览器就会报错，此时 javascript 代码则会停止运行。

所以，在写代码的时候，一定要确保数组或者属性/值对最后一个元素后面没有这个逗号。

当然了，对于有没有逗号，标准是规定的是“应该省略最后一个逗号”，所以这里确切的说是非标准浏览器的问题，而不是 Chrome 或者 火狐，这些标准浏览器的问题了。

主题名称: AirSquare

主题链接: https://yimity.com/2011/12/01/airsquare.html

主题描述:AirSquare. 非常个性化的两栏主题，黄金分割比，左侧背景图片后台点击更换（目前9种，支持自定义），后台选项，包括自定义站点统计，网站自定义使用说明，直接输入 Google+ 或者 Twitter 用户民即可，评论框右侧 125*125 像素的广告，Windows Phone 7 风格支持（Beta），评论错误/正确提示，评论 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。

主题版本: 1.0

主题作者: 一米

网站预览: http://demo.yimity.com/ 预览主题启用 Windows Phone 7 风格

后台预览：请发邮件给我，我给你地址和账号。

发布日期：12月01日。

主题预览：http://demo.yimity.com/

介绍：

AirSquare. 非常个性化的两栏主题，黄金分割比，左侧背景图片后台点击更换（目前9种，支持自定义），后台选项，包括自定义站点统计，网站自定义使用说明，直接输入 Google+ 或者 Twitter 用户民即可，评论框右侧 125*125 像素的广告，Windows Phone 7 风格支持（Beta），评论错误/正确提示，评论 Ajax 支持,SEO 友好，支持自定义菜单，支持IE8以上，及 Chrome，Firefox，Opera等现代浏览器。不需要任何插件支持。即使 JS 加载失败，功能同样正常可用。

安装：

1.将本文件解压，得到 airsquare 文件夹及其内部文件，将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台，外观-主题， 选择 AirSquare 主题，并且激活。

3. 进入后台，设置-阅读，博客页面至多显示 24 篇文章。

使用：

1. 上传成功，并激活成功即可使用。

2. 在 外观-主题选项中，点击“主题选项”即可设置相关的选项，不要忘记点击“更新选项”哦。

3. Logo 地址处，填上 Logo 图片的地址即可。 逐渐更新支持。

4. 后台所有输入框 HTML 都是可用的，但是建议该用的时候用，不该用的就不要用。

5. 统计代码 可以使用单选框选择是否可用，选中状态则起作用，否则统计代码即使在后台能看到，但不会起作用。

6. Twitter 及 Google+ 输入用户名后或者 Google + 个人链接最后的数字后，则会在鼠标悬停于右侧的时候搜索栏得最左边显示链接。

7. 多语言支持。目前只有中文简体，繁体中文及英语。

9. 其他任何问题，请联系 yimity@yimity.com。谢谢。

10. 主题为 1.0 版，如有先关建议或 Bugs 也请发邮件，谢谢。

当然，此份主题不是免费的，但是只出售 10 份，每份 99 元人民币。同时附赠价格同样 99 元的 BreakUp 一份。

购买者，享受不限时一对一服务，但是也只是我一人，当然了，大家都有工作，最好是晚上，最最好是星期周末把。

购买者，发送 知乎 邀请一枚，Hostloc 要请也有。

购买者，可以享受右侧页脚搜索栏社会化图标的更换服务。

最后，当然是走支付宝，你放心，我放心。

更新日志：

更新 , 时间 , 版本

增加留言模板和友链模板 , 2011.12.01 , 1.0.1

优化文章内容样式 , 2011.12.02 , 1.0.3

添加登陆后编辑功能 , 2011.12.14 , 1.0.4

这里的效率不是说开发者写代码的效率，而是浏览器执行这个选择器的效率。

在看 CSS 的书或者教程的时候，是不是看过这句话：“浏览器是从右至左来处理选择器的”。当然了，如果你没有看到过这句话也无所谓，现在有同样意思的话，就放在这里，现在看也无妨。

那么再来说下浏览器工作的过程，这里是渲染的过程，得到数据之后，浏览器要先绘制一个 DOM 树，然后再有一个 “reflow” 的过程，这个过程就是在 CSS 文件下载之后，确定要渲染的元素在 DOM 中的位置，而 CSS 样式中，很多很多在应用的时候都要有一个 “reflow” 的，过程，所以，避免这个过程，后者减少这个过程，都会相当大的提升浏览器的效率。

还有一个就是 CSS 选择器的优先问题了，这个这里不多说了。

那么，我们不多废话，直接上例子和代码：

例如，我们通常的选择器会这么写

.content a {}

那么根据上面几条理论，浏览器的工作过程是绘制好 DOM 树之后，就会查找页面中所有 a 元素了。查找到所有的 a 元素之后，又开始查找出于 .content 类下面的 a 元素，此时，如果页面有好多好多 a 元素就会是一个非常耗费资源的事情。那么如果这里有更多个 .content 呢？

所以，我们可以这么写，给每一个 a 元素添加一个 class 就可以了。

然后变为

.content .xxx {} 或者 #xxx .xxx {} 这样呢，效率就会更高了。

那么，还有一种情况就是使用太多的层了，也就是限制太多了，例如；

#xxx ul li p a {}

同样的按上面的理论来说，先找所有的 a 然后找所有包含 a 的 p ，依此类推，那么效率肯定是很低喽。

改写后的 可以给 a 添加 class，那么就可以写作 #xxx .xxx {} 效率高了不是一点两点啊。或者给 ul class 嘛，那么就写作 .xxx p a {} 但是这样效率提升并不明显啊。

好了，完了，这只是基本的方法。前端效率的提升，需要慢慢理解，慢慢琢磨，慢慢来嘛。

项目中一直有需要，但是之前使用的是另外一种方式实现，现在这种方式使用IE的滤镜直接搞定，但是还是不建议使用滤镜虽然很简单，但是资源和效率确实不敢恭维，发过来只是为了记录而已。

<style type="text/css">
body{ background:#CCC;}
#d1{width:300px; margin:100px auto; padding:50px;background:rgba(99, 55, 11, 0.2)}
p{background-color:#fff; color:#000}
#d2{background-color:#fff; width:600px; margin:0 auto; padding:10px; line-height:30px}
</style>
<!--[if lt IE 9]>
<style>
#d1{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3363370b,endColorstr=#3363370b);}
</style>
<![endif]-->
<div id="d1">1、背景透明内容不透明<p>2、背景透明内容不透明</p></div>
<div id="d2">
background 的 rgba参数(red,green.,blue,alpha),alpha值0-1<br />
ie滤镜参数#3363370b，前两位为16进制透明度，<br />
比如说值是上面用到的0.2，那么就是0.2×255＝51，再转换成16进制为33<br />
</div>

CF Image Host 作为一个非常好用的图床源码，不需要数据库支持，而且提供完备的外链功能，适合查看图片各种大小的缩略图，以及完整图片的真实链接地址，适合各种情况下使用，然而 CF 只提供了 Apache 的伪静态规则，所以，如果要安装在 nginx 服务器上，则如果需要静态化的话，则需要添加相应的伪静态规则，但是这个规则又不是每个都会写的，而且在网上找到对于目前最新版本的 1.4.2 来说，正常可以使用，但是相册页面的分页则会出错，所以稍微修改了下，使在相册页面的分页也可以正常使用了。那么，规则如下：

rewrite /pm-(.*)\.(jpg|png|gif|html)$ /index.php?pm=$1;
rewrite /pt-(.*)\.(jpg|png|gif|html)$ /index.php?pt=$1;
rewrite /dt-(.*)\.(jpg|png|gif)$ /index.php?dt=$1;
rewrite /dm-(.*)\.(jpg|png|gif)$ /index.php?dm=$1;
rewrite /di-(.*)\.(jpg|jpeg|png|gif|bmp)$ /index.php?di=$1;
rewrite /gallery/(.*)\/$ /gallery.php?p=$1;

其实，对于这么一个小小的图床来说，几乎可以不使用伪静态，而且伪静态之后，其连接地址也一点不好看。

还有，据站长说，目前正在开发第一版 Pro 版本的程序，增加了账户注册等功能，还是蛮期待的。

我的图床地址，大家可以免费使用，但是，请谨记，只可以上传 “好图” 哦。 http://haotuu.com

错误一：

行内元素和块级元素混用，例如：

<a href="#"><h2>This is wrong.</h2></a>
<h2><a href="#">This is right.</a></h2>

a 行内元素，hx 块级元素。

错误二：

img 元素未包括 alt 属性。

<img src="a.jpg" />  <!--Wrong-->
<img src="a.jpg" alt="this is a image" /> <!--Right-->

错误三：

正确的时候使用 lists 结构。例如：

<p>
    This<br />
    is<br />
    very<br />
    Wrong<br />
</p>
<ul>
    <li>This</li>
    <li>is</li>
    <li>very</li>
    <li>Right</li>
</ul>

错误四：

标签应该从语义触发，而非样式。例如：strong 更好

<b>This is bold.<b>
so<strong>is this, but this is better.</strong>

错误五：

最好用 css 而非结构控制，例如：

This is
<br />
<br />
Wrong.

错误六：

还是注意标签的语义化。例如：

<s>和<strike>已经被抛弃了。
<del>和<ins>才是新的可用的哦。

错误七：

使用内联样式，例如：

<h2 style="color:red;">This is Wrong.</h2>

错误八：

在 html 结构中使用已经被抛弃的属性，而应该使用 css 控制，例如：

<img src="a.jpg" alt="xxx" border="0" />

错误九：

没有正确使用 header 标签，例如：

<p><strong>This is header but wrong</strong></p>
<p>this is content.</p>

<h2>This is right header</h2>
<p>this is content.</p>

错误十：

不要使用非标准的和不推荐使用的标签，例如：

<blink>This is Wrong.</blink>
和
<marquee>This is Wrong.</marquee>