Liu Zhongshu

Javascript组件化的趋势越来越明显，今天看的这篇文章列出了很多高质量的Javascript组件，比如图形框、日历、菜单等，值得收藏。

今天看的另一篇是Firebug插件的中文介绍，写的简要清晰。我虽然一直都装有这个插件，却一直当它是一个Javascript调试器用，而看了这篇文章才发现，Firebug的很多CSS/DOM方面的功能比Web Developer还要强大。

印象中，我曾经几次试图找一个顺手的HTML/CSS/JS编辑器，大多没有好的收获，或者不比gedit强多少，这个顽固的印象要改一改了，因为昨天发现了Aptana，一个开源的Web开发IDE。

Aptana基于Eclipse，支持各种Web设计和开发，比如XHTML/CSS以及Javascript， 我简单的用了一下它的编辑器编辑了一个css文件，相当的专业，丰富的代码提示以及浏览器兼容指示估计应该能让生产率提高不少，但我使用的功能很少，这只算一个良好的初步印象。

Aptana的安装很简单（很遗憾，暂时还不能用apt-get），下载那个Aptana Studio的Community版本就可以了，解开就可以直接执行，在我机器上，跑的不错。

一个插曲是，直接安装后的版本（我用的是1.1），居然将 a:hover 这类css修饰当成了错误（放了一个小红叉在代码行前），这应该算一个严重的bug了，虽然官方给出了解决方法（只需要修改一个设置），但还是给人感觉有些不严谨。

这个网站上提供了一个傻瓜式的墙纸制作工具，它使用背景+主题+附件的方式来“合成”一幅墙纸， 提供的资源还蛮丰富的，其中主题和附件部分都是带透明通道的，质量很好，在背景上的位置也可以随意移动，但不能缩放，所以做出的效果比较有限。

所有的功能是通过Javascript实现的，可能是图片的质量较高，制作墙纸时反应很慢，有点受不了。

有些颇有心计的网站为了某些原因，会在Javascript上做手脚来"加扰"源码，典型的特征就是没有回车了，所有的代码揉成一行，相当壮观。我试过Linux下的一些编辑器来编辑这种源码，VIM和gedit都会被搞晕，变得很慢（当然是设置为Javascript代码时才会晕），KDE下的Kate表现的不错，可以非常快的高亮这种Javascript乱码，赞一个。但这几个编辑器都没有美化代码（重新排版）的功能，看起来还是头大的，不过网上有很多网站可以做这个事情。

还有一些加扰度更高的Javascript代码，它们是用代码生成代码，这样就可以用一个长长的字符串，通过移位，替换等运算再得到源码，这个重新格式化也不顶用，需要先写一个HTML文件嵌入这段代码来让它运行一下，以得到解码后的代码，然后就好办了。

还有更复杂的"加扰"方法吗？ 不过相信也是能对付的，毕竟JS是源码解释执行的。

每次我看到一个页面（主要是指我自己实现的）加载很慢时，我就想知道藏在背后的瓶颈是什么。

拜charles所赐，我可以容易的观察HTTP交互中的耗时，但今天的一个页面令我稍有意外，因为瓶颈是在客户端的Javascript的执行上（charles测不出来），非常明显，当我使用firefox的Web developer工具条中的disable javascript之后，流畅的感觉就回来了（快一倍左右），所以用Javascript的同学们，悠着点。。。

尽管大多的评测表明IE6的Javascript性能很差（IE7好一些），比如这篇文章，
但我的实际感觉不是这样，我甚至认为IE6都要稍快于Firefox 2，难道是我的感觉系统出了偏差？

这个页面的布局挺有意思， 颜色和字体也不错，我还学了一招：

HTML中可以用下面的这个方法来隐藏Email地址（估计对Robot应该能管用吧）
<script language=javascript>
<!--
document.write("<a hre" + "f=ma" + "ilt" + "o:usa" + "@sidesh" + "ow" + "digita" + " l.com" + ">E-mai" + "l us<" + "/a>" + "")
//-->
</script>
<noscript><a href=mailto:usa[AT]sideshowdigitalDOTcom>E-mail us</a></noscript>

考虑的还挺全面的，没有Javascript时，只能用[AT] DOT 来糊弄了。

Javascript如此的有趣，它几乎是唯一对于程序员（programmer）和设计者（designer）都有用的语言，原因是它运行在网页中。对于程序员，如果需要客户端控制的动态网页时，Javascript是唯一选择了，对于设计者，需要页面效果时，Javascript也是不二选择。我曾经看过一种说法说：程序员通常认为Javascript过于不严谨（可能他们是把Javascript和Java比较了），而设计者则认为Javascript过于复杂（是啊，要学习写代码总是困难的），我没那么多讲究，我觉得Javascript还不错。

我数次"学习"过Javascript，但都因为没有持续的使用而慢慢淡忘了，不过有一个好处是现在再拿起来会快一些，虽然语言本身很快可以温习，但DOM还是要翻翻资料的（DOM是Javascript用来控制HTML文档的模型），手头有一本书还不错，可以推荐 ──《DOM Scripting》，稍嫌不爽的是这本书用了很多我不认识的单词，害的我字典一直翻

关于Web Design的书有一个好处，大多制作相当精良，给人感觉像是Web的克隆（我十分想知道这些书是用什么排版工具排出来的？呵呵）

这本书主要介绍Web的一般设计原则，重点是HTML和CSS，很细致，后面还有一些内容介绍Web图像处理。我草草看了一些，内容写的不错，也有一些有趣的素材（比如各种显示分辨率的统计），并且非常"与时俱进"，值得推荐。但一定要第三版，因为Web的技术发展太快了，很多到现在还在讲解HTML而忽略CSS的书明显过时了。

由于没有涉及Javascript，这本书只能算是设计静态Web的指导书了。

在html规范里是没有include的，不过可以通过Javascript来实现，很简单在需要包含的地方，写入
<script src="file.js" type="text/javascript"></script>

然后在 file.js里面用document.write调用即可，比如
 var c=''
 c += '<p>hello</p>'
 c += '<a href="somewhere">hint</a>'
 document.write(c)

也不错，起码算个解决方法，有时比用服务器端脚本更合适一些。

moo.fx是一个超轻量级的js库，在网络上已经广泛使用，用于产生一些客户端效果，说他轻量级，是因为他只需要有三个文件：
 prototype.lite.js - 3k
 moo.fx.js - 3k
 moo.fx.pack.js - 6k
prototype其实是另一个js库，moo.fx依赖于它，但prototype过于庞大，因此moo.fx提供了一个简化的实现，所以叫做 prototype.lite.js(当然直接使用原版的prototype也可以)，另外两个文件则是moo.fx的实现文件，moo.fx.js实现 了基本的三个效果，moo.fx.pack.js实现了基于moo.fx.js的组合效果，因此如果不需要这些组合效果的话，甚至 可以不需要moo.fx.pack.js，这样更加轻巧。

moo.fx实现的效果其实很简单，动态修改Html tag的width,height和transparent，但应用却非常广泛，比如一些滑动的菜单(slidebar)，一些渐入渐出(fade in, fade out)。而且实现起来很简单，如果只有一组或几组tag需要使用这些特效的话，只需要moo.fx.js和prototype.lite.js就可以 了，但如果是多组的特效，最好再加上moo.fx.pack.js，它可以使用简单的语法来同时支持多组特效，下面几句话搞定：
<script type="text/javascript">
    var myToggler = document.getElementsByClassName("toggler");
    var myWork = document.getElementsByClassName("work");
    var myFX = new fx.Accordion(myToggler, myWork, {height:true, opacity:false, duration:400});
</script>