桌面应用程序员简单尝试RichJavaScriptApplication

虽然10年前搞过一段时间的Web应用开发，且为所在企业设计了一个基于ASP.NET WebForms（在.NET 1.1的基础上）的Web应用开发框架。但是，后来一直做的都是桌面类的应用，比如SmartClient，基于Silverlight的RIA，甚至到现在，我们公司的产品就是一个纯客户端的单机WinForms应用。所以，我应该是一个彻彻底底的桌面应用程序员了。已经很久不碰Javascript这样的东西了。

最近开始对Javascript感兴趣的原因，不外乎下面几个：

• 最近1年Node.js的极其火热，想深入了解一下，尤其Azure（及WebMatrix）对Node.js强力支持更是加深了我的兴趣；
• ASP.NET MVC中内置了一个MVVM的Javascript库——KnockoutJS，想知道为什么微软对KO情有独钟；
• Windows 8 App可以使用Javascript和HTML5来开发，可见就算是桌面应用，Javascript未来也有用武之地；
• 微软推出了TypeScript，以及之前微软非官方的Script#，还有CoffeeScript的被持续关注，都说明人们希望以更加简单的方式来使用Javascript开发大型更加Rich的应用程序

我做的简单尝试的场景如下：

• 公司官网用php构建的，对php不是太熟悉，也不想去对原有网站框架做调整；
• 公司博客基于wordpress构建
• 需要在官网中自动显示博客的最新文章列表

由于之前已经开始学习Knockout的东西，所以昨天决定基于KO来实现上述场景，这可以说是对KO的一点实际尝试。具体做法如下：

1. 在wordpress中安装feed json插件，暴露json的接口
2. 创建一个html文件部署到网站根目录
3. 在官网中创建一个栏目块（支持自定义HTML），在其中插入iframe元素，指向上面的html文件。之前尝试过在HTML中直接实现代码，但是由于jQuery版本会冲突，所以改用iframe。

这个简单应用程序的HTML文件如下：

    

        
"foreach: blogs">
            

                "attr: {href: $data.permalink, title: $data.title}" target="_blank">
                    "text: $data.date">: 
                "text: $data.title">
                
            
        
        "blog" title="More" target="_blank">More
    
    

上面HTML文件分作两个部分。第一个部分就是用于显示界面的HTML，第二部分是实体对象的定义和获取数据执行绑定的Javascript代码。

在第一部分中，由于使用了MVVM思想的绑定机制，对于我而言是非常熟悉的，这个和XAML没有太多区别。

第二部分中，首先利用jQuery获取JSON数据并转换为可绑定的Javascript对象（这里真的简单的让我感到惊喜），可绑定是通过ko.observable来实现的；然后在ViewModel对象中提供一个可绑定的数组属性给界面（即blogs属性）。

上述功能虽然简单，但是我觉得已经触摸到了所谓Rich Javascript Application或微软称之为 Scale Javascript Application的实现途径了。即：

• 使用jQuery这样的框架来简化DOM的操作
• 使用KnockoutJS或者AngularJS这样库或框架来简化数据呈现，行为处理
• 使用CoffeeScript或者TypeScript来简化Javascript的编写
• 开发可以跨浏览器运行的纯客户端应用，也具备和服务端的交互能力（一般基于RESTful），这样的应用具有良好的交互性，可以完成复杂的数据操纵。

这里有一篇参考文章，值得一读：

Rich Javascript Applications – the Seven Frameworks (Throne of JS, 2012)