桌面应用程序员简单尝试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的一些其实尝试。具体做法如下:

  1. 在wordpress中安装feed json插件,暴露json的接口
  2. 始建一个html文件部署到网站到底目录
  3. 每当官网被创造一个栏目块(支持于定义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">
                    : 

                </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对象AngularJS被提供一个而绑定的数组属性为界面(即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)

相关文章