博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
桌面应用程序员简单尝试Rich JavaScript Application
阅读量:6240 次
发布时间:2019-06-22

本文共 1555 字,大约阅读时间需要 5 分钟。

虽然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文件如下:

    

上面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),这样的应用具有良好的交互性,可以完成复杂的数据操纵。

这里有一篇参考文章,值得一读:

转载地址:http://ttbia.baihongyu.com/

你可能感兴趣的文章
mysql AM/PM to 24 hours fromat
查看>>
远程唤醒UP Board
查看>>
网页打印
查看>>
Loading——spin.js
查看>>
Hadoop完全分布式环境搭建(四)——基于Ubuntu16.04安装和配置Hadoop大数据环境...
查看>>
Mule ESB工程的部署
查看>>
分离被碰撞物体, 求碰撞冲量
查看>>
js移动端 可移动滑块
查看>>
【kruscal】【最小生成树】poj3522 Slim Span
查看>>
jquery ajax提交表单数据的两种方式
查看>>
hdu 2102 A计划-bfs
查看>>
学习集合
查看>>
18校招借鉴
查看>>
JAVA第三次作业
查看>>
2017ICPC北京 J:Pangu and Stones
查看>>
Pandas 数据清洗保存
查看>>
SpringBoot + nodeJS + zookeeper 搭建微服务示例
查看>>
《互联网时代》第二集·浪潮
查看>>
8.10 exec函数
查看>>
Shell命令-文件及内容处理之sort、uniq
查看>>