一种网页脚本加载方法和装置与流程

本申请涉及网页技术领域，特别是涉及一种网页脚本加载方法和一种网页脚本加载装置。

背景技术：

随着互联网的发展，网页的业务也越来越多。而在先技术中，前端在开发网页代码时，如果该网页有新的业务需求后，则根据需求在网页代码中添加新的业务代码，随着业务的变更和增加，该网页代码比较散比较杂。

其中，在网页开发中的前端：通常是针对浏览器等客户端程序而开发的，是在浏览器端运行的程序；前端是在web应用中用户可以看得见碰得着的东西，包括web页面的结构、web页面的外观视觉表现以及web页面的交互实现。相应的，后端：针对的是服务器，准确的来说应该是针对服务器端开发的，在服务器中运行的是提供数据的程序；后端更多的是与数据库进行交互以处理相应的业务逻辑，需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

在上述情况中，如果某些业务存在重合的功能时，需要在各个业务代码中对该功能重复编写相应代码，代码复用性差、代码量大；并且上述散乱的代码可能导致业务的逻辑耦合，导致对某个业务修改时，由于逻辑耦合，需要修改大量相关的其他业务的代码；再者，如果要对该网页进行业务拆分，由于代码散乱和逻辑耦合，也很难拆分。

技术实现要素：

鉴于上述问题，提出了本申请实施例以便提供一种克服上述问题或者至少部分地解决上述问题的一种网页脚本加载方法和相应的一种网页脚本加载装置。

为了解决上述问题，本申请公开了一种网页脚本加载方法，包括：

加载第一脚本；

根据针对所述第一脚本的依赖定义，解析所述第一脚本的依赖；

当所述第一脚本的依赖包括各第二脚本，则获取各第二脚本进行加载；

当所述第一脚本的依赖包括html文件，则通过第三方插件获取所述html文件并渲染；

当所述第一脚本的依赖包括各级联样式文件，则通过第三方插件获取各级联样式文件并渲染；

在所述第一脚本的各依赖全部处理完毕后，执行所述第一脚本的业务逻辑。

本申请还公开了一种网页脚本加载装置，包括：

第一脚本加载模块，用于加载第一脚本；

依赖解析模块，用于根据针对所述第一脚本的依赖定义，解析所述第一脚本的依赖；

第二脚本处理模块，用于当所述第一脚本的依赖包括各第二脚本，则获取各第二脚本进行加载；

html文件处理模块，用于当所述第一脚本的依赖包括html文件，则通过第三方插件获取所述html文件并渲染；

级联样式文件处理模块，用于当所述第一脚本的依赖包括各级联样式文件，则通过第三方插件获取各级联样式文件并渲染；

第一脚本执行模块，用于在所述第一脚本的各依赖全部处理完毕后，执行所述第一脚本的业务逻辑。

本申请实施例包括以下优点：

本申请实施例，可以针对网页需求的各个功能模块，预先设置相应的第二脚本，各业务或者功能的html(hypertextmark-uplanguage，超文本标记语言)文件，各个脚本对应的css(cascadingstylesheets，级联样式表)文件，然后对于网页的某个业务或者功能，如果其需要相应的第二脚本、html文件、级联样式表，则可以在该业务或功能相应的第一脚本的依赖定义中，定义该第一脚本所依赖的各个第二脚本，html文件和各css文件。那么客户端在获取到该第一脚本后，首先从其依赖定义中解析出其依赖的第二脚本、html文件、级联样式表文件等依赖。对于第二脚本，然后先获取各第二脚本进行加载；对于html文件，可通过第三方插件获取所述html文件并渲染；对于级联样式文件，可通过第三方插件获取各级联样式文件并渲染，在所述第一脚本的各依赖全部处理完毕后，客户端再执行所述第一脚本的业务逻辑的代码。如此，网页代码的各个业务的依赖关系明晰，各个功能的代码复用性强，代码量能够降低，网页代码结构清晰，各业务的逻辑能够解耦，方便修改网页代码，方便进行业务拆分等工作。

附图说明

图1是本申请的一种网页脚本加载方法实施例的步骤流程图；

图2是本申请的另一种网页脚本加载方法实施例的步骤流程图；

图2a是本申请的一种网页脚本加载方法的逻辑示例图；

图3是本申请的一种网页脚本加载装置实施例的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

本申请实施例的核心构思之一在于，可以对各个网页需求的各个功能模块，预先设置相应的第二脚本，各业务或者功能的html(hypertextmark-uplanguage，超文本标记语言)文件，各个脚本对应的css(cascadingstylesheets，级联样式表)文件，然后对于某个网页，其某个业务或者功能，如果其需要相应的第二脚本、html文件、级联样式表，则可以在相应的第一脚本的依赖定义中，定义该第一脚本所依赖的各个第二脚本，html文件和各css文件。那么客户端在获取到该第一脚本后，可以利用requirejs(requirejs是一个javascript模块载入框架，是amd(asynchronousmoduledefinition，异步模块加载机制)规范的实现者之一)等库，首先从其依赖定义中获解析出其依赖的第二脚本、html文件、级联样式文件。对于html文件，可通过第三方插件获取所述html文件并渲染；对于级联样式文件，可通过第三方插件获取各级联样式文件并渲染，在所述第一脚本的各依赖全部处理完毕后，客户端再执行所述第一脚本的业务逻辑的代码。如此，网页代码的各个业务的依赖关系明晰，各个功能的代码复用性强，代码量能够降低，网页代码结构清晰，各业务的逻辑能够解耦，方便修改网页代码，方便进行业务拆分等工作。

实施例一

参照图1，示出了本申请的一种网页脚本加载方法实施例的步骤流程图，具体可以包括如下步骤：

步骤110，加载第一脚本；

在本申请实施例中，在前端构建网页时，可以在网页的主html文档的html代码中预置加载第一脚本的加载接口。比如在html代码的<script>中添加上述加载接口。

比如采用requirejs库的加载接口，其加载接口示例如下：<scriptdata-main＝"main"src＝"require.js"></script>。其中src＝"require.js"，表示第一脚本的在服务器的路径，data-main＝"main"表示第一脚本的主函数。

当然，实际应用中，第一脚本的加载接口也可以在其他位置添加，本申请实施例不对其加以限制。

在本申请实施例中，在该网页代码中可以添加一个第一脚本的加载接口，也可以添加多个第一脚本的加载接口，本申请实施例不对其加以限制。当然，如果有多个第一脚本的加载接口，各个第一脚本的业务逻辑不同。

在本发明实施例中，当客户端获取到主html文档后，解析其中的html代码，当解析到上述第一脚本的加载接口，则从服务器中获取相应的第一脚本，然后加载该第一脚本。

在本申请实施例中，在第一脚本中，预先设置了依赖定义，比如在第一脚本的主函数中定义了第一脚本依赖的各第二脚本、html文件、css文件其中一个或者多个。然后在服务器的相应路径的文件夹下，放入依赖的各第二脚本、和/或html文件、和/或css文件。

可以理解，在实际应用中，当客户端获取到主html文档后，解析其他的html代码，还可能解析其他的部分，比如该html代码中的其他标签。本申请实施例不对其加以限制。

当然本申请还可以采用其他库的加载接口，本申请实施例不对其加以限制。

可以理解，该客户端可以为浏览器、也可以为其他能够处理html代码的程序或者应用。其中该浏览器可以为个人电脑浏览器、也可以为智能移动终端的浏览器。本申请实施例不对其加以限制。

步骤120，根据针对所述第一脚本的依赖定义，解析所述第一脚本的依赖；

由于本申请预先为第一脚本设置了依赖定义，那么在加载该第一脚本后，则首先从该第一脚本的依赖定义中，解析该第一脚本的依赖。

在实际应用中，由于服务器侧的技术开发人员，可以根据业务需求的第二脚本、和/或html文件、和/或css文件，该第一脚本的依赖定义中写入需求的第二脚本、和/或html文件、和/或css文件。那么本申请实施例中，在解析该第一脚本的依赖时可能存在多种情况，如：

1、只依赖第二脚本。

2、只依赖html文件。

3、只依赖css文件。

该种情况下，该css文件可以是针对第一脚本的css文件。

4、依赖各第二脚本和html文件。

5、依赖第二脚本和css文件；

该种情况下，如果有多个css文件，该多个css文件可能是针对第一脚本和第二脚本中的某些个脚本的css文件。

6、依赖html文件、和css文件；

该种情况下，该css文件可以是针对第一脚本的css文件。

7、依赖第二脚本、html文件、css文件。

该种情况下，如果有多个css文件，该多个css文件可能是针对第一脚本和第二脚本中的某些个脚本的css文件。

那么本申请实施例，在解析第一脚本的依赖，根据预先设置的情况，可能解析到上述几种情况。

步骤130，当所述第一脚本的依赖包括各第二脚本，则获取各第二脚本进行加载；

在本申请实施例中，如果前述解析得到的依赖包括各第二脚本，则在前述的路径的文件夹下，从服务器获取各第二脚本，然后可以加载各第二脚本。

在本申请实施例中，当第一脚本依赖的某个或者某几个第二脚本，该第二脚本也可作为第一脚本的身份，那么在加载该第一脚本后，执行步骤120-160。

步骤140，当所述第一脚本的依赖包括html文件，则通过第三方插件获取所述html文件并渲染；

在本申请实施例中，可以在客户端访问网页时或者之前为客户端加载requirejs的第三方插件。那么如果前述解析得到的依赖包括html文件，则可以通过requirejs的第三方插件在前述的路径的文件夹下，从服务器获取各html文件，然后即可基于该html文件进行渲染。

在本申请实施例中，该html文件渲染后对应前述主html文档的网页的子界面。

在本申请另一优选的实施例中，所述html文件包括html模板、用户数据、国际化文件。

其中用户数据包括用户个性化信息等业务数据。国际化文件包国际化文案数据。html模板为预定的各种页面模板，该html模板包括至少多个填入数据的字段，如填入用户各种个性化信息的字段和填入国际化文案数据的字段。

进一步的，步骤140包括子步骤141-143：

子步骤141，获取html模板、用户数据和国际化文件；

在本申请实施例中，第一脚本依赖的html文件包括了html模板、用户数据和国际化文件。本申请可以获取html模板、用户数据和国际化文件。

在本申请另一优选的实施例中，子步骤141包括子步骤a11：

子步骤a11，获取所述html模板的text类型的html模板。

requirejs的第三方插件以text文件类型，从服务器或html模板文件，然后存储到内存中。

该种方式可以避免客户端(如浏览器)直接获取到html模板的代码，然后直接解析并渲染了该html模板的代码，导致渲染得到的网页中没有实际的数据展示。

子步骤142，调用模板渲染引擎，将所述html模板、用户数据和国际化文件拼接为html代码；

本申请实施例则可以调用模板渲染引擎，将用户数据和国际化文件填入html模板中，得到html代码。

在本申请实施例中该模板渲染引擎可以为ejs(ejs是canjs的默认的模版语言)模板渲染引擎。

在本申请实施例中，以ejs模板渲染引擎为例，可以预先构建一个ejs模板渲染引擎。并且在第一脚本依赖的html文件的代码中，添加<script>标签，然后在该<script>标签引用ejs模板渲染引擎如：<scripttype＝"text/javascript"src＝"/js/ejs.js"></script>。那么浏览器获取到主html文档后，执行到该<script>……</script>代码，则会获取ejs引擎的脚本，然后加载。

而html模板文件、用户数据、国际化文件可按照ejs模板渲染引擎的规定构建。比如html模板文件设置为：

用户数据设置为：

国际化文件可以采用类似用户数据的形式设置。当然实际应用中，对于国际化文件的符合ejs模板渲染模板的规定的代码，可以将其再封装为json(javascriptobjectnotation，是一种轻量级的数据交换格式)文件格式。

在本申请另一优选的实施例中，上述国际化文件包括各种语言的国际化文案数据。

在本申请实施例中，对于某个的文案，由于存在不同的语言环境可能不同，比如中文语言环境，英文语言环境，德语语言环境等等，为了方便网页可以被不同语言环境的浏览器访问该网页时，可以在该网页中展示相应语言环境的文案，本申请可以将该文件预先翻译成不同语言环境下的国际化文案，然后将其按ejs模板渲染引擎规定的数据格式编译好，再将编译好的各个国际化文案数据封装到一份json文件中。

则进一步的，所述调用模板渲染引擎，将所述html模板、用户数据和国际化文件拼接为html代码的步骤，包括子步骤1421-子步骤1423：

子步骤1421，获取当前系统的语言环境；

由于国际化文案的json文件中包括了多种语言的国际化文案，而为了适配用户的客户端的语言环境，方便用户阅读网页，本申请实施例首先需要获取当前客户端所在系统的语言环境。比如当前系统的语言环境为中文，则可以获取其语言环境标识，如cn。

子步骤1422，从所述国际化文件中提取对应所述语言环境的国际化文案数据；

那么根据cn，从json文件中提取cn对应的国际化文案数据。

子步骤1423，调用模板渲染引擎，将所述html模板、用户数据和国际化文案数据拼接为html代码。

然后调用ejs模板渲染引擎，提取前述暂存的html模板“html”，然后将data、cn对应的国际化文案数据拼接到该html模板“html”，得到真正的可正常执行的html代码。

子步骤143，执行所述html代码，并将所述html代码对应的子界面渲染到指定容器中。

对模板渲染引擎拼接得到的html代码，则执行该代码，则会根据该html代码进行渲染，渲染到指定容器。该指定容器为前述主html文档渲染后得到的容器。

步骤150，当所述第一脚本的依赖包括各级联样式文件，则通过第三方插件获取各级联样式文件并渲染；

在本申请实施例中，可以预先在第一脚本中为浏览器加载requirejs的第三方插件。那么如果前述解析得到的依赖包括css样式文件，则可以通过requirejs的第三方插件在前述的路径的文件夹下，从服务器获取各css样式文件然后对该css样式文件进行渲染。

在本申请另一优选的实施例中，当所述各级级联样式文件包括第一脚本的级联样式文件和至少一个第二脚本的级联样式文件时，则所述步骤150包括子步骤151-153：

子步骤151，获取第一脚本的级联样式文件和至少一个第二脚本的级联样式文件；

在本申请实施例中，如果第一脚本包括css脚本，以及其依赖的第二脚本中的一个或者多个包括css文件，则可以先通过前述第三方插件从服务器相应目录的文件夹中或上市css文件。

在本申请实施例中，对避免requirejs的逻辑将获取到的css文件直接渲染，本申请实施例则以requirejs不能加载的格式从服务器获取css文件。

在本申请另一优选的实施例中，子步骤151包括子步骤a21：

子步骤a21，获取所述第一脚本的级联样式文件的text类型的级联样式文件。

在本申请实施例中，可以采用text类型的方式从服务器获取第一脚本的css文件，然后存储到内存中，此时requrejs则无法直接加载该css文件。

子步骤152，加载并渲染所述至少一个第二脚本的级联样式文件；

在本申请实施例中，在首先加载并渲染第二脚本css文件。

在本申请另一优选的实施例中，子步骤152包括子步骤a31：

子步骤a31，通过link标签加载并渲染所述至少一个第二脚本的级联样式文件。

在实际应用中，对于每个第二脚本的css文件，将其加入link标签，然后requirejs就可以link标签直接加载并渲染该link对应的css文件。

子步骤153，在第二脚本的级联样式文件渲染完毕之后，再加载并渲染第一脚本的级联样式文件。

在所有第二脚本的css文件渲染完毕之后，本申请实施例才会加载第一脚本的css文件。

在本申请另一优选的实施例中，子步骤153包括子步骤a41：

子步骤a31，在第二脚本的级联样式文件渲染完毕之后，通过style标签加载并渲染所述text类型的级联样式文件。

在本申请实施例中，由于前述第一记录样式文件的css文件暂存到内存中了，那么在第二脚本的css文件渲染完毕之后，则可以从内存中提取该css文件，然后以style标签加载该text类型文件。如此，保证了第一脚本的css文件可以在最后加载，第一脚本的样式不会被第二脚本的样式覆盖。

当然，在本申请实施例中，如果第一脚本没有css文件，对于各第二脚本的css样式，可以采用link标签直接加载。

步骤160，在所述第一脚本的各依赖全部处理完毕后，执行所述第一脚本的业务逻辑。

在本申请实施例中，在前述第一脚本的全部依赖处理完毕后，上述依赖的处理结果作为参数输入第一脚本，第一脚本则可以根据该参数执行其具体的业务逻辑。

本申请实施例，可以针对网页需求的各个功能模块，预先设置相应的第二脚本，各业务或者功能的html(hypertextmark-uplanguage，超文本标记语言)文件，各个脚本对应的css(cascadingstylesheets，级联样式表)文件，然后对于网页的某个业务或者功能，如果其需要相应的第二脚本、html文件、级联样式表，则可以在该业务或功能相应的第一脚本的依赖定义中，定义该第一脚本所依赖的各个第二脚本，html文件和各css文件。那么客户端在获取到该第一脚本后，首先从其依赖定义中获解析出其依赖的第二脚本、html文件、级联样式表文件等依赖。对于第二脚本，然后先获取各第二脚本进行加载；对于html文件，可通过第三方插件获取所述html文件并渲染；对于级联样式文件，可通过第三方插件获取各级联样式文件并渲染，在所述第一脚本的各依赖全部处理完毕后，客户端再执行所述第一脚本的业务逻辑的代码。如此，本申请实施例具备以下优点：

其一，本申请将网页的需求的各个功能，按照功能模块划分为各个模块，然后按照模块编辑代码，然后存储到服务器中，每个模块的代码基本上相互独立，如果某个网页的某个第一脚本需要某个功能时，则在第一脚本的依赖中定义该功能的模块名称和目录，即可使用该模块的代码。如此，对于前端开发来说，代码的复用率高，减少了网页的代码量。

其二，由于按照功能模块划分各个模块，在网页的代码中，采用第一脚本依赖各个模块的代码的方式，而客户端可以根据定义提取相应模块的代码，然后根据相应的执行逻辑执行，不用在主html文档中为各个模块定义全局变量，各个模块的逻辑可以解耦，如果要修改一个功能的模块的代码，由于能够解耦，对于前端开发来说，修改的代码量小。

其三，基于上述过程，网页代码的结构清晰，各业务的逻辑能够解耦，方便进行业务拆分等工作。

实施例二

参照图2，示出了本申请的另一种网页脚本加载方法实施例的步骤流程图，具体可以包括如下步骤：

步骤210，加载第一脚本；所述第一脚本的依赖定义中所定义的依赖包括：各第二脚本、html文件、各级联样式文件；所述html文件包括html模板、用户数据、国际化文件；所述国际化文件包括各种语言的国际化文案数据；所述各级级联样式文件包括第一脚本的级联样式文件和至少一个第二脚本的级联样式文件；

本申请实施例结合图2a进行描述，图2a的示例中，预先定义了第一脚本a.js，a.js依赖第二脚本，第二脚本包括b.js、c.js、d.js，以及依赖html文件，html文件包括html模板“html”、用户数据“data”、国际化文件“国际化文案”，以及依赖css文件，css文件包括第一脚本a的css文件a.css、第二脚本c的css文件c.css、第二脚本d的css文件d.css。

上述a.js、b.js、c.js、d.js、html模板“html”、用户数据“data”、国际化文件“国际化文案”、a.css、c.css、d.css可以放到服务器的指定目录的某个文件夹中。

当然，在第一脚本的依赖定义中，还可配置各依赖在服务器中的路径，如前述的指定目录的文件夹中的各依赖。

客户端在获取到第一脚本a.js后，如图2a在b10中加载该a.js。

步骤212，根据针对所述第一脚本的依赖定义，解析所述第一脚本的依赖；

在本申请实施例中加载了a.js后，解析其依赖定义，则解析上述的依赖，即b.js、c.js、d.js、html模板“html”、用户数据“data”、国际化文件“国际化文案”、a.css、c.css、d.css。如图2a的b20，其在a.js加载之后，解析该a.js的依赖。然后分别进入b21进行js依赖加载、b22进行html模板渲染、b23进行css渲染。

步骤214、获取各第二脚本进行加载；

如图2a中，在b21中执行a.js依赖的js的加载过程。

那么本申请实施例可以从服务器分别获取b.js、c.js、d.js，然后在b211中进行递归加载。在本申请实施例中，如果第二脚本还依赖更深层级的脚本，则可以将该第二脚本放在第一脚本的角色，先解析其依赖，然后加载其依赖的脚本，然后递归加载其同级的其他脚本。

如图2a中，如果在b212中判断b.js、c.js、d.js都加载完毕，则进入b30。

步骤216，通过requirejs的第三方插件获取所述html模板的text类型的html模板，以及用户数据、国际化文件；

如图2a中，在b22中执行html模板的渲染。

在本申请实施例中对于html模板“html”，则获取“html”的text类型的文件，用户数据“data”、国际化文件“国际化文案”。

在本申请实施例中，国际化文件可以采用json文件的形式进行存储，然后指定该json文件的路径。比如前述在服务器中的目录。在实际应用中，json文件中，可以根据不同的语言环境，以语言类型为标示，将多种语言的国际化文案维护在这份json文件中。

步骤218，获取当前系统的语言环境；

由于国际化文案的json文件中包括了多种语言的国际化文案，而为了适配用户的客户端的语言环境，方便用户阅读网页，本申请实施例首先需要获取当前客户端所在系统的语言环境。比如当前系统的语言环境为中文，则可以获取其语言环境标识，如cn。

步骤220，从所述国际化文件中提取对应所述语言环境的国际化文案数据；

那么根据cn，从json文件中提取cn对应的国际化文案数据。

步骤222，调用ejs模板渲染引擎，将所述html模板、用户数据和国际化文案数据拼接为html代码；

如图2a中，在b221中，调用ejs模板渲染引擎，载入前述text类型的html模板“html”，然后将data以及前述cn对应的国际化文案数据拼接到该html模板“html”，输出真正的可正常执行的html代码。

步骤224，执行所述html代码，并将所述html代码对应的子界面渲染到指定容器中。

然后执行该html代码进行相应的渲染，将相应的对象渲染到实施例一所述的指定容器中。

如图2a如果在b222中判断html完成渲染，则进入步骤b30。

其中，所述步骤216-步骤224为实施例一步骤140优选的步骤。

步骤226，通过requirejs的第三方插件获取所述第一脚本的级联样式文件的text类型的级联样式文件和至少一个第二脚本的级联样式文件；

如图前述例子，第一脚本a.js包括级联样式文件a.css，第二脚本c.js包括c.css，第二脚本d.js包括d.css。第二脚本b.js不包括级联样式文件。

那么如图2a，对于a.css，可以通过requirejs的第三方插件获取该a.css的text类型的文件，然后在b231中将其暂存至内存中。同时，可以正常获取c.css和d.css。

步骤228，通过link标签加载并渲染所述至少一个第二脚本的级联样式文件；

对于图2a中的c.css和d.css，在b232中通过link标签渲染c.css和d.css。

步骤230，在第二脚本的级联样式文件渲染完毕之后，通过style标签加载并渲染所述text类型的级联样式文件。

如图2a，在b233中如果判断c.css和d.css完成渲染，则转入b234中，从内存中获取a.css，利用style标签渲染a.css。在b235中如果判断a.css渲染完毕，则进入b30。

其中，所述步骤226-步骤230为实施例一步骤150优选的步骤。

步骤232，在所述第一脚本的各依赖全部处理完毕后，执行所述第一脚本的业务逻辑。

如图2a，在实际应用中，b21、b22、b23可以是异步执行，各部分可以不是同一时刻处理完毕，那么本申请实施例b30判断各部分是否都执行完毕，如果都执行完毕，则在b40中执行a.js的业务逻辑的代码。b40执行完毕后，用户可在浏览器侧的在页面中操作a.js相关功能。

本申请实施例，可以针对网页需求的各个功能模块，预先设置相应的第二脚本，各业务或者功能的html(hypertextmark-uplanguage，超文本标记语言)文件，各个脚本对应的css(cascadingstylesheets，级联样式表)文件，然后对于网页的某个业务或者功能，如果其需要相应的第二脚本、html文件、级联样式表，则可以在该业务或功能相应的第一脚本的依赖定义中，定义该第一脚本所依赖的各个第二脚本，html文件和各css文件。那么客户端在获取到该第一脚本后，首先从其依赖定义中获解析出其依赖的第二脚本、html文件、级联样式表文件等依赖。对于第二脚本，然后先获取各第二脚本进行加载；对于html文件，可通过第三方插件获取所述html文件并渲染；对于级联样式文件，可通过第三方插件获取各级联样式文件并渲染，在所述第一脚本的各依赖全部处理完毕后，客户端再执行所述第一脚本的业务逻辑的代码。如此，网页代码的各个业务的依赖关系明晰，各个功能的代码复用性强，代码量能够降低，网页代码结构清晰，各业务的逻辑能够解耦，方便修改网页代码，方便进行业务拆分等工作。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本申请实施例所必须的。

实施例三

参照图3，示出了本申请的一种网页脚本加载装置实施例的结构框图，具体可以包括如下模块：

第一脚本加载模块310，用于加载第一脚本；

依赖解析模块320，用于根据针对所述第一脚本的依赖定义，解析所述第一脚本的依赖；

第二脚本处理模块330，用于当所述第一脚本的依赖包括各第二脚本，则获取各第二脚本进行加载；

html文件处理模块340，用于当所述第一脚本的依赖包括html文件，则通过第三方插件获取所述html文件并渲染；

级联样式文件处理模块350，用于当所述第一脚本的依赖包括各级联样式文件，则通过第三方插件获取各级联样式文件并渲染；

第一脚本执行模块360，用于在所述第一脚本的各依赖全部处理完毕后，执行所述第一脚本的业务逻辑。

在本申请实施例中，该网页脚本加载装置处于客户端中，比如处于浏览器中，执行时可以从服务器获取相应数据。

在本申请一优选的实施例中，所述html文件包括：html模板、用户数据、国际化文件；

则所述html文件处理模块340包括：

第一获取子模块，用于获取html模板、用户数据和国际化文件；

拼接子模块，用于调用模板渲染引擎，将所述html模板、用户数据和国际化文件拼接为html代码；

html渲染子模块，用于执行所述html代码，并将所述html代码对应的子界面渲染到指定容器中。

在本申请一优选的实施例中，，所述第一获取子模块包括：

第一text文件获取模块，用于获取所述html模板的text类型的html模板。

在本申请一优选的实施例中，，所述国际化文件包括各种语言的国际化文案数据；

所述拼接子模块包括：

语言环境获取子模块，用于获取当前系统的语言环境；

文案数据提取模块，用于从所述国际化文件中提取对应所述语言环境的国际化文案数据；

第一拼接子模块，用于调用模板渲染引擎，将所述html模板、用户数据和国际化文案数据拼接为html代码。

在本申请一优选的实施例中，当所述各级级联样式文件包括第一脚本的级联样式文件和至少一个第二脚本的级联样式文件时，

则所述级联样式文件处理模块350包括：

第二获取子模块，用于获取第一脚本的级联样式文件和至少一个第二脚本的级联样式文件；

被依赖样式处理子模块，用于加载并渲染所述至少一个第二脚本的级联样式文件；

依赖样式处理子模块，用于在第二脚本的级联样式文件渲染完毕之后，再加载并渲染第一脚本的级联样式文件。

在本申请一优选的实施例中，所述第二获取子模块包括：

第二text文件获取模块，用于获取所述第一脚本的级联样式文件的text类型的级联样式文件。

在本申请一优选的实施例中，所述依赖样式处理子模块包括：

style标签处理子模块，用于在第二脚本的级联样式文件渲染完毕之后，通过style标签加载并渲染所述text类型的级联样式文件。

在本申请一优选的实施例中，所述被依赖样式处理子模块包括：

link标签处理模块，用于通过link标签加载并渲染所述至少一个第二脚本的级联样式文件。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请实施例可以对网页需求的各个功能预先设置相应的第二脚本，各业务或者功能的html(hypertextmark-uplanguage，超文本标记语言)文件，各个脚本对应的css(cascadingstylesheets，级联样式表)文件，然后对于网页的某个业务或者功能，如果其需要相应的第二脚本、html文件、级联样式表，则可以在相应的第一脚本的依赖定义中，定义该第一脚本所依赖的各个第二脚本，html文件和各css文件。那么客户端在获取到该第一脚本后，可以利用requirejs(requirejs是一个javascript模块载入框架，是amd(asynchronousmoduledefinition，异步模块加载机制)规范的实现者之一)等库，首先从其依赖定义中获解析出其依赖的第二脚本、html文件、级联样式表，然后获取各第二脚本进行加载，通过第三方插件获取所述html文件并渲染，通过第三方插件获取各级联样式文件并渲染，在所述第一脚本的各依赖全部处理完毕后，执行所述第一脚本的业务逻辑。如此，网页代码的各个业务的依赖关系明晰，相应的网页代码结构清晰，各业务的逻辑能够解耦，代码量减少，方便修改网页代码，方便进行业务拆分等工作。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。

在一个典型的配置中，所述计算机设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非持续性的电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种网页脚本加载方法和一种网页脚本加载装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。