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

就算十年前搞过1段时间的Web应用开发,且为所在集团布置了一个依照ASP.NET
WebForms(在.NET
一.一的功底上)的Web应用开发框架。不过,后来一贯做的都是桌面类的行使,比如斯马特Client,基于Silverlight的奥德赛IA,甚至到未来,我们公司的产品正是3个纯客户端的单机WinForms应用。所以,作者应当是贰个彻彻底底的桌面应用程序员了。已经很久不碰JavaScript那样的事物了。

近年来开首对JavaScript感兴趣的因由,不外乎上面多少个:

  • 如今1年Node.js的最为火热,想深刻摸底一下,尤其Azure(及WebMatrix)对Node.js强力协助越发加剧了本身的志趣;
  • ASP.NET
    MVC中放置了一个MVVM的JavaScript库——KnockoutJS,想明白为啥微软对KO情有独钟;
  • Windows 捌App能够动用JavaScript和HTML伍来支付,可知就算是桌面应用,JavaScript现在也有用武之地;
  • 微软推出了TypeScript,以及此前微软非官方的Script#,还有CoffeeScript的被频频关注,都证实人们盼望以进一步简明的措施来采取JavaScript开发大型特别Rich的应用程序

笔者做的不难尝试的气象如下:

  • 公司官网用php营造的,对php不是太纯熟,也不想去对原始网站框架做调整;
  • 商厦博客基于wordpress营造
  • 亟待在官网中自行展现博客的新式篇章列表

是因为事先曾经初阶学习Knockout的事物,所以前几天控制依据KO来达成上述现象,那能够说是对KO的壹些实在尝试。具体做法如下:

  1. 在wordpress中安装feed json插件,暴露json的接口
  2. 创制2个html文件布署到网址根目录
  3. 在官网中成立2个栏目块(扶助自定义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文件分作七个部分。第2个部分就是用来浮现界面的HTML,第三片段是实体对象的概念和获取数据执行绑定的JavaScript代码。

在率先片段中,由于应用了MVVM思想的绑定机制,对于自身而言是卓殊纯熟的,这么些和XAML没有太多差距。

其次部分中,首先使用jQuery获取JSON数据并更换为可绑定的JavaScript对象(那里确实简单的让自家倍感惊喜),可绑定是透过ko.observable来落到实处的;然后在ViewModel对象中提供三个可绑定的数组属性给界面(即blogs属性)。

上述成效即便不难,然而本人以为已经触动到了所谓Rich JavaScript
Application或微软号称 Scale JavaScript Application的贯彻途径了。即:

  • 行使jQuery那样的框架来简化DOM的操作
  • 使用KnockoutJS或然AngularJS那样库或框架来简化数据表现,行为处理
  • 使用CoffeeScript或者TypeScript来简化JavaScript的编写
  • AngularJS,支付能够跨浏览器运营的纯客户端应用,也存有和服务端的相互能力(一般依照RESTful),那样的行使具有得天独厚的交互性,能够做到复杂的数据控制。

此地有一篇参考文章,值得一读:

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

相关文章