JSConf 2010 – 四火的唠叨

一年一度的 JSConf 大会又召开，这是 2010 的官网：http://2010.jsconf.us/

其中的 Sliders 请看这里：http://devthought.com/2010/05/03/jsconf-2010-slides

Chris Williams 和 Iterative Designs 创立了 JSConf，这是 JavaScript 开发者的第一个专业会议。09 年其实还有 Mix09、Velocity09、YUIConf2009 等会议引人耳目。

来看看 JConf2010 都提到了哪些东西？

Google Chrome Frame是一个 Google 浏览器的内嵌框架，大致是一个运行在客户端浏览器上面的插件，允许使用一些基于开放技术的新功能。http://www.google.com/chromeframe 不过目前好像也就支持 IE6 以上的版本而已。

使用此插件，用户可以通过 Internet Explorer 的用户界面，以 Chrome 内核的渲染方式浏览网页。Chrome Frame 会把最新版的 Chrome Webkit 内核和 JavaScript 引擎注入到 IE 中。它将使用 Chrome 的 WebKit 引擎处理网页，另外也支持 IE 所没有的 HTML5 等其他 open web 技术。

当你要使用 Chrome Frame 时，可以在地址前加 cf: ，就可以用 WebKit 核心浏览页面。对于开发者来说，如果想要浏览器使用 Chrome Frame 渲染你的网页，只需要在页面代码的加入这么一行即可让安装了 Frame 的 IE 启用 Frame。

在 64 位 Vista 平台上分别选取 IE7、IE8、安装 Chrome Frame 后的 IE7 和 IE8、Chrome 3 进行了 Sunspider JavaScript 基准测试，根据测试结果，安装 Chrome Frame 后的 IE7 速度提升了近 40 倍，安装该插件的 IE8 速度提升了 10 倍，两者在 JavaScript 处理速度上基本和 Google Chrome 持平。

GitHub可以托管各种 git 库，并提供一个 web 界面，但与其它像 SourceForge 或 Google Code 这样的服务不同，GitHub 的独特卖点在于从另外一个项目进行分支的简易性。

相比 CVS/SVN，Git 的优势：
－支持离线开发，离线 Repository
－强大的分支功能，适合多个独立开发者协作
－速度块
更多的细节参见 http://mgcore.com/viewthread.php?tid=15556
Git 使用指南 http://www.linuxgem.org/user_files/linuxgem/Image/git-tutor.pdf

模式编程（programming to the patterns）

JS 的通用库最基本的目的是给你解决浏览器兼容性差异，Prototype 和 JQuery 是做得最好的两个库。

JQuery 对 Dom 的 DSL 化封装，还有对 method chain 的大量使用，几乎让你感觉在声明行为，所以它让非常多的对啰嗦的 Dom 编程厌烦的前端程序员迅速 “上瘾”。但是，我们知道 DSL 化的 JQuery 还不够，因为它很好的解决了可读，但是并不一定容易维护（尤其是过度使用 method chaning）。

其实 Javascript 的各种 Widget 库（如 ExtJS、Dojo 和 YUI 的 widget 库）都做到更好的复用。缺点是目前的 widget 库中的高级控件都严重的绑架了 Dom 结构，造成自己修改 Dom 结构比较麻烦。而没有使用 Micro Format 这样的基于标准的弱耦合，这是一个很大的问题。

MicroFormat（微格式）是什么，WikiPedia 上面有描述：

A Microformat (sometimes abbreviated μF or uF) is a way of adding simple semantic meaning to human-readable content which is otherwise, from a machine’s point of view, just plain text. They allow data items such as events, contact details or locations, on HTML (or XHTML) web pages, to be meaningfully detected and the information in them to be extracted by software, and indexed, searched for, saved or cross-referenced, so that it can be reused or combined.

Both Firefox 3 and Internet Explorer 8 will support micro formats natively. If you cannot wait for the next version of Firefox or IE, then you can download the Operator micro format extension for Firefox and start testing your site.

这是一个最简单的从 POSH（Plain Old Semantic HTML）变成 hCard Micro Format 的方法：

这样一来，这些本来含义难以使用爬虫和机器猜测的片段都有了具体含义。

MooTools（http://mootools.net/）是一个简洁，模块化，面向对象的开源 JavaScript web 应用框架。它为 web 开发者提供了一个跨浏览器 js 解决方案。在处理 js css html 时候。它提供了一个比普通 js 更面向对象的 document API。

MooTools 的优点：

1. 灵活，模块化的框架，用户可以选择自己需要的组件。
2.MooTools 符合 OO 的思想，使代码更强壮，有力，有效。
3. 高效的组件机制, 可以和 flash 进行更好的交互。
4. 对于 DOM 的扩展增强，使开发者更好的利用 document。

给出一个 MooTools 的实例：

var Animal = new Class({
    initialize: function(name){
        this.name = name;
    }
});

var Cat = new Class({
    Extends: Animal,
    talk: function(){
        return 'Meow!';
    }
});

var Dog = new Class({
    Extends: Animal,
    talk: function(){
        return 'Arf! Arf';
    }
});

var Animals = {
    a: new Cat('Missy'),
    b: new Cat('Mr. Bojangles'),
    c: new Dog('Lassie')
};

for(var animal in Animals)
    alert(animal.name + ': ' + animal.talk());

// alerts the following:
// Missy: Meow!
// Mr. Bojangles: Meow!
// Lassie: Arf! Arf!

介绍Raphaël，就得先说说 SVG，可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG 由 W3C 制定，是一个开放标准。SVG 严格遵从 XML 语法，并用文本格式的描述性

语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

SVG 图形格式优点：

1. 图像文件可读，易于修改和编辑
2. 与现有技术可以互动融合。例如，SVG 技术本身的动态部分（包括时序控制和动画）就是基于 SMIL 标准。另外，SVG 文件还可嵌入 JavaScript（严格的说应该是 ECMAScript) 脚本来控制 SVG 对象
3. SVG 图形格式可以方便的建立文字索引，从而实现基于内容的图像搜索
4. SVG 图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果
5. SVG 图形格式可以用来动态生成图形。例如，可用 SVG 动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户

还有一个概念叫 VML，VML 是 The Vector Markup Language(矢量可标记语言) 的缩写。VML 用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。

Raphaël 正是将 VML 和 SVG 结合起来的 JavaScript 库，看如下的网页，你能想象这些图像加起来只有 20K 么？

http://raphaeljs.com/上面有好多 DEMO，体验一下吧。

Frontend Performance 指的是页面展示性能，在 Best of Steve 的 slider 中有此介绍：

YSlow（分析网页，并提出如何提高其性能的基础上一套规则）最有效的途径包括：

使用 CSS sprites（CSS 精灵，把一些散开的小图片合并成一张大图片）
CDN（Content Delivery Network，即内容分发网络，将网站的内容发布到最接近用户的网络” 边缘”，使用户可以就近取得所需的内容）
配置 ETags（实体标签是服务器和浏览器用于确定浏览器中缓存的组件和服务器中的是否对应的一种机制，如果 ETag 匹配，会返回 HTTP304）
使用 AJAX GET 请求
减少 DOM 中 #数量
减少 404 页面
尽量避免使用 image filter，这个东西运行时会锁死浏览器
优化收藏夹图标（favicon）
加速页面的有效途径包括：
延迟 JS 加载
去除无用 CSS
使用有效的 CSS 选择器
优化图片
优化 CSS 和 JS 的顺序
使用代理缓存

详见 http://www.slideshare.net/souders/jsconf-us-2010

JSConf2010 的重要议题之一：node.js。

服务器端 JavaScript 不是个新概念。其实老早就有了，从九六年 Netscape 普及 JavaScript 的时候，服务器端和客户端都是考虑到了的，只不过只有客户端健壮发展起来了，服务端的故事直到现在才被慢慢提起。

最大的优势，不过是统一了服务端和客户端的开发语言，真正可以看到客户端服务端一起开发和一统天下的格局，兴许对开发人员的要求能降低？可以真正看到服务端的代码到了客户端一样重用。不仅仅是数据模型，也保证了一些业务逻辑可以同样地被执行。

JavaScript 引擎的发展，性能上看 Chrome 似乎是目前最好的。

JavaScript 可以和 UQL 的创意结合起来，通过简单的代码，开发快速丰富的互联网应用。另外，现在已经有 JavaScript 库来调用 C＋＋代码了，即调用本地代码。

看看基于事件的 node.js 吧。

顺便提一下事件模型和线程模型。事件模型比如 Apache，对每一个请求分配到一个合适的线程中去处理，对于一些占用线程时间较长的应用，长连接的应用，扩展性就不足了。

安装：

./configure   
make   
make install

一个 Hello, World 服务端演示（example.js）：

include("/utils.js");   
include("/http.js");   
createServer(function (req, res) {   
    setTimeout(function () {   
        res.sendHeader(200, {"Content-Type": "text/plain"});   
        res.sendBody("Hello World");   
        res.finish();   
    }, 2000);   
}).listen(8000);   
puts("Server running at http://127.0.0.1:8000/");

然后执行：

/usr/local/bin/node example.js

服务端就部署好了。

详细教程请参见：http://www.grati.org/?p=181

官网 http://nodejs.org/

这个是个聊天工具的例子，服务端和客户端都是同质的 JavaScript：http://chat.nodejs.org/

文章未经特殊标明皆为本人原创，未经许可不得用于任何商业用途，转载请保持完整性并注明来源链接《四火的唠叨》

Leave a Reply Cancel reply