路由器web界面分析(一)---把握整体架构

在工作中涉及到了web页面和底层交互问题，这里做下简单回顾。
本文基于hisi方案分析web界面整体架构。

页面初始化流程：

调用hsan.init(param,callback) 初始化，主要配置config.js中的数据到hsan对象。接着调用回调函数initMenu()，函数如下：

function initMenu(){
    var menu = new Menu({loadPage:"Status:Sta_Overview:SO_Overview"});
}

函数Menu(o)里面干了三件事：

1. 实例化父菜单new Parent 。函数Parent(m,menu)会调用
   Element.call(this,”TD:Menu_L1_Link”) 创建一个元素，并且绑定一个onclick
   事件，而onclick函数会调用第二级菜单的onclick函数
2. 实例化第二级菜单new PannelChild 。函数PannelChild(m,menu,p)会调用 Element.call(this,”TD:Menu_L2_Link”) 创建一个元素，并且绑定一个onclick
   事件，而onclick函数会调用第三级菜单的onclick函数
3. 实例化第三级菜单new threeChild 。函数threeChild(m,menu,p,r) 会调用
   Element.call(this,”TD:Item_L2”); 创建一个元素，并且绑定一个onclick
   事件，而onclick函数会调用hsan.load(m.name)。Hsan.load会调用
   $.initPage(name) 初始化页面。

接下来分析如何初始化页面
$.initPage(name) 初始化页面。
以“状态总览”为例子
页面流程分析：(以“状态总览”为例子)

在 initPage函数里面，
InitAppPanel(Pans[i])：每个Pans[i]创建一个”DIV”，里面依次创建关于title的”DIV”和关于content的”DIV”。
InitAppTag(Tags[j])：根据Tags[j].type初始化页面，Tags[j].type在config.js中定义好。

这里以“状态总览”为例子，如下图，tags表示Tags[j]，其下有type属性info_contextone和simple_tableone，会根据info_contextone调用initInfoContextone(tag)，会根据simple_tableone 调用initSimpleTableone(tag)。

initAppFunction(tempTag,name)：显示tag，并且调用第三级菜单init属性对应的函数。
里面会调用 .exec( .Apps[name].init)，这个函数会调用函数init_status_set()，可通过config.js文件中的Applications查找，如下图所示：

init_status_set()：状态总览
函数主要干了几件事：
1. 使用getRequestData函数，发送请求获取服务器的响应数据data
2. 调用nit_status_set的回调函数function(data)，并根据data，进行数据解析
3. setAppTagData(data);把解析后的数据显示在页面