CN102043621A - 基于Javascript标签库的页面开发方法 - Google Patents

Abstract

本发明公开了一种基于Javascript标签库的页面开发方法，包括：S1、在页面服务器设置标签库，所述标签库用于存储Javascript标签和实现特定功能的标签执行文件，所述Javascript标签与所述标签执行文件一一对应；S2、在页面框架代码中插入选自所述标签库的Javascript标签，得到完成的页面代码；所述Javascript标签用于在执行所述页面代码时调用对应的所述标签执行文件，以实现对应的特定功能。本发明的技术方案能够使页面开发过程更为便捷、直观，提高了工作效率，也能够将执行页面代码的服务器始终保持在高效运行的状态。

Description

基于Javascript标签库的页面开发方法

技术领域

本发明涉及一种页面开发技术，尤其涉及一种基于Javascript(简称JS)标签的页面开发方法。

背景技术

针对客户需求进行的网站页面开发过程通常需要以下几个方面的协同工作：业务、美工、技术开发及测试。一般的页面开发过程如图1所示，包括如下流程：业务从客户处获取用户需求，与美工、技术开发一起沟通得到能够体现用户需求且可执行的开发需求；美工根据开发需求设计、制作页面框架并加入外观元素；技术开发在美工制作的页面框架基础上编写以实现开发需求为目标的后台程序，完成初步的页面开发；测试在初步开发的页面上进行测试，将发现的错误反馈给业务、美工或是技术开发，由美工与技术开发协同进行页面修改，直至得到完善的页面；在测试之后或测试进行的过程中，业务可以独自或是连同客户一起参与进来，重申开发需求或是提出新的开发需求，同样也由美工与技术开发协同进行页面修改，直至最后得到满足用户需求的页面。

可以看出，上述的页面开发过程中，美工与技术开发耦合度过大，具体体现在，如果美工要修改页面布局，技术开发也需要相应修改页面的后台程序；而如果技术开发在美工制作的页面框架下加入了大量的程序代码，也势必造成美工在后期维护页面外观效果的相关代码时，会受到前述程序代码的干扰，维护起来很不方便。因此，这种页面开发往往存在劳动力重复、开发效率低下、页面程序维护性不易的问题，相应的，执行页面程序的服务器也无法始终保持在高效运行的状态。

另外，通常的页面开发过程还存在如下一些问题：在多个页面需要执行相同的功能时，往往需要嵌入根据该功能开发的公共文件，然而该方式虽然能够解决多页面共享公共功能的问题，但每个页面的代码仍然显得重复，特别是公共文件过多时，不仅影响页面美观，而且也会增加因遗漏在某个页面导入公共文件而导致面面报错的风险；当一个总站页面需要将内容共享给多个子站页面时，一般的解决方法是采用框架嵌套，如<iframe>标签或采用其他技术通过后端接口调用，这样不但增加了程序复杂性，而且也增加了开发的难度；类似地，当不同服务商之间需要进行合作时，分属这些服务商的不同页面服务器往往也需要业务共享，此时往往也要通过后端接口的调用来实现，因此同样存在开发难度高的问题。

发明内容

本发明的实施例旨在提供一种基于Javascript标签库的页面开发方法，以解决一般页面开发过程中存在的上述问题。

为实现上述目的，本发明的实施例提供了一种基于Javascript标签库的页面开发方法，包括：

S1、在页面服务器设置标签库，所述标签库用于存储Javascript标签和实现特定功能的标签执行文件，所述Javascript标签与所述标签执行文件一一对应；

S2、在页面框架代码中插入选自所述标签库的Javascript标签，得到完成的页面代码；所述Javascript标签用于在执行所述页面代码时调用对应的所述标签执行文件，以实现对应的特定功能。

由上述技术方案可知，本发明实施例能够实现以下几点有益效果的任意组合：1、在页面框架代码中能够通过便利地添加Javascript标签以得到完成的页面代码；2、能够便利地通过修改页面框架代码和/或Javascript标签的相对位置来实现对页面代码的修改，从而使页面开发过程更为便捷、直观；3、提高了工作效率，也能够将执行页面代码的服务器始终保持在高效运行的状态；4、一次开发，可以随处使用，避免了采用公共文件带来的代码冗余和重复；5、同一页面服务器的子站与总站之间、以及不同的页面服务器之间可以通过设置安全验证程序而便利地实现业务共享，避免了重复开发。

附图说明

图1示列性示出一般的页面开发流程图；

图2示例性示出本发明标签库的页面开发方法实施例流程图；

图3示例性示出图2实施例中标签库的文件结构图；

图4示例性示出访问页面时调用图3所示标签库的流程图。

具体实施方式

下面将详细描述本发明的具体实施例。应当注意，这里描述的实施例只用于举例说明，并不用于限制本发明。

图2示例性示出本发明标签库的页面开发方法实施例流程图，如图所示，本实施例的页面开发方法包括步骤S1～S2：

S1、在页面服务器设置标签库，用于存储Javascript标签和实现特定功能的标签执行文件；

并且，在一个实施例中，上述Javascript标签库中Javascript标签与Javascript代码呈现一一对应的关系；

S2、在页面框架代码中插入选自标签库的Javascript标签，得到完成的页面代码；

本步骤添加的Javascript标签用于在执行页面代码时调用对应的所述标签执行文件，以实现对应的特定功能。

在一个实施例中，标签库设置在页面服务器的后台，由开发人员完成Javascript标签所对应标签执行文件(也即可执行的Javascript代码文件)的编程，而相应的Javascript标签会以例如使用手册的形式呈观给美工人员，以供其编辑页面代码时插入Javascript标签，来调用对应的标签执行文件完成特定的功能。

Javascript是互联网使用最多、最广泛的语言，而且绝大多数程序员，包括美工人员，对Javascript都有一定的了解和掌握；并且，Javascript能在所有浏览器上运行，所以本实施例中采用Javascript作为技术内核，以使开发人员更容易上手，也更便于服务器软、硬件方面的兼容。

在一个实施例中，步骤S1中的标签库是以如下代码的形式存储标签执行文件；

接续上述实施例中，以上代码是由开发人员进行编程，并以文件名为“helloworld.js”的标签执行文件存储在标签库中；而“helloword”的标签名则呈现给美工等人员供其在开发页面过程中随时进行调用。如下所述，步骤S2中是以如下代码的形式在页面框架代码中添加Javascript标签：

上述代码中“xmethod”即表示将要调用Javascript标签的语句，而“helloworld”则对应标签库中的Javascript标签名，同时也对应于前述标签库中以“helloworld.js”文件名存储的标签执行文件。

以下代码描述了另一个实施例在HTML页面代码中显示一个Flash标签的封装，并且在该实施例中还存在两个标签之间相互调用的关系，开发人员可以用以下代码方式控制标签与标签之间的协作。

与前一实施例的“helloworld”标签类似，本实施例中经过上述Flash标签的封装后，在HTML页面代码中使用Flash标签只需加入如下代码，即可在页面上展示myflash.swf，并且Flash的高度和宽度直接通过美工熟悉的Style语句来控制。

在一个实施例中，上述步骤S1与S2之间还包括在页面框架代码前插入Javascript核心文件的步骤。这里，Javascript核心文件用于在执行页面代码时对页面代码中的所有Javascript标签进行管理。在一个实施例中，上述管理具体包括：建立页面代码中的Javascript标签到标签库中的标签执行文件的对应关系，用于在执行页面代码时调用标签库中与Javascript标签对应的标签执行文件。

结合上述内容，页面代码中的Javascript标签实际上起到一个“指针”的作用，其本身并没有可执行性，真正用来执行的是该Javascript标签指向的存储在标签库中的标签执行文件。为便于对页面代码中存在的所有Javascript标签进行管理，在上述实施例中，于页面代码的开头部分(例如，在页面框架代码之前)加入Javascript核心文件，用来建立该页面中所有的Javascript标签到标签库中标签执行文件的对应关系。由此，在页面代码执行到某个Javascript标签时，可以直接根据该Javascript核心文件建立的对应关系来调用标签库中对应的标签执行文件加以执行，而无需在执行每个Javascript标签时都去访问标签库建立对应关系，这样既能提高服务器的执行效率，也简便了后台标签库的安全验证(将在下文详述)流程。

在一个实施例中，标签库中是以图3所示的文件结构来存储Javascript标签、标签执行文件及其相关文件。如图所示，其中各部分的说明具体如下。

Javascript核心文件：主要负责控制各个标签执行文行的导入和每个JS模块的相互调用；

标签核心文件：主要负责控制标签组件标签执行文件导入管理，以及标签库各个模块的相互协作；

标签库组件：标签库组件是根据业务需求进行开发的Javascript模块文件，用于实现单个标签功能，组件和组件之间可以相互调用，实现代码共享；

内核工具集：通常在写JavaScript很多功能经常复用，这些常用的功能可以封装成一个模块提供给其他开发者使用，例如字符载取、时间格式化、日历、AJAX请求方法等等；

第三方标签执行文件：许多第三方组织或者公司提供了免费开源标签执行文件，例如swfobject.js；这样的文件可以直接使用而无需再重新进行开发，也可能在和其他公司合作项目时需要使用它方公司的JS文件，或者许多开发者更喜欢使用流行的Javascript框架，例如jquery、yui、ext等等，这些由第三方开发的标签执行文件通过标签库的Javascript核心文件可以进行方便的管理；

后端数据交互文件：标签库在使用标签展示数据时通常需要与后端(JSP/PHP/asp等动态网页技术)进行交互，此时需要用通过JSP/PHP/asp等将数据以约定的格式(JSON/XML等)发送请求和响应请求，后端数据交互文件通常还会操作数据库(MYSQL/Sqlserver/oracle)，这样的文件就属于后端数据交换文件。

在一个实施例中，上述实施例的步骤S1与步骤S3之间还包括在Javascript核心文件前插入安全验证代码的步骤。这里，安全验证代码用于验证链接至页面代码的网站是否有权进行控制Javascript核心文件调用标签库的操作。在一个实施例中，上述验证具体包括：

在页面服务器预先设置鉴权数据库，用于存储有权控制Javascript核心文件调用标签库的网站的地址和/或域名；当页面代码执行到安全验证代码时，则相应地根据鉴权数据库使用当前链接至页面代码的网站的地址和/或域名对该网站进行鉴权。

在一个实施例中，上述安全验证过程还可以通过安全授权码的形式来实现。如下所示在HTML中加入JS标签的代码示例：

其中key 即为安全授权码，可以用来授权其他网站使用当前页面的标签库和标签库功能来调用当前页面服务器的收据。在一个实施例中，如果当前页面服务器授权其他网站使用自身的后台数据，可以在framework/下建立一个验证的JSP/PHP/asp/aspx/py/等文件，或者也可以直接调用api.jsp文件修改为JS代码文件，内容如下所示：

在实际使用中，不同的网站页面之间通常存在业务共享的需求。在一个实施例中，本技术方案提出的标签库也可以开放给授权网站进行访问。为了对授权网站的访问进行鉴权，便可以设置上述实施例中的安全验证流程。结合该安全验证流程以及图3所示的标签库文件结构，以下将说明访问页面时调用标签库的详细流程，如图4所示，该流程包括以下步骤：

S401、浏览器加载DOM；

DOM(Document Object Model，文档对象模型)是一种与浏览器、平台、语言无关的接口，本步骤中DOM可以被JavaScript用来读取、改变HTML、XHTML以及XML文档。JavaScript要读取、改变HTML中某个元素，如<head><body><div><a>等，就必须要等待元素的DOM就绪才能对该元素进行操作。

S402、验证网站是否授权，是则继续，否则退出；

S403、加载Javascript核心文件；

S404、加载标签库配置文件；

配置文件中包含了整个标签库的相关配置，例如网站域名、与后端数据交互的的URL地址、等待数据loading时候显示的图片等信息。

S405、加载标签库核心文件；

如之前的朴签库文件结构所述，任何一个HTML页面要使用标签库的功能，必须先加载核心文件，只有加载了核心文件后，通过核心文件程序才知道如何去加载标签执行文件和标签库组件。

S406、DOM加载完成；

在一个实施例中，DOM加载完成可以直接使用核心文件的X.ready方法，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用所绑定的函数，页99.99％的JavaScript函数都需要在那一刻执行。

只有当浏览器DOM就绪后，Javascript才可以读取、改变HTML元素。由于标签库组件都要对HTML元素进行操作，所以DOM就绪后再执行标签库组件功能。

S407、执行标签库核心文件；

标签库核心文件用来发现HTML中需要使用标签库组件的元素，并调用对应的Javascript组件。在DOM就绪后，标签库核心文件会获取HTML中所有元素上有xmethod属性的HTML元素，并通过xmethod的值将对应标签库组件JS文件加载到浏览器中，由标签库组件对该标签进行相应的操作。

S408、导入Javascript标签对应的标签执行文件；并判断是否导入成功，是则继续，否则转步骤S407；

由于网络传输、WEB服务器异常、用户浏览器异常、用户电脑异常或者其他非确定因素，在加载avascript模块的JS文件时可能会出现加载avascript模块失败，因此程序判断未加载成功再继续加载(例如每隔5秒去重试加载)，直到成功为止。

S409、执行导入的标签执行文件；

S410、判断标签执行文件的执行是否需要和后端数据交互；是则转步骤S413，否则继续；

S411、处理执行页面代码；

S412、返回显示结果；

S413、请求后端数据；

S414、验证网站是否授权，是则继续，否则退出；

S415、与后端数据交互，并转入步骤S411处理执行页面代码。

在一个实施例中，步骤S2之后还包括在页面代码中进行对页面框架代码的修改和/或对Javascript标签的属性及其在页面框架代码中的相对位置的调整的步骤。

经过步骤S1中标签库的设置以及步骤S2中Javascript标签的添加，得到完成的初步页面代码之后，与背景技术部分的描述类似地，在经过测试人员的测试以及业务人员或客户的体验后，可能还需要对页面代码进行修改。这时，凡是涉及页面呈现效果的修改，都可以由美工对页面框架代码以及呈现效果相关代码进行修改，同时美工还可以顺便对页面框架代码中插入的Javascript标签的属性(例如包括大小、类型、序号等等)以及相对位置进行调整，而无需与技术开发去反复确认修改方案。同样，凡是涉及Javascript标签执行部分的修改，都可以由技术开发直接在标签库中对标签执行文件进行修改，而无需去关心标签执行文件执行时在页面的呈现效果。

在一个实施例中，本申请基于Javascript标签库的页面开发方法可以通过计算机等硬件运行计算机可执行程序来实现。

综上所述，本发明实施例所提供的页面开发方法，通过设置标签库，使得在页面框架代码中能够便利地添加Javascript标签来得到完成的页面代码；并且能够便利地通过修改页面框架代码和/或Javascript标签的相对位置来实现对页面代码的修改，从而使页面开发过程更为使捷、直观，提高了工作效率，也能够将执行页面代码的服务器始终保持在高效运行的状态。

虽然已参照几个典型实施例描述了本发明，但应当理解，所用的术语是说明和示例性、而非限制性的术语。由于本发明能够以多种形式具体实施而不脱离发明的精神或实质，所以应当理解，上述实施例不限于任何前述的细节，而应在随附权利要求所限定的精神和范围内广泛地解释，因此落入权利要求或其等效范围内的全部变化和改型都应为随附权利要求所涵盖。

Claims (6)

1.一种基于Javascript标签库的页面开发方法，包括：

S1、在页面服务器设置标签库，所述标签库用于存储Javascript标签和实现特定功能的标签执行文件，所述Javascript标签与所述标签执行文件一一对应；

S2、在页面框架代码中插入选自所述标签库的Javascript标签，得到完成的页面代码；所述Javascript标签用于在执行所述页面代码时调用对应的所述标签执行文件，以实现对应的特定功能。

2.如权利要求1所述基于Javascript标签库的页面开发方法，其中，步骤S1与S2之间还包括：

S3、在所述页面框架代码前插入Javascript核心文件，所述Javascript核心文件用于在执行所述页面代码时对所述页面代码中的所有所述Javascript标签进行管理。

3.如权利要求2所述基于Javascript标签库的页面开发方法，其中，步骤S3中所述Jascript核心文件对所述Javascript标签的管理包括：建立所述页面代码中的Javascript标签到所述标签库中的标签执行文件的对应关系，用于在执行所述页面代码时调用所述标签库中与所述Javascript标签对应的所述标签执行文件。

4.如权利要求3所述基于Javascript标签库的页面开发方法，其中，步骤S1与步骤S3之间还包括：

S4、在所述Javascript核心文件前插入安全验证代码，所述安全验证代码用于验证链接至所述页面代码的网站是否有权进行控制所述Javascript核心文件调用所述标签库的操作。

5.如权利要求4所述基于Javascript标签库的页面开发方法，其中，步骤S4中的所述验证包括：

在所述页面服务器预先设置鉴权数据库，所述鉴权数据库用于存储有权控制所述Javascript核心文件调用所述标签库的网站的地址和/或域名；所述页面代码执行到所述安全验证代码时，相应地根据所述鉴权数据库对当前链接至所述页面代码的网站的地址和/或域名进行鉴权。

6.如权利要求1～5任一项所述基于Javascript标签库的页面开发方法，其中，步骤S2之后还包括在所述页面代码中进行对所述页面框架代码的修改和/或对所述Javascript标签在所述页面框架代码中的相对位置的调整的步骤。

Images