如何高效debug2014-06-29

这是一个公司内网上的问题,原意是题主觉得debug非常费时,影响了项目的效率,问如何改进。当时也在内网随手码了几点,回头又看了一遍觉得很有共性,可以再扩展一下单独写写,于是诞生此文。因为专业所限,本文的部分细节也只限于web前端,但思路和其它语言是相通的。

首先,程序员要调整好心态。

事实上,debug是程序员工作的重要组成部分,甚至在产品的某些阶段是唯一的组成部分,所以不用把调bug看成是拖累产品进度、降低效率的凶手,这是一件必须要花时间认真去做的事情,它就是你的工作,也是整个项目进度过程中必不可少的组成部分。所以在debug的时候也可以更加平心静气一些,不用那么急躁。

当然,这个心态的改变也会涉及到项目进度安排上的一些调整,比如在排期的时候就要预估debug的时间,而不能仅仅只安排编码的时间。此外,还需要给自己做好时间管理,尽量能排比较大段的不被打扰的时间来debug。

把心态放平之后,有的bug可能解决起来真的就没那么耗时了。在心态平和、思路清晰、无人打扰的情况下,一般修起bug来都有如神助,效率高得连自己都不太敢相信。相反,往往越是着急的时候越是难定位到bug的真正原因。

Retina屏下的CSS雪碧图2014-03-19

CSS雪碧图早已经成为前端知识体系中一个必备知识了,时至今日,可能很多人都觉得这一块已经没有什么东西可以再讲了的。但事实上雪碧图一直都可以引出新的话题,比如从最早的连接数和体积的平衡到格式之争到图像摆放位置的策略,再到合并图像的颗粒度,再到内存占用、CPU占用等性能问题……

没错,今天还要在这一古老的话题上展开,引入一个新的问题,那就是雪碧图在retina屏下存在的问题及应对方案。(值得注意的是,retina屏一般指分辨率为普通屏幕两倍的屏,这样按照普通尺寸开发出来的网站相当于被放大了2倍,会导致图像模糊之类的现象产生,理想的解决方案是为retina专门适配一套皮肤,但本文关注的问题是未适配retina屏幕的网站所出现的问题。)

雪碧图本身不是浏览器或者web标准中的技术,因此它的不少细节取决于浏览器的实现,本文中的讨论的内容正是如此,为避免争议,本文所有结论的得出场景限定为Mac OSX 10.9.1、Chrome浏览器V33。是否适用iPhone、iPad等场景未做相应测试。

无处不在的白边

如前文所述,在retina屏上浏览未做专门适配的网站,会出现图像模糊等问题,无法达到最佳效果,但一般情况下,仍然处于可以接受的范围。不过,在某些网站上,却出现了比图像模糊更糟糕的情况:

WebQQ在retina屏下出现白边

学习ES6生成器(Generator)2013-12-29

这几天,TJ大神的koa框架突然在国内火起来了,随之而来的,则是其使用的ES6生成器(Generator)引起了广大码农的强烈兴趣,各种文章也如雨后春笋般拔地而起,比如这篇这篇、还有这篇。这个神奇的生成器被视为解决JS“回调恶魔金字塔”的利器。在动手实践之后,发现介绍ES6生成器的文章仍然有些疏漏,因此有了这篇文章,权当是对各位大大们的补充好了。

背景

在JS的使用场景中,异步操作的处理是一个不可回避的问题,如果不做任何抽象、组织,只是“跟着感觉走”,那么面对“按顺序发起3个ajax请求”的需求,很容易就能写出如下代码(假设已引入jQuery):

// 第1个ajax请求
$.ajax({
    url:'http://echo.113.im',
    dateType:'json',
    type:'get',
    data:{
        data:JSON.stringify({status:1,data:'hello world'}),
        type:'json',
        timeout:1000
    },
    success:function(data){
        if(data.status === 1){
            // 第2个ajax请求
            $.ajax({
                ......此处省略500字
                success:function(data){
                    if(data.status === 1){
                        // 第3个ajax请求
                        $.ajax({
                            ......此处省略500字
                            success:function(data){
                                if(data.status === 1){

                                }
                            }
                        });
                    }
                }
            });
        }
    }
});

当顺序执行的异步操作越来越多的时候,回调层级也就越多,这也就是传说中的“回调恶魔金字塔”,在本文章中,我们给它另一个名字“被动异步”。

还有一种场景,比如老赵的Wind.js总喜欢用的经典例子,对一个数组进行排序,但要动态展示排序过程(详情)。

在这种情况下,为了使动画能够正确呈现,我们不得不对“排序”这一本来不涉及到异步操作的逻辑做些改动,强制添加延时操作,使它变成一个异步操作。(如不理解,请搜索“JavaScript动画原理”。)

在本文中,我们给这种场景也起一个名字,叫“主动异步”。

在Windows上手工安装Node.js2013-12-19

时间已经到了2013年末,如果在这个时间点,你还没有接触过Node.js,那可能真的是有点跟不上时代步伐了。技术发展总是很快的,Node项目诞生不过才4年,在windows平台出现也才2年多的时间,却已如星星之火点起了燎原之势……

没错,Node出现超过4年了,但在windows平台才2年多的历史,可见支持windows多少是个有点艰难的决定,好在背后有微软撑腰,一切顺利。至于说到这个标题,手工安装嘛,如果去搜索一下,也能找到一些文章,不过大部分已经是0.6之前版本的故事了,那时候Node还没有给windows的安装包,也没有集成包管理工具npm,用起来还是挺不方便的,而如今,只要去http://nodejs.org上下载对应的.msi文件再安装就万事大吉了。

不过,微软家的东西总是会有些意料之外的状况,.msi也不例外……

如何设计一个前端模板引擎2013-08-25

前端模板引擎现在已经被广泛应用于前端开发了,几乎每个项目都会使用。微博上甚至出现了“不写个模板引擎就没办法在前端界混了”的言论。当然,这是玩笑话,却也能在一定程度上反映前端模板的普及程度。如果你还没有了解过前端模板引擎,赶紧去补补课吧。

本文其实算不上是一篇讲模板引擎设计的文章,写这篇文章的动力来自于自己使用过一些模板引擎(jQuery Tmpl、jade、ejs、artTemplate以及ThinkPHP自带后端模板引擎)之后的心得,所以可能不会涉及到模板引擎设计的方方面面,更多地是讲模板引擎之间的一些有差异的细节以及我的思考和取舍。

来历

var tempHtml = '<table>' +
        '           <tr>' +
        '               <th>Hello</th>' +
        '               <th>World</th>' +
        '               <th>!</th>' +
        '           </tr>' +
        '           <tr>' +
        '               <td>' + myData.col1 + '</td>' +
        '               <td>' + myData.col2 +'</td>' +
        '               <td>' + (myData.col3 === 'yes'?'!':'?') + '</td>' +
        '           </tr>' +
        '       </table>';

document.querySelector('#myDiv').innerHTML = tempHtml;

相信上面的代码对哪怕做过一点点涉及界面开发的都应该很熟悉吧。当我们想把一段结构和一段数据组合起来,再放到页面上时,就会常常面临这样一段复杂的代码。

这段代码相信不用我说你也会觉得它实在有点复杂:要处理结构中字符串本身的拼接,还要注意结构与数据的拼接,处理数据拼接时还要注意运算优先级(尤其在使用?:三元运算符时),还要为了可读性考虑纠结的缩进……

当然,最麻烦的还不是这里,当我们想要对一个数据循环遍历并输出时,居然还要自己去写循环,再一圈一圈地把这些结构拼起来,最后再拼上首尾的结构。而当数据为空时,又要自己去写一个“暂无数据”之类的占位符……