基于 XML 的可配置 Html 下拉框的设计与实现

作者
(江西制造职业技术学院信息工程系,江西 南昌 330000)
摘 要:专门针对Web下拉框控件影响网页性能、不利于美工和维护等问题,通过比较Web下拉框与Html下拉框各自的利弊,提出一种基于XML实现可配置Html下拉框的方法。该方法提高网页性能、方便界面美工、提高维护效率。
关键词:Html控件;XML;JavaScript;可配置
中图分类号:TP 文献标识码:A文章编号:1672-3198(2011)01-0302-01
1 下拉框的潜在问题
1.1Web下拉框控件影响性能
Web下拉框控件最大的优势在于全面,既能满足前台选择的需要,也能满足后台数据库交互的需要。正因为这样,Web下拉框控件受到大部分初学者的青睐。然而,通常情况下,下拉框控件只被用于选项选择,不与后台数据库交互。此时,Web下拉框控件的回发特性无形中给IE浏览器造成负载压力,使之无故刷新,严重时引起假死白屏。
1.2 Web下拉框控件不利于美工
Web下拉框控件是对Html下拉框控件的综合封装,其美工设计都是“傻瓜式”的点对点。易于配置的同时,牺牲了灵活性,众多复杂的特效难以实现,极不利于高级美工调整。
1.3 下拉框控件选项难以保持一致
无论是Web下拉框控件还是Html下拉框控件,其选项必须事先录入。代码表现为:
若该下拉框被同时用于多个Html页面,一旦发生变化,所有被涉及的页面都要统一修改,稍有遗漏便会导致页面间相同下拉框选项不一致,极不利于后期维护。
2 改进总体方案
2.1 改用Html下拉框控件 提高性能和美工灵活性
Web下拉框控件影响性能,主要是因为Web控件具有回发特性,即页面每次刷新都要往返服务器。若不与服务器上的数据库交换数据,这种回发是完全没有必要的。对于常用于选项选择,不与数据库交换数据的下拉框而言,每次回发无疑是一种性能上的耗费。
相比之下,Html下拉框控件是纯粹的客户端控件,即页面每次刷新都不与服务器回发,不与数据库交换数据,非常适合仅做选项选择的下拉框。因为不必做无谓的回发,所以有效提高网站性能。
另一方面,正因为改用了Html下拉框控件,解除了Web控件在美工方面的封装束缚,使得美工师能够直接对其Html代码进行加工,从而灵活实现各种特效。
2.2 使用XML保持下拉框控件选项一致性
为保持选项的一致性,只能把所有选项统一存放于配置文件处,即实现下拉框选项的可配置性。这样,所有下拉框都从该配置文件中获取选项内容,有效避免因选项变化导致下拉框选项不一致的逻辑错误。
其实,配置文件就是一个小型数据库,存取原理与数据库相同。但选用SQL或ORACLE这样大型的数据库做配置文件不利于后期部署。所以,选择适合小型文件的XML技术较为适合。
2.3 基于XML的可配置Html下拉框的總体设计
当页面加载时,Html控件通过JavaScript脚本从XML文件获取并显示选项内容。其中,Html下拉框控件是纯粹的客户端控件,不引起与服务器的回发,提高客户端性能。XML文件作为配置文件,旨在存储下拉框选项内容。JavaScript也是纯粹的客户端技术,旨在绑定Html下拉框控件和XML文件。如图1所示。
3 XML实现配置性的详细方案
3.1 定义XML文件格式
XML文件作为配置文件的载体,首先要定义供数据存取的结构。如定义性别下拉框的选项。首先定义性别选项框,然后定义选项内容,代码如下:
<?xml version"1.0" encoding"utf-8" ?>
若要添加新的下拉框及其选项内容,只需在后面追加即可,非常利于今后扩展。
3.2 定义JS脚本代码
XML文件中的选项内容若要在下拉框中显示,必须通过JavaScript脚本绑定。其脚本执行流程为:首先通过传参的方式定位XML文件,然后进入加载环节。加载时,先判断是否加载过该XML文件。若已加载,直接进入绑定环节。若未加载,先加载XML文件,再进入绑定环节。绑定时,先判断是否将选项与下拉框绑定过。若已绑定,先清空下拉框选项,再重新绑定。若未绑定,直接进行绑定该流程。
3.3 使用JS脚本绑定下拉框选项
首先把JS脚本拖拽进Html页面,代码如下:
然后在Html页面中创建Html下拉框控件,代码如下:
最后执行JS脚本实现绑定。在后台通过代码Page.ClientScript.RegisterStartupScript(typeof(string),"", @"")调用。其中从InitSelect方法的各项参数可知,名为sex的Html下拉框控件将从../Xml/Enum.xml配置文件中获取绑定Root/Sex下的选项内容。
参考文献
[1](美)泽卡斯著,李松峰等译.JavaScript高级程序设计(第2版)[M].北京:人民邮电出版社,2010.
作者 刘斌 张艳