window.location.hash 加载不同的模块实例

利用window.location.hash去加载不同的模块

主要流程如下：

1、架构和基础代码

    xxEmitter.on(xx_EVENT.NETWORK_STATUS_CHANGED, __main__);

    function __main__() {
        shellcmd.log('启动::NC注册页面及渲染')
        xxEmitter.off(xx_EVENT.NETWORK_STATUS_CHANGED, __main__);
        NC.Pages.init({
            switchStyle: NC.Pages.SwitchStyleEnum.NONE,
            defaultPage: 'myapp',
            navigator: 'hash',
            hash: [
                ... ,
                {url: '/myapp', name: 'myapp'},
                ...
            ]
        });
    }

NC是一个页面总管，NC.Pages直接管理页面。执行 _ _ main _ _( ) ，初始化NC.Pages。

2、响应事件，改变 hash 的值

$(document).on("click", "#appbox-myapp", function () {
    window.location.href = "#/myapp";
});

在文档加载完毕后，点击“我的应用”,执行上面这段代码，window.location.hash 的值改变。

3、监听hashchange

NC.Pages 初始化中添加 hashchange 的监听

 window.addEventListener('hashchange', function () {
        that._hashChanged();
 });

4、_hashChanged( ) 实现不同模块的加载

 _hashChanged: function () {
    //在这里要处理一下网页是hash还是url的queryString
    var _hash = location.hash.substr(1);


    //pageList是NC的属性,所有的page.js
    //在引入时都会注册到pageList里 (NC.pageList、 NC.pages ....)
    for (var i = 0; i < pageList.length; i++) {
        var _regex = new RegExp(pageList[i].partten);
        var _result = _regex.exec(_hash), 
            paramsObj = {}, 
            param;

        if (_result) {
            var _params = _result.slice(1);
            //将取到的数据与送入的形参配对生成新的对象
            //用以传入pageLoad事件（hash去匹配页面的字段）
            while (param = namedParam.exec(pageList[i].url)) {
                var _value = _params.shift();
                if (!_value.length) {
                    throw new Error('实参与形参不匹配');
                }
                paramsObj[param[1]] = _value;
            }
            this.go(pageList[i].name, paramsObj);  //加载对应hash的模块
            break;
        }
        if (i == (pageList.length - 1)) {
            throw new Error('匹配形参的页面无法找到');
        }
        continue;
    }
},