利用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;
}
},