浏览器与web前端通信的方法、web前端及系统的制作方法_3

文档序号:9810263阅读:来源:国知局
]本实施例定义src采用以下格式:mtt:service:act1n。
[0109]其中,mtt是字符串常量,service和act1n唯一决定一个命令的行为,service标识大类的行为,act1n标识大类下的细分行为。
[0110]通过这种通信方式,浏览器客户端对外提供的API都是异步接口,开发用户可以传入service和act1n标识命令的类型,并且以opt1n作为命令参数,sue作为成功回调函数,err作为失败的回调函数,由此,定义一个API接口的格式为:
[0111]browserApi (service, act1n, opt1n, sue, err)。
[0112]开发用户可以调用web前端提供的代码库,触发对客户端API接口的调用。其中,web前端的代码库具体可以为javascript代码库。
[0113]web前端响应开发用户触发的接口调用指令,会产生一个发送给浏览器客户端的请求事件,由此发起一个命令。
[0114]web前端对浏览器客户端发起一个命令前,会自动生成一个唯一的随机数作为id来标识该命令,即,生成一 id用以标识所述接口调用指令对应的请求事件。
[0115]步骤S102,所述web前端根据所述接口调用指令,获取所述请求事件的接口参数;
[0116]此外,web前端还会根据所述接口调用指令,获取所述请求事件的接口参数。该接口参数包括:请求事件的类型和请求事件的命令参数;其中,请求事件的类型通过上述service和act1n标识;请求事件的命令参数通过opt1n标识。
[0117]上述获取的请求事件的接口参数用于传送给浏览器客户端,便于浏览器客户端对请求事件进行处理。
[0118]步骤S103,所述web前端将所述请求事件、id以及所述接口参数存入全局变量命令队列中;
[0119]在web前端,还会维护一个命令队列queue (本实施例称全局变量命令队列)来保存这些请求事件(含有请求事件对应的id、请求事件的类型和请求事件的命令参数)。
[0120]web前端之所以通过全局变量命令队列保存请求事件、id以及接口参数,是考虑到开发用户在一段时间内可能会多次调用浏览器客户端API接口,而浏览器客户端不一定能够及时处理这些请求事件。因此,采用全局变量命令队列保存请求事件这些命令,分批发送给浏览器客户端,从而可以保证浏览器客户端合理安排请求事件的处理时机,提高了浏览器侧系统性能和数据处理的效率,同时也缓解了 web前端的数据处理压力。
[0121]步骤S104,所述web前端将所述全局变量命令队列发送至浏览器;
[0122]然后,web前端以预定格式,给iframe标签的src属性赋值,触发全局变量命令队列的发送;所述src属性包括用于标识所述请求事件的类型的service字段和act1n字段。
[0123]由此,通过给创建好的隐藏iframe的src赋值的方式,将包含请求事件及其相关参数的全局变量命令队列传达到浏览器客户端。
[0124]步骤S105,所述浏览器接收到所述全局变量命令队列后,从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数,对所述请求事件进行处理。
[0125]web前端通过给创建好的隐藏iframe的src赋值的方式,将全局变量命令队列传达到浏览器客户端时,会触发一个事件,如前所述,浏览器会及时捕获到这个事件。
[0126]在浏览器侧,浏览器客户端会捕获iframe标签的src属性格式及src属性值,并对src属性格式及src属性值进行判断,判断src属性格式是否为约定的格式,src属性值是否产生变化。
[0127]然后,根据所述iframe标签的src属性格式及src属性值,获取全局变量命令队列。
[0128]浏览器客户端在接收到所述全局变量命令队列后,调用全局的队列获取函数(getQueue),从所述全局变量命令队列中读取所述请求事件,以及请求事件的id、类型和命令参数。
[0129]然后,根据所述请求事件的id、类型和命令参数对所述请求事件进行相应处理。
[0130]浏览器客户端处理完成一条命令后,若处理成功,浏览器调用一个全局的成功处理函数(sucCallback),将处理结果、所述请求事件的命令参数及id传入所述web前端。
[0131]当处理失败后,所述浏览器调用全局的失败处理函数(errCallback),将处理结果、所述请求事件的命令参数及id传入所述web前端。
[0132]由此,通过上述三个全局函数getQueue, sucCallback和errCallback(全局的队列获取函数、全局的成功处理函数以及全局的失败处理函数),可以使对外API的回调函数保留现场,因为整个系统只需维护三个全局函数getQueue, sucCallback和errCallback,而后续web前端执行命令后的成功和失败回调函数不需要是全局的函数,且会保留该回调函数的现场。
[0133]更为具体地,如图5所示,上述步骤S105:浏览器接收到所述全局变量命令队列后,从所述全局变量命令队列中读取所述请求事件,以及接口参数,对所述请求事件进行处理可以包括:
[0134]步骤S1051,浏览器接收到所述全局变量命令队列后,调用全局的队列获取函数,从所述全局变量命令队列中读取所述请求事件,以及请求事件的id、类型和命令参数;
[0135]步骤S1052,所述浏览器根据所述请求事件的id、类型和命令参数对所述请求事件进行处理;
[0136]步骤S1053,当处理成功后,所述浏览器调用全局的成功处理函数,将处理结果、所述请求事件的命令参数及id传入所述web前端;
[0137]步骤S1054,当处理失败后,所述浏览器调用全局的失败处理函数,将处理结果、所述请求事件的命令参数及id传入所述web前端。
[0138]本实施例通过上述方案,通过创建的iframe标签,在web前端和浏览器客户端之间建立一座通信的桥梁,通过该桥梁,web前端可以主动和浏览器客户端通信,浏览器客户端也可以主动和web前端通信且保留函数现场,由此实现了 web前端与浏览器客户端之间的有效通信。
[0139]此外,在具体实现时,通过提供一个基本的javascript组件来封装上述的web前端和浏览器客户端间的通信方式和命令调用的队列维护机制,对外提供一个定制的API。开发用户只需通过引入这个轻量级的组件即可使用API,而不用关心内部实现,且没有任何潜规则,从而降低了开发用户学习使用API的成本。
[0140]如图6所示,本发明第二实施例提出一种浏览器与web前端通信的方法,在上述图4所不的第一实施例的基础上:
[0141]在上述步骤S102,web前端根据所述接口调用指令,获取所述请求事件的接口参数之后,还包括:
[0142]步骤S106,所述web前端将所述id作为key值,将所述成功回调函数和失败回调函数作为value值存入一匹配对象中。
[0143]在上述步骤S105之后还包括:
[0144]步骤S107,web前端根据所述浏览器对所述请求事件的处理结果,进行相应操作。
[0145]本实施例与上述图4所示的第一实施例的区别在于,本实施例还包括web前端对浏览器客户端处理结果进行相应操作的方案。
[0146]具体地,在本实施例中,web前端根据接口调用指令,获取请求事件的接口参数中还包括:请求事件的成功回调函数和失败回调函数。
[0147]其中,web前端会将获取到的请求事件的id作为key值,将请求事件的成功回调函数和失败回调函数作为value值存入一匹配对象中。
[0148]之后,web前端根据浏览器对请求事件的处理结果,进行相应操作时,具体采用以下方案:
[0149]在浏览器对请求事件处理成功后,web前端根据请求事件的id,从所述匹配对象中找到对应的成功回调函数,并执行;在所述浏览器对所述请求事件处理失败后,所述web前端根据请求事件的id,从所述匹配对象中找到对应的失败回调函数,并执行。
[0150]以下详细阐述浏览器客户端处理请求,以及web前端获得浏览器客户端响应后进行相应操作的具体过程:
[0151]浏览器客户端在接收到全局变量命令队列后,调用全局的队列获取函数(getQueue),从全局变量命令队列中读取请求事件,以及请求事件的id、类型和命令参数。
[0152]然后,根据请求事件的id、类型和命令参数对请求事件进行相应处理。
[0153]浏览器客户端处理完成一条命令后,若处理成功,浏览器调用一个全局的成功处理函数(sucCallback),将处理结果、请求事件的命令参数及id传入web前端。web前端根据接收到的id从匹配对象中找到对应的成功回调函数,并执行。
[0154]当浏览器处理请求事件失败后,浏览器调用全局的失败处理函数(errCallback),将处理结果、所述请求事件的命令参数及id传入所述web前端。web前端根据接收到的id从匹配对象中找到对应的失败回调函数,并执行。
[0155]通过这种方法,整个系统只需维护三个全局函数getQueue, sucCallback和errCallback,而web前端执行命令后的成功和失败回调函数不需要是全局的函数,且会保留该回调函数的现场。
[0156]如图7所示,本发明第三实施例提出一种浏览器与web前端通信的方法,在上述图6所示的第二实施例的基础上,在上述步骤S104:web前端通过给预先创建的标签的设定属性赋值的方式,将所述全局变量命令队列发送至浏览器之前还包括:
[0157]步骤S108, web前端判断是否创建有用于通信的iframe标签;若是,贝U进入步骤S104 ;否则,进入步骤S109 ;
[0158]步骤S109,创建所述iframe标签,并进入步骤S104。
[0159]本实施例与上述图6所示的第二实施例的区别在于,本实施例还包括是否创建iframe标签的方案。
[0160]web前端通过判断,若当前没有创建用于通信的iframe标签,则创建该iframe标签,若当前有创建用于通信的iframe标签,则通过给预先创建的标签的设定属性赋值的方式,将全局变量命令队列发送至浏览器。
[0161]本实施例通过上方案,通过创建iframe标签,在web前端和浏览器客户端之间建立一座通信的桥梁,通过该桥梁,web前端可以主动和浏览器客户端通信,浏览器客户端也可以主动和web前端通信且保留函数现场,由此实现了 web前端与浏览器客户端之间的有效通信,降低了开发者学习使用API的成本。
[0162]如图8所示,本发明第四实施例提出一种浏览器与web前端通信的方法,包括:
[0163]步骤S201,web前端响应接口调用指令,生成用以标识所述接口调用指令对应请求事件的id ;
[0164]步骤S202,根据所述接口调用指令,获取所述请求事件的接口参数;
[0165]步骤S203,将所述请求事件、id以及所述接口参数存入全局变量命令队列中;
[0166]步骤S204,将所述全局变量命令队列发送至浏览器;由所述浏览器接收到所述全局变量命令队列后,从所述全局变量命令队列中读取所述请求事件、id以及所述接口参数,对所述请求事件进行处理。
[0167]具体地,以1s系统的手机端为例
当前第3页1 2 3 4 5 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1