Designsor

2010迷笛音乐节， 着实被国内这些乐队带劲了一回，虽然累的已经不用瘪来形容了。

爱就是精液的力量，我们不能被这平淡的生活击倒。（虞洋）乐队的表演 算是最喜欢的了，当时在心里所想的，唉，当初不学美术，要是学个乐器什么的就好了。朝九晚五其中有几句歌词非常喜欢，我们白天为工作，夜晚为生活。

其实回过头来，我们每天在敲代码的时候不得不承认有些人是一直开着耳机听音乐的，有的是轻柔主旋律，也有的是重型摇滚（比如我……）允许我自己YY 一下，开发者和音乐家还有艺术家的关系吧。我觉得它们是一样一样的，背后受苦，表面喧哗。昨天在海淀公园里的人群中，见到不光有衣着很潮的兔女郎和兔斯 基，纹身男等，也有大部分的普通的人民群众，其实无论身着什么，在音乐响起的时候，那种内心的情愫应该都是一样的。当你看到华丽的界面的时候，优雅的操作 和为人震撼的javascript特效的时候，无论你是否懂程序和开发，那种美好的冲动我觉得和听到优美的音乐是一样的。

开发者在创造和书写的时候要带着自己的激情。激情这个词，不光可以用在那些人民艺术家身上，我们程序员其实大可也在创作大作的时候带着激情。那种自己深陷其中不能自拔的类似那些摇滚青年一样的音乐激情。话锋一转，尤其算上前端开发者。

网页本没有设计，在最最开始的时候所有美观方面的东西其实都是那些程序员来自己制作的，正是因为后期有了那么多的“美术艺术家”和那些半程序半艺术家的“前端开发者”们，把你们所见所得的页面“激情的”创造出来了。

我们对待自己制作的页面就该像乐人对待自己的歌曲一样为它们负责，它们都是有生命的。

难道你说不是么？有激情的音乐让人沉醉，没有激情的音乐让人困倦。用创新过的技术和自己本身大量投入的激情开发出来的产品和没有创新与激情开发出来的产品，道理其实完全一样。

说白了，我喜欢那些 摇滚青年的无所畏惧，我想我们的工作也完全可以做到那种无所畏惧的境界。

最近一些天光更新了些与技术无光的东西了。但是我觉得却比一些技术文档和教程会对你更有帮助。其实每个开发者都该有颗爱音乐的心。

不废话什么隐私不隐私的，不废话什么改版不改版的。做为一个网站的用户，注册的，深度的，3年的用户。
选择注销，是每个人的权利。

对于这次豆瓣把友邻改成关注，关注要用户自己算数的一系列改动。我就不讨论了，今天来公司本来打开的是豆瓣，可发现已经在昨天晚上被自己注销了，登录不上了。想了想，我去了腾讯微薄。既然你要改成微薄，那我就直接去专业微薄好了。

与之相比，找到注销比校内要容易的多，只不过校内我注销过4次，很轻车熟路了。豆瓣比较狠毒的是它不允许复活，真好，其实我也不喜欢春哥。

五月一的大改版，五月一之前的突然上线，我以个人名义来说：“操，什么玩意。”

bye豆瓣，bye我的500多个好友，bye300多个友邻，bye我读过的100多本书籍记录，bye我看过的1300多部电影，bye我管理的10几个豆瓣小组，byebye。

我真的不是一个特别关注用户体验的人，但平时在做开发的时候也是很认真的去想过怎么用户使用会更舒服，简单等问题。可今天遭遇的一系列事情真的让我一个开发人员都看不下去了。

豆瓣网，一个以书评，影评，乐评，社区，RSS，音乐试听电台（虽然我觉得提供的都是高清）为主要内容的社区。

不想做过多介绍，如果您不是深度豆瓣用户也无关系。请看下面2张叫我很无语的图片吧。在发图片之前我还一直有个疑问，一个大型社区网站的更新可以说是随时随地的么？难道都不自己提前内部做好测试？难道就和我们“业余的”一样随时随地就更改文字布局样式了。。？好吧，他是你们管理员的个人主页，您们说了算。下面这张是第一幅图，让我哭笑不得，在5分钟内它最后改变成了这个样子。哭笑不得。

以一个局外人的身份来分析它（被用户一致骂的祖宗都出来后修改的结果）。

我的友邻：全部520，朋友381.

520，381.两个整数型。

嗯，520+381是什么？（全部+朋友=？）

嗯，520-381是什么？（全部-朋友=？）

2个疑点。作为用户我必须去猜测，这2个数字代表了什么？他隐含了什么信息？他最后算出来的是什么？

很多种理解，我全部520个人，就不说是520个什么东西了，朋友有381个，那么我的全部到底是有520+381还是520个呢？我真的不明白。

我全部有520个人，朋友有381个，那么，520-381那一部分人是什么呢？（答案是我关注的人），那么好吧，为什么你不把那139个我关注的人好好的放在那里呢！！！（之前就是放在那里的……）-如果是新用户的话就更迷茫了吧。他可能觉得，网站系统出错了……

好吧。2个很疑惑的疑点，不对，是很明显的逻辑破绽！居然被豆瓣这么就给草草改出来了，而且没有任何通知。我真的不知道这种用户体验的感觉是什么，如果你真是深度用户，也不用解释其他深层次的原因了，只能气的会暴出脏口而已。

再看下面的另外一张图：

我直接吐血了。嗯，先不说这个页面是谁做的了（我80%觉得是临时他们被骂傻了，临时做的）那么看看他们都做了什么吧！额，发现没，有的有（朋友），有的没有。我怎么区分，其实以前就是“关注”与“友邻”而已了。嗯，我无法区分。然后，我要修改呢？

既然你提供了编辑。那么好吧，我怎么编辑？挨个去点么？我笑了。。。就我个人来说，520个我也说不出是什么的东西，520个啊……连个全部修改，过滤，和分类都没有的页面就发出来了！？呵。借用标题，我对你真的很失望。

这其实不算什么用户体验，是明眼人都可以看出的逻辑错误和某些人的自以为事而已。借我自己的地方，随便说说。

其实，如果没了用户的支持，那网站还做个什么劲，有什么价值？您说对么。

周星星在唐伯虎点秋香里说“谁说没有枪头就捅不死人？”，嗯，其实套用过来用在这篇文章里也非常好。谁说没有浏览器就跑不起来javascript？

首先，多的不说，看图，本地文件，js和wsf文件2个。我们没有用浏览器哈……

test.wsf中的代码：分析一下其实很好理解，构建一个windows系统的脚本文件.wsf。然后包含一个外部js文件，执行使用vbs和wsh的对象和方法，调用包含的js文件的定义函数getfreespace（）；然后输出结果使用wsh的echo方法。

fso中的js代码，启用ax控件中的sf对象，获得本地磁盘可用空间返回字符串。

执行后的结果，啊哈，成功执行。

看到这里你该恍然大悟了吧？啊？javascript还可以这么用呢？确实，很多人，都不太了解这是怎么一回事。其实道理不难理解，javascript说白了，一个脚本语言，而这里上面的例子是调用的微软的jscript和wsh对象完成的，中间引用了一个外部js脚本。唔，别晕。下面看这个解释词条，它列出了我们所理解的各种javascript概念：

javascript脚本语言：一种语言的统称，由ECMAScript262规范，涵盖core javascript，jscript，actionscript等，而非特指其一。

浏览器javascript：包括DOM,BOM模型等在内的对象体系支持的浏览器javascript脚本，不特指具体脚本环境（因为有太多的浏览器内核也就是javascript解释引擎），是目前最广泛的应用，也叫做cliet-side javascript。

corejavascript：也叫javascript，主要是指Netscape/Mozilla系列的浏览器下的javascript，是该语言的主要规范之一。

Jscript：也包含上面那个小破例子中的AX控件对象，泛指微软开发的javascript比如支持的浏览器IE系列。

通过上面的解释，我觉得你该明白了，也当你明白了，javascript是有多少种称呼和版本品牌和叫法啊，完全是历史的原因造成的。不同公司，不同环境，不同宿主对象的结果。幸好，最后他们都归于一个标准EMAC262，基于他的语法和规则，我们的到了各种不同演变后的javascript。

嗯，javascript这个动态脚本语言，他需要一个宿主对象的支持才可以运行，也就是一个语言的运行环境，在浏览器里是windows窗口对象还有dom提供的xml节点对象等，然后使用他们各自浏览器提供的javascript解释器解释翻译执行。

群里今天还在讨论了这个问题，javascript引擎技术。嗯好吧，我也google到了，特此总结下常用的几款：

spiderMonkey（C语言编写应用在Mozilla下），javascriptCore（C++编写运行在safari下），Rhino（java编写），JScript（windows环境以及IE）等。———（其实actionscript应该也算是另类中的一个）

啊哦，说到这里，那么至少我们的javascript离开了我们的可爱的浏览器，他还可以在哪运行呢？嗯，那就是有它解释器的环境下运行了，比如java平台环境下的Rhino，比如我们的windows系统，如本文最开始的WSH例子。他们都属于各自的不同属性和方法，但是本质都还是符合EMAC规范的javascript。

噢，噢，噢。绕了一大圈。好了，这说了半天，javascript还是一个脚本语言啊。嗯哼，对了，他就是一门需要宿主解释器，轻型灵活，弱面向对象的脚本语言。（但看过此文后您可以把“浏览器下”这4个字儿去掉了~）

最后给出一个windowsscripthost手册并借用Michael和我的一段经典语QQ聊天记录结束本文：

Faquir 21:22:26
现代语言基本都要你所说的宿主 
Faquir 21:22:33
JAVA要JVM & JDK
Faquir 21:22:39
.NET要framework 
小爝 21:22:44
对。。
Faquir 21:22:48
由此可见, 
小爝 21:22:52
咋？
Faquir 21:22:54
js与.NET,JAVA平起平坐

什么也不多说，只是很久不做设计了，希望还能对得起你们，最后，落网加油。

对于一个B/S架构的项目，最常遇到的一个组件可能就是表格了。对于表格的重用，经过大概2周的时间为公司写了个纯的javascript的渲染组件-jquery1.4.2版本下支持。需求是这么产生的：

公司写css和开发javascript特效或者一些其他杂七杂八与javascript的工作都是我负责，在去年中的工作中总结到太多时候每个页面扔进了过多的重复代码，有CSS，也包含一些HTML，大量的垃圾源代码。而由于基于本身项目的多变性，外观和功能越来越多次的被推翻重来，很明显工作量和以前不能同日而语。我觉得需要这么一个东西来解救大家，让大家把底层的东西一次性做好，后端输出直接是清晰的json字符串，前端接收后直接转换成可定制多扩展易部署的通用视图。不仅良好的约定了前端开发人员与后台程序员的对接接口，也解决了大量重复劳动的过程，而仅仅需要维护一个库文件和部署的几行代码，方便实际。

那么好吧：面对的两个选择，一个是我们这的技术总监找到的这个Jquery插件-jqgrid，还有一个选择是自己开发一个类似的但是功能绝对不能比他这个差的！小爝选择了后者……。下面是一张Jqgrid的截图，通过图片来解释一些事情：

这个DEMO中我需要到的功能都是什么呢，支持json方式取数据，支持页面array组成数据，支持表格的样式可定制，支持表格的基本附加功能如：分页，跳转，搜索，上下页，各行换色的支持，特殊行样式支持，排序支持，点击后的表格样式，复选框的机制，表格内部链接的支持与互相数据之间的通信。

基本需求如上，看过他的部署代码，思路开始清晰，但是从头开始写这么一个东西还是有点心有余悸，毕竟也是第一次。在确定了以上需求都没有攻克不了的技术难点的情况下，开始开发吧。2周后，一个580多行的jquery插件产出，（包括大量注释和回行），基本需求符合上面需要的jtable插件被开发出来了-支持浏览器包括IE系列和非IE系列！

那么看下我的jtable都支持什么需求功能吧。除了上面所列机制的特点，我为公司定制了一套，也是特别要求的。页面加载后先加载当前页面array数据产生表格，取消第一次ajax请求，减轻服务压力，已经实现，并包含3种数据加载模式，array，json，上面2种的柔和。扩展部分：分页机制仿google下面分页，7页码，左右轮换，当前页码智能定位。限定表格行数，把一些服务器端逻辑展现到前台JS脚本下自动处理，可一页面多处部署，最最重要的我留了个接口可从外部传入自定义函数来控制表格的初始化等等。（这点做的时候觉得没必要，可后来讨论却是最重要的一步扩展）-实现了插件的扩展和重写。来张图吧：

看吧，ajax后清空的表格容器里依然可以记录操作项耶。这个jqgrid不知道支持没支持~

由于插件这次写的太过复杂细节会分出要点发出来分享，但是制作一个插件的过程确实过瘾而且锻炼人。目前这个demo只是展示给同事和需求的，所以配置方法，部署方法，接口等还不适合公司项目之外的使用，但是确实可以应用，我想等最后成熟了会发布chm出来的，也希望这个插件可以i解救一些被重复大量table困扰的开发小组。

后期可能还会再加其他扩展，比如内部我们讨论搜索到底需要不需要再另外留出个接口，实现可定制和分拆加载。昨天看了些YUI的loader（），觉得特性最好最强大，实现机制也不是非常复杂，有可能会借鉴一下，我越来越有想自己开发一套自己的js UI组件的梦想了，无论是以后基于自己的工具库还是jquery的……嘿。

最后DEMO地址：http://www.designsor.com/demo/jtable/

源文件代码等可自行FF下查看源代码。注释还算凑合主要我怕自己晕多写了些~（样式是自己做的嘞，不好看可自定制~~~哈）

浏览器兼容，浏览器兼容，这个词越来越多被摆上了会议，招聘，HR的嘴里，前端的嘴里，页面仔的嘴里，还有一些老板的嘴里。

可是，到底我们是在兼容什么，兼容什么东西，什么浏览器，是什么东西让我们的页面在不同终端显示不一样呢？

看上图，简单的了解下。这是张小爝制作的9款浏览器的分类表，和他们各自的“内核”。“内核”只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”。

百度百科的解释：Rendering Engine

　　浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。
　　所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

看过上面的词条解释应该有个大概的了解了吧，通过开始的图谱，我们知道，目前主流的这几款浏览是基于以下4个内核开发的：Trident，Gecko，Presto，Webkit。（如图分类）

所以最开始的浏览器兼容，多版本兼容其实兼容的不是所谓的什么牌子的浏览器，而是要兼容这4种不同的页面渲染解释器与其自身的不同版本产品。

这样就思路很清晰了，我们为什么做出的页面不兼容，我们到底有没有一种好的制作页面的方法可以避免这种不兼容，可以尽量的做到开发的简单轻便快速敏捷。

答案是肯定是的有，至少总结可以得出一下几点：

1，区分内核而不是区分浏览器。如果你按照浏览器来调试页面肯定工作量是*9而不是*4，鉴于他们的标准日渐趋于通化，这种灰色技术会越来越褪色。比如，你调试的FF页面良好，那么你的NS肯定也是不会变形的，如果你调试的是IE，那么你的TT,遨游等肯定也是稳定的，如果在Safari下良好，那么谷歌基本也就稳定了。opear的比较单独，但是他的内核也是最轻便简单的，有一部分和Webkit很像，有一部分又趋于Gecko，可opear的Presto牺牲了页面兼容的一些特点也算比较难调试的内核，速度快必然有削减其他性能。

2，从IE7调试开始，当然，有人会说从FF3.5开始调起，毕竟IE7没有任何可视化工具和插件可提供，而FF的插件帮助你在开发时显著提高可视化。但其实，你错了，正是那种可视化害了你的兼容性。IE7是一半偏向标准一半不标准的CSS兼容（我深有体会），基本如果做到IE7的完全正常，那么IE6基本会很少出现异常，如果稍微有点经验，因为IE下的CSS开发无可视，所以你脑子中的可视化概念一定要很强，这样避免“内核”中不一样的标准你就会自动绕着走或者第一遍就写好了hack代码。而事实证明IE7正常，FF下的几个显著兼容问题只要提前做好功课，变形几率也会降低很多很多，而且调试的时候辅助FBUG，速度会特别快。而基于其他的几款浏览器同理了。

3,仔细阅读不同内核对不同CSS样式表的渲染方式，然后尽量避免，即可最小限度的简化CSS代码量和hack量。不要走死脑筋。

近期会整理一些css的兼容性方面知识放在BLOG上，关于js由于不同版本的自身内核关系，影响不大基本就是一些DOM API和标准的方法有所不同，那又是另外一个层面的兼容问题了，因为有的内核提供了一些机制有的则没有而提供的另外的机制，这也就是JS中不同浏览器会有不同表现写法的原因了。
知道其本质才可以解决实际问题，我也是给自己总结份思路，以便以后查询。等待我的表格插件写完就会开始制作关于兼容性的表格。
：）

在豆瓣javascript小组的群里，基于java框架的未来开发者，史努比同学每天催魂般的叫嚣……我终于翻开了qunit的文档，下载了代码，开始了使用javascript测试框架道路…

好了，言归正传…。

使用和下载方法google上的中文或者E文教程都说烂了，在这里随便提一下：下载http://docs.jquery.com/QUnit中的2个文件qunitCSS和JS，然后自己制作一个HTML测试页面，放在服务器或者随便哪…，对了，开头别忘记要加载最新的jquery库代码…然后就可以开始了。

嗯，初始化之后的页面，给个截图吧，很刺激的爆红和爆绿~

然后对应上面的代码，其实很简单了。

module(”A”); //创建一个测试集
function nowpage(page){ //测试函数
var nowpagehtml=[];
for(i=1;i<=page;i++){
nowpagehtml.push(i);
}
nowpagehtml=nowpagehtml.join(” “);
return nowpagehtml; //返回一个数字字符串
}
test(’测试函数’, function(){ //给测试函数起个名字test方法为创建一个测试函数
equals(nowpage(0),null, ‘函数返回字符串1′); //equals就是判断相等的，第一个是函数，第2个期望返回值，第3个是解释，然后对应界面，就可以看出怎么用了，另外一个方法是same，可以判断数据和对象的。详情看文档吧。
equals(nowpage(3),”1 2 3″, ‘函数返回字符串1 2 3′);
equals(nowpage(”3″),”1 2 3″, ‘函数返回字符串1 2 3′);
});

再然后就是一个OK函数了。返回是否的，目前这个例子不太适合…但是应该可以理解的，例子：

ok(simpleTest("2"), '"2"是一个数字');

最后就是ajax异步的测试，这个的理解需要2个函数，stop();和start();例子：

function ajaxdemo(Callback) {
$.ajax({
url: ’search.php?abc=xxx’,
success: Callback
});
}
test(’asynchronous test’, function() {
stop(); // 暂停测试告诉qunit我要异步调用了。
ajaxdemo(function() {
// 异步调用判断 看是否返回你预期的值等…
})
setTimeout(function() {
start();
}, 2000); //自己预期异步成功预期时间，到达时间调用start();继续qunit，返回测试结果。
})

这个理解还要感谢史努比同学…，他解释的比较形象，大概这就是javascript中的单线程异步模型吧…

最后还发现了2个源代码中给出的提示，最新的qunit里的382行：

// Backwards compatibility, deprecated
QUnit.equals = QUnit.equal;
QUnit.same = QUnit.deepEqual;

嗯，上面可以替代使用并鼓励的2个方法，下面是文档中列出的所有方法和说明…

OVER，以后多多测试吧，我只测了我的一个以前的函数，但是爆绿的感觉还不错呢。

不得不说，我其实最开始是反感FF这个浏览器的……

我一直是遨游和IE7的忠诚用户，记得接触这个还是大学毕业之后，在一本什么教材上看到的FF浏览器和Firebug这两个家伙。一只小狐狸，一只小臭虫…而最近又下载了测试性能的插件Yslowl，感觉这样的组合真的很棒。所以有必要发上来分享一下，虽然都是些常用的东西。

先来几张图把，解除控制Fbug全开~

最常用的布局模式了，大家都是冲这个来的，怎么样，不光可以看清除你写的CSS HTML，继承关系和盒子模型，还可以看到动态JS生成的DOM，更NB的你可以实时来更改看效果。不错吧？

脚本控制台了，你可以开启控制台查看详细错误，也可以开启JS的DEBUG模式，早在几个月前我还是一直在alert（）纠错，如果你也是的话，那么加入DEBUG模式吧，真的，效率提高不是一点半点，遇错拦截，详细报错代码定位，阻止代码进程。嗯，嗯……

网络监控台，不光可以查看你的网站加载情况，HTTP具体请求，更好的是可以调试JS中的异步Ajax调用，每次请求，返回码一览无遗哈……

扩展Yslow，雅虎开发的，前端性能测评插件，22条测评指数，看见没，我的首页是B级。依然有待优化，其他选项卡是一些你的具体请求信息，HTTP头信息，然后评级工具具体到解决方案都已经给出，由于我遇到的都是服务器端的优化问题，没办法，GD的主机apache不受我控制……尽力做到最好吧。

嗯，嗯，其实我还装了个PHPDEBUG工具，由于和前端关系不大就不介绍了，看见那只蓝色虫子了么~=。=

那么，如果你有什么好的前端开发工具也来分享下吧…

Jquery滚动图片插件-jcarouselV1.0版本终于在今天发布了，虽然BUG还很多，虽然内容功能都比较简陋，但是也是我第一次发布Jquery插件。心情很激动……

这个插件主要是仿腾讯PC频道首页的图片滚动展示JS效果，与腾讯的那个相比，我的插件可定制宽高，速度，间隔，且有停留查看功能，可自定制弹出窗口属性和HREF属性。基本的图片滚动功能都拥有了，而且支持自定义CSS样式。

具体的都在源文件里，详细的版本信息和更新以后都会发布在下面这个地址：

http://www.designsor.com/demo/jc/content/jcarousel/

支持一个页面多处调用，互相不冲突（这个要多谢豆瓣JS小组的史努比同学的全局变量解决方法）

下面发个效果图吧~

后期还会推出一款类似jqgrid的表格jquery处理插件，请期待吧~