WinJS 实战(1)-架构 (转载)

基于WinJS的Modern App 开发，对于不少开发人员来说是既熟悉又陌生。熟悉在于他是大家认识的Javascript, html,css ，陌生的是怎样更高效的去开发一个Modern App.这里我以凤凰微课为例，去说明问题，和大家交流希望大家也从中有点启示和给我一点意见。

         第一篇我想说说项目的架构。一个项目最重要的是架构，架构得好是事半功倍。windows 应用程序从早期的MFC,到Windows Form，再到WPF都离不开两种架构模式,MVC和MVVM。 至于大家喜欢哪个，江湖上都有不同的说法。到了现在的Modern App, 因为Javascript的引入，就变得有点令人困惑了。首先Javascript是一种灵活的语言，它没有具体的语法规定，这样导致了很多的不规范，例如变量的定义，其次，javascript有很多的第三方库是否可以手到拿来也是一个问题。对于这两个问题，我想和大家说说。

         在windows 8 应用程序中，javascript被改名做WinJS, 而他的原型是ECMASCRIPT 5。 这是一个新Javascript标准，既补充了javascript在面向对象中的缺陷，也可以规范javascript中的语法。而第三方的库例如jquery等是否使用？因为winjs的限制在现阶段还是蛮多的，不少第三方的库只能部分适应，哪怕是编译得来，也未必能通过审核。个人建议还是自己写，因为要有的基本上都有了。（这里或者不同人有不同观点，我也想听听大家的意见，在github上也有很多调用第三方库的例子建议大家上网找找）。

       Modern App 我的习惯还是用MVC，这样简单。而MVVM我不是不喜欢，只是个人习惯罢了。

        对于应用，现阶段大家习惯去访问一些api或者rss去拿取数据，按照习惯还是建议大家集中好url，避免变动，需要找来找去。我第一步是习惯添加一个url.js去把所有地址存储好。

       如：              (function () {                 "use strict";

                 var mainTypeUrl = "API URL";                      

                 WinJS.Namespace.define("URL", {

                         MainURL: mainUrl

              });

             })();

        对于数据的获取，在WinJS中是通过promise模式去实现数据的加载，这个方法也可以抽象出来，毕竟这些都是重重复复的的工作。这个我习惯当它models.

           (function () {

                 "use strict";

                  var result = WinJS.Class.define(function (apiUrl) {

                   this.apiUrl = apiUrl;

               }, {                      loadData: function () {                     return WinJS.xhr({ url: this.apiUrl});                 }

             });

              WinJS.Namespace.define("Data", {                     result: result              });

        })();

      

        接下来是规划好页面的事情了，毕竟每个页面都有一个对应的js/css/html，而js 就是controller, html/css就是view了。

       

还有一点要说说的，页面会放在一个归一的文件夹内，这样方便整理(希望大家养成良好的习惯，免得产生问题时才来后悔就不好了)。好吧也看看最后的一个结构：