CN104915212B - 一种可传参的javascript模块文件引入执行的方法 - Google Patents

Abstract

本发明涉及前端开发技术领域，尤其适合引入需要传入参数灵活可重用的javascript模块文件。本发明在被引入的javascript模块文件中增加获取传入获取参数、处理参数、调用接口等相关逻辑代码；通过常规引入javascript模块文件，在<script>标签中根据模块的需求增加自定义参数；被引入的javascript模块文件在加载解析的过程中执行上述增加的处理代码，从而实现独立的引入执行机制。本发明能够构建一种相当灵活的javascript模块文件：在<script>标签处传入参数可实现引入执行机制；不传入参数可使用传统的模式来调用模块接口。用于javascript模块引入执行。

Description

一种可传参的javascript模块文件引入执行的方法

技术领域

本发明涉及前端开发技术领域，尤其适合引入需要传入参数灵活可重用的javascript模块文件。

背景技术

近几年前端技术的不断发展，用户对软件界面的人机交互的要求越来越高，使得软件界面的复杂程度也相应地变得越来越高，前端开发人员越来越偏向开发一种可重用的javascript模块模块封装在单独的一个js文件中，在使用时候引入此模块文件，使用适当的参数调用接口即可快捷实现某种常用的交互效果，可重用模块化开发模式能够大大提高开发人员的工作效率。

同时jquery框架和软件开源的流行，jquery简单优雅流畅的调用方式使得开发变成艺术，推动越来越多人开发一种通过传入适当参数调用相应的接口便可实现复杂效果的jquery插件。

传统的模式是：先引入javascript模块文件，在其他地方编写代码传入适当的参数调用接口。这本来是理所当然的事情，但是随着用户对界面的交互越来越多，界面所引入的javascript模块越来越多，不断重复着引入-调用的模式。代码越来越复杂，同时代码的耦合程度不断增强，代码变得越来越不好维护了。某一天某一个模块需要替换或者删除，开发人员需要删除javascript模块文件的引入，然后在一堆代码中寻找调用此接口的代码。如果这是另外开发人员编写的代码的情况，当前的开发人员可能需要通过多次的尝试才能把调用接口的代码分毫不差地正确删除，对开发人员来说是一件痛苦而且浪费时间但是又必须面对的工作。

发明内容

本发明解决的技术问题在于提供一种可传参的javascript模块文件引入执行的方法，解决“引入javascript模块文件--在其他地方调用javascript模块接口”这种传统模式带来的代码耦合和维护困难的问题。

本发明解决上述技术问题的技术方案是：

在被引入的javascript模块文件中增加获取传入获取参数、处理参数、调用接口等相关逻辑代码；通过常规引入javascript模块文件，在<script>标签中根据模块的需求增加自定义参数；被引入的javascript模块文件在加载解析的过程中执行上述增加的代码，从而实现独立的引入执行机制。

所述方法的具体流程为：

第一步，在被引入的javascript模块文件的基础上添加获取当前<script>标签所传入的参数的逻辑代码；

var scripts＝document.getElementsByTagName(‘script’)，

//获取所有标签

config＝scripts[scripts.length-1].getAttribute(‘data-config’)；

//获取当前标签的所有参数

其中data-config这个参数是给<script>标签设置的自定义属性，之所以增加data-的前缀，是因为遵从html5的标准，给数据类型的属性增加前缀便于区分；若传入的参数为object类型字符串，则增加把object字符串正确解析成object类型的代码：

config＝eval(‘(’+config+’)’)；

第二步，在被引入javascript模块文件中增加处理参数的逻辑代码：

(1).<script>标签没传入参数：等待外部代码使用参数调用接口；

(2).<script>标签传入参数且data-config参数为default：在模块内部按照定义的默认参数调用接口；

(3).<script>标签传入参数且data-config参数为非default的其他值：在模块内部使用传入的参数覆盖默认的参数调用接口；

第三步，通过<script>标签引入javascript模块文件，并添加data-config＝”{autoStart：1，second：1}”的属性；

第四步，解析被引入的javascript模块文件的过程中，模块内部代码获取并解析data-config的参数并覆盖默认的autoStart和second这两个参数；

第五步，在模块内部使用合并后的参数调用接口。

所述方法中不传参数的详细引入执行流程为：

第一步，在被引入的javascript模块文件的基础上添加获取<script>标签所传入参数的逻辑代码：

var scripts＝document.getElementsByTagName(‘script’)，

config＝scripts[scripts.length-1].getAttribute(‘data-config’)；

其中data-config这个参数是给<script>标签设置的属性，增加data-的前缀是遵从html5的标准；

第二步，在模块文件内部增加没传参的判断，等到外部代码调用接口；

第三步，使用<script>标签正常引入javascript模块文件；

第四步，在外部代码中使用参数调用接口。

本发明与传统的模式相比，javascript模块文件的独立性强，无需再在别的地方调用被引入的javascript模块文件所提供的接口完成执行，仅需在引入时候传入参数即可实现引入执行。本发明同时兼容传统的模式，对于不传入参数的情况则使用传统的模式执行。

附图说明

下面结合附图对本发明进一步说明：

图1是本发明详细流程。

具体实施方式

如图1所示，本发明通过在<script>引入javascript中设置data-config参数和在被引入的javascript模块文件中处理data-config的详细流程。

下面以调用一个轮播的焦点图--jquery插件easySlider为例，详细说明本发明的具体实施方式：

第一步，在easySlider中添加以下代码：

获取参数：

第二步，通过<script type＝”text/javascript”data-sliderID＝’#myslider’data-config＝”{speed：600}”src＝”plugins/easyslider.js”>的方式引入。与传统引入方式的显著差异是：添加了data-sliderID和data-config这两个参数。easySlider模块文件内部在解析的过程中调用了第一步添加的代码，即可在ID为myslider的元素中，使用了speed：600，auto：true，continuous：true这三个参数执行了easyslider效果。其中speed：600是使用了外部传入的方式，其余两个均直接使用了模块内部自定义的默认值，如需要覆盖这两个值，在data-config增加即可。

Claims (2)

1.一种可传参的javascript模块文件引入执行的方法，其特征在于：在被引入的javascript模块文件中增加获取传入获取参数、处理参数、调用接口的相关逻辑代码；通过常规引入javascript模块文件，在<script>标签中根据模块的需求增加自定义参数；被引入的javascript模块文件在加载解析的过程中执行上述增加的代码，从而实现独立的引入执行机制；

所述方法的具体流程为：

第一步，在被引入的javascript模块文件的基础上添加获取当前<script>标签所传入的参数的逻辑代码；

利用程序var scripts＝document.getElementsByTagName(‘script’),此代码的功能是获取所有script标签，scripts参数表示获取所有标签对象；

利用程序config＝scripts[scripts.length-1].getAttribute(‘data-config’)，此代码的功能是获取当前标签的所有参数；

其中data-config这个参数是给<script>标签设置的自定义属性，之所以增加data-的前缀，是因为遵从html5的标准，给数据类型的属性增加前缀便于区分；若传入的参数为object类型字符串，则增加把object字符串正确解析成object类型的代码；

第二步，在被引入javascript模块文件中增加处理参数的逻辑代码：

(1).若<script>标签没传入参数：等待外部代码使用参数调用接口；

(2).若<script>标签传入参数且data-config参数为default：在模块内部按照定义的默认参数调用接口；

(3).若<script>标签传入参数且data-config参数为非default的其他值：在模块内部使用传入的参数覆盖默认的参数调用接口；

第三步，通过<script>标签引入javascript模块文件，并添加data-config＝”{autoStart:1,second:1}”的属性；其中autoStart表示是否自动执行，其中，0表示不自动执行，1表示自动执行；如果autoStart为0时，则second参数失效；否则second的数值越大，执行的优先级越高；

第四步，解析被引入的javascript模块文件的过程中，模块内部代码获取并解析data-config的参数并覆盖默认的autoStart和second这两个参数；autoStart默认为0，second参数失效；

第五步，在模块内部使用合并后的参数调用接口。

2.根据权利要求1所述的方法，其特征在于：所述方法中不传参数的详细引入执行流程为：

第一步，在被引入的javascript模块文件的基础上添加获取<script>标签所传入参数的逻辑代码；

在逻辑代码中，data-config这个参数是给<script>标签设置的属性，增加data-的前缀是遵从html5的标准；

第二步，在模块文件内部增加没传参的判断，等到外部代码调用接口；如果没传入参数，不作任何处理；

第三步，使用<script>标签正常引入javascript模块文件；

第四步，在外部代码中使用参数调用接口。