windows8 Metro APP JavaScript开发从零开始 - 基础篇（二）

最新推荐文章于 2024-09-14 18:52:56 发布

代码民工_代号9527

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/mr19830707/article/details/8424078

版权

经验分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在项目被创建完毕后, 第一个被自动打开的文件就是 default.js .

这个文件是整个应用运行的第一个js(内置的bas.js等除外)

与以住不同的是第六行的代码.

WinJS.Binding.optimizeBindingReferences = true;

这行代码是在vs2012 rtm版中被加入的. 其作用是全局设定是否防止自动设置元素ID. 也就是在数据绑定过程中, 是否阻止其自动给数据容器自动设定一个ID.

通常情况下,是不需要自动设定ID的. 用以避免Id的冲突.

由于default.js中的代码并不多. 我直接把注释写在代码中全都贴上来. 大家看得也直观!

(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;
    //给应用实例 添加 事件监听, 当应用启动后要执行的代码
    app.addEventListener("activated", function (args) {
        //确保在应用运行中(不是在挂起状态) 才执行其中的代码.
        if (args.detail.kind === activation.ActivationKind.launch) {
            //这里的判断作用 是区分 应用是全新执行的, 还是从挂起中被恢复的.
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { //全新执行时, 执行
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else { //挂起中恢复时, 执行!
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            //当应用运行时, 判断是否有 被保存的历史数据.  一般为应用挂起时保存在session中的数据.
            if (app.sessionState.history) {
                nav.history = app.sessionState.history;
            }
            //当页面的控件都准备好之后, 跳转到指定页面
            //如果nav.location有值,则跳转到 nav.location中保存的页面.   如果nav.location没有值,则跳转到应用首页
            /*
            说明一下下: 
            1) nav.location有值, 是因为应用在被挂起时所停留的页面的值. 应用被挂起后, 这个值是不会消失的.
               所以在恢复运行时, 这里就可以直接跳转到挂起之前停留的页面. 这部分代码是新增的, 在vs2012 rtm之前的模版中是没有这部分代码的.
            2) nav.location没值, 证明是全新执行的应用. 则跳转到应用首页.  
               应用首页在哪设置?  请看文章中的说明.
            */
            args.setPromise(WinJS.UI.processAll().then(function () {
                if (nav.location) {
                    nav.history.current.initialPlaceholder = true;
                    return nav.navigate(nav.location, nav.state);
                } else {
                    return nav.navigate(Application.navigator.home);
                }
            }));
        }
    });

    //oncheckpoint 是用来监听 应用挂起事件的.
    //默认给出的代码是 保存当前的历史操作数据到session中.
    //上面的代码 app.sessionState.history 中的值就是这里设置的.
    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. If you need to 
        // complete an asynchronous operation before your application is 
        // suspended, call args.setPromise().
        app.sessionState.history = nav.history;
    };

    //这个不用说了吧..哈哈
    app.start();
})();

下面作一下说明:

session: 从事过服务端开发的同学们都知道 session这个东西. 我们的应用最终是安装在客户本地计算机上的, 那session要怎么保存呢? 当然没问题.

WinJS.Application.sessionState这个对象就是所谓的session. 我们可以按照js操作对象的方式随意为它添加和删除成员.如:

 WinJS.Application.sessionState.someOne = {
    userID: 'test1',
    pwd: '******'
}

或

 WinJS.Application.sessionState['someOne'] = 'someString'

我们定义的值是保存在本地localState区域的. 它的地址是 C:\Users\[你的计算机用户名]\AppData\Local\Packages\[你的应用对应的packageID]\LocalState

其中的_sessionState.json文件. 与传统的session一样,当我们的应用会话结束后, session中的值也被清空.

应用的home页:

在default.html页面可以找到下图中显示的元素, 应用程序的home是在data-win-options中定义的.

<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/groupedItems/groupedItems.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
    </div> -->
</body>

而这个div 被解释为一个data-win-control 即控件. 而这个控件是模版生成时由开发平台帮我们实现的. 它是一个自定义控件.

Application.PageControlNavigator就是自定义的控件. Application是命名空间,就是一个对象. PageControlNavigator就是一个class了. (class就是自定义的类).

自定义类的代码在 js文件夹下的 navigator.js中.

即然说到了自定义类, 那我就简单说一下vs2012 javascript项目中如何自定义一个类.

语法是:

WinJS.Class.define(function, object, object);

第一个参数是一个方法, 可以理解成是主入口函数. 相当于 console 编程中的main方法. 这里面写的是逻辑.

第二个参数是一个对象, 我们可以把实现功能的函数放在这里. 比如入口函数中调用了a 方法, 我们就把a方法的具体实现写在这里.

第三个参数是一个对象, 这里存放类中需要引用的静态变量等. (这个使用率不高)

大概写个例子, 类的自定义我会在之后的文章中详细说明.

var myClass = WinJS.Class.define(function(options){
      this.name = options.name; //类的成员变量
      this.xx = options.xx;            //类的成员变量    这部分可以看成是 构造函数作的事情.
      var obj = document.querySelector('#someid');  //这句的意思就是想区分开 公有变量和私有变量的区别.
      this.init(obj);    //这里就是逻辑调用,  我们完成功能需要调用 Init方法, 而方法的具体实现放在第二个参数中.
},
{
        init: function(tag){
                //我想说的是,  两个参数之间共用一个上下文.   所以在init方法中可以直接调用 this.name
                tag.innerHTML = this.name;
        },
        otherFunction: function(){
               //do something
        }
});

这时, 我们就可以调用这个自定义类了.

var   obj = new myClass({
        name: 'test',
        xx: 'xx'
})

那么这个default.js页中的代码我们就说完了. 下次给大家详细说一下 navigator.js 文件中的代码.

回见!!!!

代码民工_代号9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录