javascript
桌面应用程序员简单尝试Rich JavaScript Application
雖然10年前搞過(guò)一段時(shí)間的Web應(yīng)用開(kāi)發(fā)，且為所在企業(yè)設(shè)計(jì)了一個(gè)基于ASP.NET WebForms（在.NET 1.1的基礎(chǔ)上）的Web應(yīng)用開(kāi)發(fā)框架。但是，后來(lái)一直做的都是桌面類(lèi)的應(yīng)用，比如SmartClient，基于Silverlight的RIA，甚至到現(xiàn)在，我們公司的產(chǎn)品就是一個(gè)純客戶(hù)端的單機(jī)WinForms應(yīng)用。所以，我應(yīng)該是一個(gè)徹徹底底的桌面應(yīng)用程序員了。已經(jīng)很久不碰JavaScript這樣的東西了。
最近開(kāi)始對(duì)JavaScript感興趣的原因，不外乎下面幾個(gè)：
- 最近1年Node.js的極其火熱，想深入了解一下，尤其Azure（及WebMatrix）對(duì)Node.js強(qiáng)力支持更是加深了我的興趣；
- ASP.NET MVC中內(nèi)置了一個(gè)MVVM的JavaScript庫(kù)——KnockoutJS，想知道為什么微軟對(duì)KO情有獨(dú)鐘；
- Windows 8 App可以使用JavaScript和HTML5來(lái)開(kāi)發(fā)，可見(jiàn)就算是桌面應(yīng)用，JavaScript未來(lái)也有用武之地；
- 微軟推出了TypeScript，以及之前微軟非官方的Script#，還有CoffeeScript的被持續(xù)關(guān)注，都說(shuō)明人們希望以更加簡(jiǎn)單的方式來(lái)使用JavaScript開(kāi)發(fā)大型更加Rich的應(yīng)用程序
我做的簡(jiǎn)單嘗試的場(chǎng)景如下：
- 公司官網(wǎng)用php構(gòu)建的，對(duì)php不是太熟悉，也不想去對(duì)原有網(wǎng)站框架做調(diào)整；
- 公司博客基于wordpress構(gòu)建
- 需要在官網(wǎng)中自動(dòng)顯示博客的最新文章列表
由于之前已經(jīng)開(kāi)始學(xué)習(xí)Knockout的東西，所以昨天決定基于KO來(lái)實(shí)現(xiàn)上述場(chǎng)景，這可以說(shuō)是對(duì)KO的一點(diǎn)實(shí)際嘗試。具體做法如下：
這個(gè)簡(jiǎn)單應(yīng)用程序的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文件分作兩個(gè)部分。第一個(gè)部分就是用于顯示界面的HTML，第二部分是實(shí)體對(duì)象的定義和獲取數(shù)據(jù)執(zhí)行綁定的JavaScript代碼。
在第一部分中，由于使用了MVVM思想的綁定機(jī)制，對(duì)于我而言是非常熟悉的，這個(gè)和XAML沒(méi)有太多區(qū)別。
第二部分中，首先利用jQuery獲取JSON數(shù)據(jù)并轉(zhuǎn)換為可綁定的JavaScript對(duì)象（這里真的簡(jiǎn)單的讓我感到驚喜），可綁定是通過(guò)ko.observable來(lái)實(shí)現(xiàn)的；然后在ViewModel對(duì)象中提供一個(gè)可綁定的數(shù)組屬性給界面（即blogs屬性）。
上述功能雖然簡(jiǎn)單，但是我覺(jué)得已經(jīng)觸摸到了所謂Rich JavaScript Application或微軟稱(chēng)之為 Scale JavaScript Application的實(shí)現(xiàn)途徑了。即：
- 使用jQuery這樣的框架來(lái)簡(jiǎn)化DOM的操作
- 使用KnockoutJS或者AngularJS這樣庫(kù)或框架來(lái)簡(jiǎn)化數(shù)據(jù)呈現(xiàn)，行為處理
- 使用CoffeeScript或者TypeScript來(lái)簡(jiǎn)化JavaScript的編寫(xiě)
- 開(kāi)發(fā)可以跨瀏覽器運(yùn)行的純客戶(hù)端應(yīng)用，也具備和服務(wù)端的交互能力（一般基于RESTful），這樣的應(yīng)用具有良好的交互性，可以完成復(fù)雜的數(shù)據(jù)操縱。
這里有一篇參考文章，值得一讀：
Rich JavaScript Applications – the Seven Frameworks (Throne of JS, 2012)
轉(zhuǎn)載于:https://www.cnblogs.com/redmoon/archive/2012/10/12/2721427.html
總結(jié)
以上是生活随笔為你收集整理的桌面应用程序员简单尝试Rich JavaScript Application的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 闭包漫谈
- 下一篇： gradle idea java ssm