一种实现WEB页面文件模板化的方法.pdf

本发明一种实现Web页面文件模板化的方法，包括如下步骤：在Web代码文件中定义模板区域标签；在Web代码文件中定义模板区域的内容；在模板引擎文件中，用脚本语言实现模板区域的内容。本发明通过在Web页面文件中定义模板标签，在模板引擎中用脚本语言实现模板内容，从而增强Web页面的易维护性。

1.  一种实现Web页面文件模板化的方法，其特征在于，包括如下步骤：
在Web代码文件中定义模板区域标签；
在Web代码文件中定义模板区域的内容；
在模板引擎文件中，用脚本语言实现模板区域的内容。

2.  如权利要求1所述的实现Web页面文件模板化的方法，其特征在于：利用<script>标签作为界定符来界定区域内容，所述<script>标签在Web代码中可视，但在Web显示时自动隐藏。

3.  如权利要求2所述的实现Web页面文件模板化的方法，其特征在于：在html文件代码中定义要使用模板的标签，在html文件代码中定义html模板内容。

4.  如权利要求2所述的实现Web页面文件模板化的方法，其特征在于：新建一个javascript文件，定义模板引擎对象。

5.  如权利要求2所述的实现Web页面文件模板化的方法，其特征在于：在html代码文件中或者在html文件引用的javascript文件中，调用模板引擎，输出结果。

一种实现Web页面文件模板化的方法
技术领域
本发明涉及计算机技术领域，具体涉及一种实现Web页面文件模板化的方法。
背景技术
随着Web技术的发展，作为直接呈现在用户面前的Web页面内容不断丰富，功能愈加强大，这就使得Web页面文件更加复杂，技术人员维护难度加大，特别是在脚本语言中实现html代码时，如果Web页面发生变化，在脚本语言实现的这段html代码就要随之改变。如果涉及到简单的修改，脚本语言实现的这段html代码还能很快实现。但是如果涉及到较为复杂的修改，这段脚本代码修改就需要耗费很大的精力，从而影响Web产品的及时发布或更新。
通常，一个Web应用程序的开发流程如下：
在提交计划文档之后，界面设计者制作了网站的外观模型，然后把它交给程序员。程序员使用脚本语言实现商业逻辑，同时使用外观模型做成基本架构。然后，工程被返回到页面设计者继续完善。就这样工程可能在程序员和页面设计者之间来来回回好几次。由于程序员不喜欢干预任何有关html标签，同时也不希望和脚本代码混在一起；界面设计者只需要配置文件，动态区块和其他的界面部分，不必要去接触那些错综复杂的脚本代码。因此，这时候有一个很好的模板支持就显得很重要，可以增强Web页面易维护性。
发明内容
为解决上述问题，本发明的目的在于提供一种实现Web页面文件模板化的方法，以增强Web页面易维护性。
为实现上述目的，本发明的技术方案为：
一种实现Web页面文件模板化的方法，包括如下步骤：
在Web代码文件中定义模板区域标签；
在Web代码文件中定义模板区域的内容；
在模板引擎文件中，用脚本语言实现模板区域的内容。
进一步地，利用<script>标签作为界定符来界定区域内容，所述<script>标签在Web代码中可视，但在Web显示时自动隐藏。
进一步地，在html文件代码中定义要使用模板的标签，在html文件代码中定义html模板内容。
进一步地，新建一个javascript文件，定义模板引擎对象。
进一步地，在html代码文件中或者在html文件引用的javascript文件中，调用模板引擎，输出结果。
相较于现有技术，本发明实现Web页面文件模板化的方法通过在Web页面文件中定义模板标签，在模板引擎中用脚本语言实现模板内容，从而增强Web页面的易维护性。
附图说明
图1为本发明的方法流程图示。
具体实施方式
本发明实施例提供了一种实现Web页面文件模板化的方法、测试装置和自绘控件以及系统，用于提高对自绘控件的测试效率和精确度。
为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部实施例。基于本发明中的实施例，本领域的技术人员所获得的所有其他实施例，都属于本发明保护的范围。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的术语在适当情况下可以互换，这仅仅是描述本发明的实施例中对相同属性的对象在描述时所采用的区分方式。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，以便包含一系列单元的过程、方法、系统、产品或设备不必限于那些单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它单元。
以下分别进行详细说明。
本发明一种实现Web页面文件模板化的方法，首先，在Web代码文件中定义模板区域标签；其中，利用<script>标签来界定区域内容，其在Web代码中可视，但在Web显示时自动隐藏。
其次，在Web代码文件中定义模板区域的内容，用<script>标签作为界定符，模板区域内容采用类似普通html代码。其中，与普通html代码不同的是，本发明实施例中标签的内容采用“[[content]]”格式；用类似脚本语言的语句，实现Web内容条件判断，循环等功能，如@if、@else、@for、@break等。
最后，在模板引擎文件中，用脚本语言实现模板区域的内容。
本发明实施例中，Web页面文件的类型包含但不限于：.html、.php、.asp、.aspx等，而实现模板引擎的脚本语言包含但不限于JavaScript、Vbscript、Jscript等。
经过模板化处理的Web页面文件，划清了Web设计人员和Web实现人员的界限，由Web设计人员维护Web代码文件中的模板标签，Web实现人员维护模板引擎。
以下实施例中，以Web页面文件使用html、脚本语言使用javascript为例进行详细说明。
首先，在html文件代码中定义要使用模板的标签，如：<div id="template_test"></div>，表示id为“template_test”的div标签要使用模板。
其次，在html文件代码中定义html模板内容，定义函数语言如下：
  <script id="template_header">
              <div class=" template_header ">
               <h1>[[title]]</h1>
                <div class="content"> [[body]]</div>
                <footer>[[name]]</footer>    
</div>
 </script>
其中“<script>”“</script>”为模板内容界定符，“[[”“]]”为可替换变量界定符，变量名称命名没有限制，只要便于理解即可。
然后，在模板引擎文件中，用脚本语言实现模板区域的内容，以上述html模板内容为例，新建一个javascript文件，定义模板引擎对象，实现替换“[[”和“]]”界定符的变量，本发明实施例中可采用如下函数语言：
var templateHeader =
{
    "delimeterLeft":"\\[\\[",
    "delimeterRight":"\\]\\]",
    "replaceVars":function(html,obj)
    {
          if(typeof obj !="object")
                return "";
          for(var p in obj)
          {
                html = html.replace(new RegExp(this.delimeterLeft+ p + this.delimeterRight,"gm"),obj[p]);
          }
          return html;    
    },
    "parse":function()
    {
          var html = arguments[0] || '',
                obj = arguments[1] || {};
          return this.replaceVars(html,obj);
    },
};
最后，在html代码文件中或者在html文件引用的javascript文件中，调用模板引擎，输出结果，具体实现函数语句如下：
var html = document.getElementById("template_header").innerHTML;
var source = TemplateHeader.parse(html,{"title":"第一个模板","body":"应用模板快速开发","name":"inspur"});
document.getElementById("template_test").innerHTML = source;
以上举例，只是此发明的较为简单的示例，还可以通过此方法进一步定义更加复杂的模板内容及相对应的更强模板引擎。
通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件的方式来实现，当然也可以通过专用硬件包括专用集成电路、专用CPU、专用存储器、专用元器件等来实现。一般情况下，凡由计算机程序完成的功能都可以很容易地用相应的硬件来实现，而且，用来实现同一功能的具体硬件结构也可以是多种多样的，例如模拟电路、数字电路或专用电路等。但是，对本发明而言更多情况下软件程序实现是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在可读取的存储介质中，如计算机的软盘，U盘、移动硬盘、只读存储器（ROM，Read-Only Memory）、随机存取存储器（RAM，Random Access Memory）、磁碟或者光盘等，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本发明各个实施例所述的方法。
 综上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照上述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对上述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。