デスクトップアプリケーションプログラマは簡単にRich JavaScript Appplicationを試してみます.

4901 ワード
appication
10年前にしばらくWebアプリケーションの開発をしましたが、ASP.NET WebForms(在.NET 1.1ベース)に基づくWebアプリケーション開発の枠組みがあります.しかし、その後ずっと作ってきたのはデスクトップタイプのアプリケーションです.例えば、SmartCientはSilverlightのRIAに基づいています.甚だしきに至っては、今まで弊社の製品は純粋なクライアントのWinFormsアプリケーションです.だから、徹底的にデスクトップのアプリケーションプログラマーになるべきです.久しぶりにJavaScriptのようなものに触れました.
最近JavaScriptに興味を持つようになったのは、次のような理由にほかならない.
  • 最近1年のNode.jsは非常に熱いので、もっと深く理解したいです.特にAzure(及びWebMatrix)はNode.jsに対して強力に支持してくれます.
  • ASP.NET MVCにMVMのJavaScriptライブラリを内蔵しています.
  • Windows 8 AppはJavaScriptとHTML 5を使って開発できます.デスクトップアプリケーションでもJavaScriptは将来的に活躍できる場所があります.
  • マイクロソフトはType Scriptを発売しました.また、以前はマイクロソフトの非公式ScriptとCoffeeScriptが注目され続けています.JavaScriptをより簡単に利用して、大型の更なるRichを開発したいという人々の願いが表れています.
    私が作った簡単な試みのシーンは以下の通りです.
  • 会社の公式サイトはphpで構築しています.phpにあまり詳しくないです.元のウェブサイトの枠組みに対しても調整したくないです.
  • 社のブログはワードプレスに基づいて
    • を構築する.
  • は、公式サイトに自動的にブログの最新記事リストを表示する必要があります.
    • 以前からKnockoutのことを勉強していましたので、昨日はKOに基づいて上記のシーンを実現することにしました.具体的なやり方は以下の通りです.
  • wodpressにfeed Jsonプラグインをインストールし、jsonのインターフェース
    • を暴露する.
  • .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>
    &噫13;
    .csharpcode.csharpcode pre&唴13;
    ｛啝13
    font-size:small;&唵13;
    カラー:black;
    font-family:consosolas、「Courier New」、courier、monoospace;
    background-カラー:&菗菗13;
    //white-space:pre;*/&噫13;
    ｝&{13;
    .csharp code pre{margin:0 em;}&萶13;
    .csharrpcode.rem{color=0000 ff}&菷13;
    .csharpcode.kwrd{color=blue 0000 ff}&菗13;
    .csharpcode.str{color=blue 006080}&菷13;
    .csharpcode.op{color=0000 c 0}&菗13;
    .csharpcode.preproc{color=0000 cc 6633;}&菷13;
    .csharpcode.asp{background-カラー}と菗13;
    .csharrpcode.｛啱800000;｝&唵13;
    .csharpcode.atr{color=0000 ff}&菗13;
    .csharpcode.alt&啝13;
    ｛啝13
    background-色:菗f 4 f 4;&萶13;
    width:100%&菗13;
    margin:0 em;
    ｝&{13;
    .csharpcode.lnum{color=0000 ff}
    上のHTMLファイルは二つの部分に分けられています.第一の部分は画面を表示するHTMLであり、第二の部分はエンティティオブジェクトの定義であり、データを取得してバインディングを実行するJavaScriptコードである.
    第一の部分ではMVVM思想の結合機構を使用しているので、私にとっては非常に熟知しています.これとXAMLはあまり区別がありません.
    第二の部分では、まずjQueryを利用してJSONデータを取得し、バインディング可能なJavaScriptオブジェクトに変換します.そして、View Modelオブジェクトにバインディング可能な配列属性を界面(すなわちblogs属性)に提供する.
    上記の機能は簡単ですが、いわゆるRich JavaScript Appleicationやマイクロソフトと呼ばれるScale JavaScriptアプリに触れたと思います.すなわち、
  • jQueryのようなフレームワークを使用して、DOMの動作
    • を簡略化する.
  • は、KnockoutJSまたはAnglarJSのようなライブラリまたはフレームを使用して、データレンダリングを簡略化し、挙動処理
  • Coffee ScriptまたはType Scriptを使用してJavaScriptの作成を簡略化する
  • は、ブラウザを介して動作することができる純粋なクライアントアプリケーションを開発し、また、サービス端末との相互作用能力(RESTfulに基づいて一般的に)を備えており、このようなアプリケーションは良好な相互作用を有し、複雑なデータ操作を行うことができる.
    • ここには参考文章があります.一読の価値があります.
    Rich JavaScript Appplications–the Seven Fraameweorks（Throne of JS、2012）
    初心者学習javascript正規表現