发明内容
为了解决现有技术中网页元素的属性信息比较单一,扩展属性信息会造成网页代码可读性和可维护性降低的问题,提出了一种增强网页元素属性信息的方法及装置,可以提高可读性和可维护性的前提下丰富网页元素的属性信息。
本申请实施例提供了一种增强网页元素属性信息的方法,包括,
获取网页元素代码中的属性增强信息;
根据所述属性增强信息得到相应模板;
将所述网页元素代码中的信息结合所述模板形成DOM文档对象模型对象
根据本申请所述方法的一个进一步的方面,获取网页元素代码中的属性增强信息还具体包括,判断所述网页元素代码中的属性信息为原生信息或者增强信息,如果为原生信息则结束。
根据本申请所述方法的再一个进一步的方面,在获取网页元素代码中的属性增强信息中具体包括,根据所述元素属性信息中的分隔符来分辨原生信息和增强信息。
根据本申请所述方法的另一个进一步的方面,在根据所述属性增强信息得到相应模板中还具体包括,在网页代码中获取元素模板路径信息,根据所述属性增强信息和所述元素模板路径信息,得到与所述属性增强信息相应的模板。
根据本申请所述方法的另一个进一步的方面,在网页代码中获取元素模板路径信息中还具体包括,在网页代码的全局变量中获取元素模板路径信息。
根据本申请所述方法的另一个进一步的方面,所述元素模板路径信息为网页代码所在服务器的模板文件路径,或者为其它服务器的模板文件路径。
根据本申请所述方法的另一个进一步的方面,将所述网页元素代码中的信息结合所述模板形成DOM对象还具体包括,
识别所述模板中的占位符;
获取所述网页元素代码中与所述占位符相应的属性信息;
将所述属性信息替换所述模板的占位符形成DOM对象。
根据本申请所述方法的另一个进一步的方面,将所述网页元素代码中的信息结合所述模板形成DOM对象还具体包括,将所述网页元素代码中非增强的属性信息加入到所述DOM对象中。
本申请实施例还提供了一种增强网页元素属性信息的装置,包括,
获取单元,用于获取网页元素代码中的属性增强信息;
匹配单元,用于根据所述属性增强信息得到相应模板;
处理单元,用于将所述网页元素代码中的信息结合所述模板形成DOM对象。
根据本申请实施例所述装置的一个进一步的方面,所述获取单元还用于判断所述网页元素代码中的属性信息为原生信息或者增强信息,如果为原生信息则结束。
根据本申请实施例所述装置的再一个进一步的方面,所述获取单元根据所述元素属性信息中的分隔符来分辨原生信息和增强信息。
根据本申请实施例所述装置的另一个进一步的方面,所述匹配单元在网页代码中获取元素模板路径信息,根据所述属性增强信息和所述元素模板路径信息,得到与所述属性增强信息相应的模板。
根据本申请实施例所述装置的另一个进一步的方面,所述匹配单元在网页代码的全局变量中获取元素模板路径信息。
根据本申请实施例所述装置的另一个进一步的方面,所述路径信息为网页代码所在服务器的模板文件路径,或者为其它服务器的模板文件路径。
根据本申请实施例所述装置的另一个进一步的方面,所述处理单元还用于:
识别所述模板中的占位符;
获取所述网页元素代码中与所述占位符相应的属性信息;
将所述属性信息替换所述模板的占位符形成DOM对象。
根据本申请实施例所述装置的另一个进一步的方面,所述处理单元还用于:将所述网页元素代码中非增强的属性信息加入到所述DOM对象中。
由以上本申请实施例提供的技术方案可见,以通过在网页代码中加入更多的增强信息来精确描述网页元素的属性,不同的属性增强信息对应着不同的模板,通过对所述模板进行多样性的配置,从而可以实现增强网页元素的目的,并且简化了网页代码,使得网页代码在可读性和可维护性上都有了很大的提升。
当然实施本申请的任一产品或者方法必不一定需要同时达到以上所述的所有优点。
具体实施方式
本申请实施例提供一种增强网页元素属性信息的方法及装置。
为了使本技术领域的人员更好地理解本申请中的技术方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
如图1所示为本申请实施例一种增强网页元素属性信息的方法流程图。在该图中描述了本申请技术方案如何实现增强网页元素类型的方法,通过在服务器的网页html代码中元素的属性中写入增强信息(能够代表更丰富信息的标识符或者字符串),例如在类型(type)属性或自定义属性中写入增强信息,在客户端浏览器解析该网页html前,将属性的增强信息通过模板的方式进行还原,从而可以获得格式上统一,方便阅读和方便维护的具有丰富属性信息的网页代码。其中,类型属性包括但不限于元素的颜色、尺寸、外观形状、位置等等内容。
该图1中包括步骤101,获取网页元素代码中的属性增强信息。
步骤102,根据所述属性增强信息得到相应模板。
步骤103,将所述网页元素代码中的信息结合所述模板形成DOM(文档对象模型)对象。
然后客户端浏览器可以解析DOM对象从而在客户端的浏览器中呈现具有属性增强信息的页面。在本申请的技术方案中所述的元素属性可以包括比较广泛的内容,既包括浏览器原生支持的属性,例如type(类型属性)等属性,也可以包括自定义的属性(浏览器原生不支持的属性),例如msg(消息属性)等。
作为本申请的一个实施例,获取网页元素代码中的属性增强信息还具体包括,判断所述网页元素代码中的属性信息为原生信息或者增强信息,如果为原生信息则结束本申请的方法。结束本申请方法的含义为不进行本申请的属性的增强信息进行处理,将该元素的属性信息留给后继现有技术中的浏览器进行解析。
作为本申请的一个实施例,在获取网页元素代码中的属性增强信息中具体包括,根据所述元素属性信息中的分隔符来分辨原生信息和增强信息。其中,可以通过“/”或者“.”等分隔符将类型的原生信息和增强信息进行区分,例如button type=”button/success”,是指元素按钮(button)类型(type)中包括原生信息(button)和增强信息(success),作为一个进一步的实施例,增强信息可以分为多级或者多个,以指明该按钮的具体类型,例如button type=”button/success/1”,是指在元素button的类型为button下success下1这个属性。或者,该属性为自定义属性,该属性信息即为增强信息,由于用户端浏览器不能解析自定义属性,因此该自定义属性中的信息均为增强信息,例如button tpl=”abcd”,表示自定义属性tpl的属性信息为abcd,该abcd为增强信息。
作为本申请的一个实施例,在根据所述属性增强信息得到相应模板中还具体包括,在网页代码中获取元素模板路径信息,根据所述属性增强信息和所述元素模板路径信息,得到与所述属性增强信息相应的模板。
作为本申请的一个实施例,在网页代码中获取元素模板路径信息中还具体包括,在网页代码的全局变量中获取元素模板路径信息。其中,所述从网页代码中获取元素模板路径是指,在网页代码的全局变量中事先写入模板的路径信息,或者在元素类型的增强信息中直接写入该模板的路径信息,例如<button type=http://abc.com/button/big.tpl>hello</button>。
作为本申请的一个实施例,所述元素模板路径信息可以为网页代码所在服务器的模板文件路径(本地模板),也可以为其它配置服务器的模板文件路径(远程模板),通过远程模板和本地模板的配置,可以使得元素类型的增强信息更加丰富和灵活。
作为本申请的一个实施例,将所述网页元素代码中的信息结合所述模板形成DOM对象还具体包括,
识别所述模板中的占位符;
获取所述网页元素代码中与所述占位符相应的属性信息;
将所述属性信息替换所述模板的占位符形成DOM对象。
作为本申请的一个实施例,将所述网页元素代码中的信息结合所述模板形成DOM对象还包括,将所述网页元素代码中非增强的属性信息加入到所述DOM对象中。
例如,网页元素的代码为<button type=”button/success”click=”alert(1)”id=”button1”title=”ok”>你好</button>这里面id、click、title都属于非增强属性信息,模板为<button type=”{{button.type}}”class=”btn btn-primary”>{{button.text}}</button>,占位符信息:button={”button.type”:”button”,”button.text”:”你好”},使用属性信息“button”和“你好”替换模板的占位符形成DOM对象,并且将非增强的属性信息click=”alert(1)”、id=”button1”和title=”ok”加入到DOM对象中后,最终的DOM对象为<button type=”button”class=”btn btn-primary”id=”button1”click=”alert(1)”title=”ok”>你好</button>。如果网页元素的代码中没有非增强的属性信息,则可以属性信息替换模板占位符后即形成DOM对象。
通过上述本申请实施例中的方法,可以通过在网页代码中加入更多的增强信息来精确描述网页元素的属性,不同的属性增强信息对应着不同的模板,通过对所述模板进行多样性的配置,从而可以实现增强网页元素的目的,并且简化了网页代码,使得网页代码在可读性和可维护性上都有了很大的提升,本申请的方法可以很好地运行于angularjs这类数据和模板分离的JS框架之上,或者也可以运行于其它类似框架之上。
如图2所示为本申请实施例一种增强网页元素属性信息的装置结构示意图,其中,该装置可以为软件或者由逻辑电路实现的逻辑,例如为JavaScript脚本或者为VBscript脚本等,在用户端计算机或者智能终端的浏览器解析网页代码之前运行本申请的装置,对网页代码中元素属性的增强信息进行解析和处理,使得用户终端的浏览器可以解析含有增强元素属性的网页,通过本申请的装置还可以使得开发者在编辑网页代码时更加简洁和规范,增加了元素属性的精确度,提高了代码的可读性和可维护性。
该装置包括获取单元201,用于获取网页元素代码中的属性增强信息。
匹配单元202,用于根据所述属性增强信息得到相应模板。
处理单元203,用于将所述网页元素代码中的信息结合所述模板形成DOM对象。
然后客户端浏览器可以解析DOM对象从而在客户端的浏览器中呈现具有属性增强信息的页面。
作为本申请的一个实施例,所述获取单元还用于判断所述网页元素代码中的属性信息为原生信息或者增强信息,如果为原生信息则结束。
作为本申请的一个实施例,所述获取单元根据所述元素属性信息中的分隔符来分辨原生信息和增强信息。
作为本申请的一个实施例,所述匹配单元在网页代码中获取元素模板路径信息,根据所述属性增强信息和所述元素模板路径信息,得到与所述属性增强信息相应的模板。
作为本申请的一个实施例,所述匹配单元在网页代码的全局变量中获取元素模板路径信息。
作为本申请的一个实施例,所述路径信息可以为网页代码所在服务器的模板文件路径(本地模板),也可以为其它配置服务器的模板文件路径(远程模板),通过远程模板和本地模板的配置,可以使得元素属性的增强信息更加丰富和灵活。
作为本申请的一个实施例,所述处理单元还用于:
识别所述模板中的占位符;
获取所述网页元素代码中与所述占位符相应的属性信息;
将所述属性信息替换所述模板的占位符形成DOM对象。
作为本申请的一个实施例,所述处理单元还用于:将所述网页元素代码中非增强的属性信息加入到所述DOM对象中。
通过上述本申请实施例中的装置,可以通过在网页代码中加入更多的增强信息来精确描述网页元素的属性,不同的属性增强信息对应着不同的模板,通过对所述模板进行多样性的配置,从而可以实现增强网页元素的目的,并且简化了网页代码,使得网页代码在可读性和可维护性上都有了很大的提升。
如图3所示为本申请实施例一种增强网页元素类型的方法流程图,在该图中以网页元素中的类型(type)属性为例,对增强网页元素属性信息的方法进行描述,从而实现对网页元素的属性进行增强扩展,并且提高代码可读性和可维护性的目的。作为本领域技术人员可以理解的是,元素的类型(type)只是本申请方法的一个特例,还可以应用于其他元素属性,例如class或其他属性。
对于type属性来说,可以多种type的描述方式,例如:
<button type=”button/primary”>确定</button>,它表示的是button下的primary类型。
<button type=”submit/primary”>提交</button>,它表达的是submit(提交)按钮下的primary类型。
<msg type=”notice/success”></msg>,它表达的是notice(提示)信息(msg)下的success类型。
<msg type=”alert/success”></msg>,它表达的是alert(报警)信息(msg)下的success类型。
下面以网页元素代码<button type=”button/primary”click=”click()”>OK</button>,其相应的模板为<button type=”{{button.type}}”class=”btn btn-primary”>{{button.text}}</button>为例,对本申请的方法进行详细描述。
该图包括步骤301,用户终端接收到网页代码,在浏览器解析所述网页代码之前,调用Java Script脚本(JS)对网页代码进行解析。
步骤302,判断上述网页元素类型的代码中是否包括属性增强信息,如果类型中的属性信息为原生信息则进入步骤303,否则进入步骤304。
其中,如上述网页元素代码所示,在type类型的属性信息中包括了”button/primary”,该信息不是常规的原生信息(原生信息可能只包括“button”信息以指明该类型为按钮类型),而是包括了primary的增强信息,所以该类型的属性信息中包括了增强信息。
进一步的,通过识别属性信息中的分隔符,在本例中为“/”,来识别属性信息中哪些为原生信息,哪些为增强信息,在本例中为一个分隔符,在分隔符之后的信息为增强信息,当然,作为另一个实施例,还可以有更多的分隔符将属性信息分为多级,例如”button/primary/abc”。
进一步的,还可以通过识别属性信息是否与原生信息相一致,如果不是原生信息则认为该属性信息为增强信息,在这个步骤中,属性信息省去了分隔符,只需要根据属性信息的字符串进行判断就可以得到原生信息或者增强信息。
步骤303,结束本申请的方法,回到现有技术中的流程,即由浏览器对网页代码进行解析和渲染呈现。
步骤304,在网页代码中获取元素模板路径信息。
在本步骤中,可以从网页代码的全局变量中获取元素模板路径信息,该元素模板的路径信息包括模板路径和模板文件夹名称,例如在本例中,模板路径为panda.tplBase=”../tpl/”,模板文件夹名称为panda.theme=“bootstrap”,其中,模板路径可以为传送该网页代码的网络服务器地址,也可以为其它网络服务器地址,在本例中的”../tpl/”指的是传送该网页代码的网络服务器的本地模板,还可以为远端模板例如panda.tplBase=http://XXXXX/tpl/。
步骤305,将上述元素模板路径信息和增强属性信息结合,构成具体的模板地址。
如图4所示为本申请实施例在网络服务器中存储的模板地址形式,其中tpl为模板文件夹路径,bootstrap为模板的文件夹名称,button.primary.tpl为模板的名称,生成的模板地址为”../tpl/bootstrap/button.primary.tpl”。
步骤306,根据上述模板地址从相应的网络服务器获取增强属性信息对应的模板。
用户终端根据上述模板地址通过互联网从网络服务器中获取模板,在本例中,属性增强信息为”button/primary”,JS在得到button/primary时,将”/”替换为“.”,变为button.primary,然后加上”.tpl”的后缀,就生成了button.primary.tpl,如果对应的位置有这个模板,就被加载,否则就会出现文件找不到的错误,该模板为<button type=”{{button.type}}”class=”btn btn-primary”>{{button.text}}</button>。
步骤307,识别所述模板中的占位符。
在本步骤中,以“{{”和“}}”作为占位符,在其它的实施例中可以采用其它的符号或者字符串等形式作为占位符。
步骤308,获取所述网页元素代码中与所述占位符相应的属性信息。
在本实施例中,网页元素代码中与占位符相应的属性信息为,button={“type”:”button”,”text”:”OK”}。
步骤309,将上述属性信息替换所述模板中的占位符形成DOM对象。
处理后得到更新的模板,<button type=”button”class=”btn btn-primary”>OK</button>。
步骤310,将网页元素代码中非type的属性加入到DOM对象中,形成最终的DOM对象。
在本步骤中,网页元素代码中除了type属性之外,还有click属性,将该属性加入到DOM对象中,最后形成的DOM对象为<button type=”button”class=”btn btn-primary”click=”click()”>OK</button>。
如果网页元素代码中没有非type的属性时,本步骤在处理过程中不实施,也就是说本步骤是可选的步骤。
步骤311,浏览器解析网页元素的DOM对象,在显示器中呈现网页内容。
此时,在JS处理后的网页代码可以为用户终端的浏览器所解析,可以使得元素button具有更精确的type属性,并且可以在网页代码中省略class等内容。本申请的方法可以适用于浏览器支持的元素(原生的网页元素),也可以适用于浏览器不支持的元素(自定义元素),对于自定义元素的解析不属于本申请要解决的技术问题,因此不在此处进行描述,对任意元素中增强的属性均可以使用本申请的技术方案进行解析和呈现。
如图5所示为本申请实施例另一种增强网页元素类型的方法流程图,其中本申请的方法可以适用于其它元素的属性例如,1、<msg category=”notice/success”></msg>;2、<msg category=”success”></msg>;自定义属性:1、<msg type=”notice/success”></msg>;2、<msg type=”alert/success”></msg>,其中msg是自定义元素,category、type均为属性,””中均为属性信息,在本实施例中,还是以网页元素中的类型(type)为例,对增强网页元素属性信息的方法进行描述,与上述实施例不同的是,在本例中模板路径信息不在全局变量中,而是在type的属性信息中,并且属性信息中没有原生信息,包括的属性信息为增强信息。
下面以网页元素代码<button type=”/tpl/bootstrap/button/primary”>ok</button>,其相应的模板为<button type=”button”class=”btn btn-primary”>{{button.text}}</button>为例,对本申请的方法进行详细描述。
在本实施例中包括步骤501,用户终端接收到网页代码,在浏览器解析所述网页代码之前,调用Java Script脚本(JS)或者VB Script脚本对网页代码进行解析。
步骤502,判断上述网页元素类型的代码中是否包括属性增强信息,如果类型中的属性信息为原生信息则进入步骤503,否则进入步骤504。
将网页元素类型的属性信息代码与原生信息比较,如果属于原生信息,则进入步骤503,否则进入步骤504,在本例中type=”/tpl/bootstrap/button/primary”不属于原生信息,直接进入步骤504。
步骤503,结束本申请的方法,回到现有技术中的流程,即由浏览器对网页代码进行解析和渲染呈现。
步骤504,在所述网页元素类型的代码的属性增强信息中获取元素模板路径信息。
在属性增强信息中包括元素模板路径信息“/tpl/bootstrap/”,“button/primary”为模板名称,此时的“/”不是分隔符,仅仅是代表模板文件路径的符号。
步骤505,将上述元素模板路径信息和增强属性信息结合,构成具体的模板地址。
在本例中生成的模板地址为”/tpl/bootstrap/button.primary.tpl”。
步骤506,根据上述模板地址从相应的网络服务器获取增强属性信息对应的模板。
获取的模板为<button type=”button”class=”btn btn-primary”>{{button.text}}</button>。
步骤507,识别所述模板中的占位符。
步骤508,获取所述网页元素代码中与所述占位符相应的属性信息。
在本实施例中,网页元素代码中与占位符相应的属性信息为,button={”text”:”OK”}。
步骤509,将上述属性信息替换所述模板中的占位符形成DOM对象。
处理后得到DOM对象,<button type=”button”class=”btn btn-primary”>OK</button>。
步骤510,浏览器解析网页元素的DOM对象,在显示器中呈现网页内容。
通过上述本申请实施例中的方法和装置,可以通过在网页代码中加入更多的增强信息来精确描述网页元素的属性,不同的属性增强信息对应着不同的模板,通过对所述模板进行多样性的配置,从而可以实现增强网页元素的目的,并且简化了网页代码,使得网页代码在可读性和可维护性上都有了很大的提升。
对于一个技术的改进可以很明显地区分是硬件上的改进(例如,对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而,随着技术的发展,当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此,不能说一个方法流程的改进就不能用硬件实体模块来实现。例如,可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable Gate Array,FPGA))就是这样一种集成电路,其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字***“集成”在一片PLD上,而不需要请芯片制造厂商来设计和制作专用的集成电路芯片2。而且,如今,取代手工地制作集成电路芯片,这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现,它与程序开发撰写时所用的软件编译器相类似,而要编译之前的原始代码也得用特定的编程语言来撰写,此称之为硬件描述语言(Hardware Description Language,HDL),而HDL也并非仅有一种,而是有许多种,如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware Description Language)、Confluence、CUPL(Cornell UniversityProgramming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(Ruby Hardware Description Language)等,目前最普遍使用的是VHDL(Very-High-Speed Integrated Circuit Hardware Description Language)与Verilog2。本领域技术人员也应该清楚,只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中,就可以很容易得到实现该逻辑方法流程的硬件电路。
控制器可以按任何适当的方式实现,例如,控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(Application Specific Integrated Circuit,ASIC)、可编程逻辑控制器和嵌入微控制器的形式,控制器的例子包括但不限于以下微控制器:ARC625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320,存储器控制器还可以被实现为存储器的控制逻辑的一部分。
本领域技术人员也知道,除了以纯计算机可读程序代码方式实现控制器以外,完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件,而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至,可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
上述实施例阐明的***、装置、模块或单元,具体可以由计算机芯片或实体实现,或者由具有某种功能的产品来实现。
为了描述的方便,描述以上装置时以功能分为各种单元分别描述。当然,在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
通过以上的实施方式的描述可知,本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品可以存储在存储介质中,如ROM/RAM、磁碟、光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。
本说明书中的各个实施例均采用递进的方式描述,各个实施例之间相同相似的部分互相参见即可,每个实施例重点说明的都是与其他实施例的不同之处。尤其,对于***实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
本申请可用于众多通用或专用的计算机***环境或配置中。例如:个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器***、基于微处理器的***、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何***或设备的分布式计算环境等等。
本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述,例如程序模块。一般地,程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请,在这些分布式计算环境中,由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中,程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
虽然通过实施例描绘了本申请,本领域普通技术人员知道,本申请有许多变形和变化而不脱离本申请的精神,希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。