路由器web界面分析(四)---学会追踪标签

本文基于hisi方案分析web界面整体架构。
主要是讲了web页面中Select、checkbox选择标签的追踪方法。以小见大，其他标签都可以用相同的方法去追踪。

Select选择标签的追踪方法：
以页面“网络—>网络设置—>网络连接—>IP协议版本”为例子。
搜索”IP协议版本”，到SDK中去查找，结果如下：

找到”WanIP_Mode_select_label”，去掉“_label”，在config.js中搜索“WanIP_Mode_select”，结果如下：

根据tags的类型，继续搜索，在SDK中找到如下：

initSimpleSelect的流程如下：
initSimpleSelect—>new SimpleSelectTag(tag)—>new DefaultSelect(tag)—>
—>options = eval($.getLan(tag.name + “_options”))
到了这里看到tag.name + “_options”，tag.name 即为WanIP_Mode_select，所以拼接之后的字符串为“WanIP_Mode_select_options”。继续查找WanIP_Mode_select_options，在SDK中找到，结果如下：

所以，options 里面存放的是一个数组[‘IPv4’,’IPv6’,’IPv4/IPv6’]。
接着function DefaultSelect(tag)里面会把options 里面的字符串加以处理，以便显示在界面。
打开页面，点击“IP协议版本”下拉菜单可以看到如下结果：

checkbox的追踪方法：
以页面“网络—>网络设置—>网络连接—>连接名称”为例子。
在页面找到 1_TR069_VOICE_R_VID_46 字符串
看上面的表头是“连接名称” 查找“连接名称”，结果如下图：

找到“wan_link_list_thead”，去掉“_thead”，在nc.js中查找”wan_link_list”
找到如下function SimpleTabBodycheckthree(tab){
if((tab.parent.parent.name==”wan_link_list”))
继续往上查找，一层一层调用，关系如下：
initPage:function(name)—> InitAppTag(tag) —> initSimpleTablethree(tag)—>
—>new SimpleTableTagthree(tag)—> new SimpleTablethree —>
—>new SimpleTabBodycheckthree(_this)—> if((tab.parent.parent.name==”wan_link_list”))
最后在function setAppTagData(data)中，会调用SimpleTablethree中的createTablecheck函数去实现相关页面。