桌面应用程序员简单尝试Rich JavaScript Application

虽然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的一点实际尝试。具体做法如下：

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

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

<body><div><div data-bind="foreach: blogs"><p><a data-bind="attr: {href: $data.permalink, title: $data.title}" target="_blank"><span data-bind="text: $data.date"></span>: <span data-bind="text: $data.title"></span></a></p></div><a href="blog" title="More" target="_blank">More</a></div><script type='text/javascript'>function Blog(data) {this.title = ko.observable(data.title);this.permalink = ko.observable(data.permalink);this.date = ko.observable(data.date.substr(0, 10));}function BlogViewModel() {var self = this;self.blogs = ko.observableArray([]);$.getJSON("/blog/?feed=json", function (allData) {var mappedBlogs = $.map(allData, function (item) { return new Blog(item) });self.blogs(mappedBlogs);});}ko.applyBindings(new BlogViewModel());</script>
</body>

上面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)

转载于:https://www.cnblogs.com/redmoon/archive/2012/10/12/2721427.html

桌面应用程序员简单尝试Rich JavaScript Application相关推荐

JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
好程序员Java教程分享JavaScript面试问题及答案（一）
好程序员Java教程分享JavaScript面试问题及答案(一) 1.使用 typeof bar === "object" 来确定 bar 是否是对象的潜在陷阱是什么?如何避免这个 ...
好程序员web前端分享javascript枚举算法
好程序员web前端分享javascript枚举算法,题目:在1,2,3,4,5 五个数中,我们随机选取 3个数.问有多少种取法?并且把每种取出数的方法列举出来. 乍看这道题,其实感觉没什么难度.三个f ...
好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
好程序员前端教程之JavaScript闭包和匿名函数的关系详解...
好程序员前端教程之JavaScript闭包和匿名函数的关系详解本文讲的是关于JavaScript闭包和匿名函数两者之间的关系,从匿名函数概念到立即执行函数,最后到闭包.下面一起来看看文章分析,希望你 ...
每个程序员都需要学习 JavaScript 的7个理由
最近在和招聘经理交流现在找一个好的程序员有多难的时候,我渐渐意识到了现在编程语言越来越倾重于JavaScript.Web开发人员尤其如此.所以,如果你是一个程序员,那么你应该去学习JavaScript ...
linux 桌面 v2ex,程序员：他人笑我桌面太凌乱，我笑他人看不穿
原标题:程序员:他人笑我桌面太凌乱,我笑他人看不穿在 V2EX 这个创意工作者社区每年都有晒桌面的讨论帖,其中不乏有很多程序员晒出他们"逼格"满满的桌面.在过去,DeepWork ...
每日一皮：程序员新手尝试新框架的时候
往期推荐每日一皮:在同一个项目上工作2年的样子... 每日一皮:当我突然有一个很棒的调试想法... 每日一皮:努力寻找Bug的程序员每日一皮:曾经的你是不是也这般天真? 每日一皮:当你开始研究一个 ...
前端 - 查找关键词 - 高亮 - 软考 - 程序员 - 简单编程算法计算
1.动态字符串替换所有关键词:new RegExp(K, 'gm'),K动态字符串,gm是表示替换所有动态字符 <!--源码来自原创:[小5]非常感谢您的支持,希望通过这些基础知识能够让您得到提 ...

桌面应用程序员简单尝试Rich JavaScript Application

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

桌面应用程序员简单尝试Rich JavaScript Application相关推荐

最新文章

热门文章