本文基于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函数去实现相关页面。