一种可传参的javascript模块文件引入执行的方法
【技术领域】
[0001] 本发明涉及前端开发技术领域，尤其适合引入需要传入参数灵活可重用的 javascript模块文件。
【背景技术】
[0002] 近几年前端技术的不断发展，用户对软件界面的人机交互的要求越来越高，使得 软件界面的复杂程度也相应地变得越来越高，前端开发人员越来越偏向开发一种可重用的 javascript模块模块封装在单独的一个js文件中，在使用时候引入此模块文件，使用适当 的参数调用接口即可快捷实现某种常用的交互效果，可重用模块化开发模式能够大大提高 开发人员的工作效率。
[0003] 同时jquery框架和软件开源的流行，jquery简单优雅流畅的调用方式使得开发 变成艺术，推动越来越多人开发一种通过传入适当参数调用相应的接口便可实现复杂效果 的jquery插件。
[0004] 传统的模式是：先引入javascript模块文件，在其他地方编写代码传入适当的参 数调用接口。这本来是理所当然的事情，但是随着用户对界面的交互越来越多，界面所引入 的javascript模块越来越多，不断重复着引入-调用的模式。代码越来越复杂，同时代码的 耦合程度不断增强，代码变得越来越不好维护了。某一天某一个模块需要替换或者删除，开 发人员需要删除javascript模块文件的引入，然后在一堆代码中寻找调用此接口的代码。 如果这是另外开发人员编写的代码的情况，当前的开发人员可能需要通过多次的尝试才能 把调用接口的代码分毫不差地正确删除，对开发人员来说是一件痛苦而且浪费时间但是又 必须面对的工作。
【发明内容】
[0005] 本发明解决的技术问题在于提供一种可传参的javascript模块文件引入执行的 方法，解决"引入javascript模块文件一在其他地方调用javascript模块接口"这种传 统模式带来的代码耦合和维护困难的问题。
[0006] 本发明解决上述技术问题的技术方案是：
[0007] 在被引入的javascript模块文件中增加获取传入获取参数、处理参数、调用接口 等相关逻辑代码；通过常规引入javascript模块文件，在〈script〉标签中根据模块的需求 增加自定义参数；被引入的javascript模块文件在加载解析的过程中执行上述增加的代 码，从而实现独立的引入执行机制。
[0008] 所述方法的具体流程为：
[0009] 第一步，在被引入的javascript模块文件的基础上添加获取当前〈script〉标签 所传入的参数的逻辑代码；
[0010] var scripts = document. getElementsByTagName( 'script')，
[0011] //获取所有标签
[0012] config = scripts [scripts.length-1]. getAttribute ( ^data-config?)；
[0013] //获取当前标签的所有参数
[0014] 其中data-config这个参数是给〈script〉标签设置的自定义属性，之所以增加 data-的前缀，是因为遵从html5的标准，给数据类型的属性增加前缀便于区分；若传入的 参数为object类型字符串，则增加把object字符串正确解析成object类型的代码：
[0015] config = eval ('（' +config+'）'）；
[0016] 第二步，在被引入javascript模块文件中增加处理参数的逻辑代码：
[0017] (I).〈script〉标签没传入参数：等待外部代码使用参数调用接口；
[0018] (2).〈script〉标签传入参数且data-config参数为default :在模块内部按照定 义的默认参数调用接口；
[0019] (3).〈script〉标签传入参数且data-config参数为非default的其他值：在模块 内部使用传入的参数覆盖默认的参数调用接口；
[0020] 第三步，通过〈script〉标签引入javascript模块文件，并添加 data-config =" {autoStart :1，second :1} " 的属性；
[0021] 第四步，解析被引入的javascript模块文件的过程中，模块内部代码获取并解析 data-config的参数并覆盖默认的autoStart和second这两个参数；
[0022] 第五步，在模块内部使用合并后的参数调用接口。
[0023] 所述方法中不传参数的详细引入执行流程为：
[0024] 第一步，在被引入的javascript模块文件的基础上添加获取〈script〉标签所传 入参数的逻辑代码：
[0025] var scripts = document. getElementsByTagName( 'script'），
[0026] config = scripts[scripts, length-1]. getAttribute( 'data-config'）；
[0027] 其中data-config这个参数是给〈script〉标签设置的属性，增加 data-的前缀是 遵从html5的标准；
[0028] 第二步，在模块文件内部增加没传参的判断，等到外部代码调用接口；
[0029]
[0030]
[0031] 第三步，使用〈script〉标签正常引入javascript模块文件；
[0032] 第四步，在外部代码中使用参数调用接口。
[0033] 本发明与传统的模式相比，javascript模块文件的独立性强，无需再在别的地方 调用被引入的javascript模块文件所提供的接口完成执行，仅需在引入时候传入参数即 可实现引入执行。本发明同时兼容传统的模式，对于不传入参数的情况则使用传统的模式 执行。
【附图说明】
[0034] 下面结合附图对本发明进一步说明：
[0035] 图1是本发明详细流程。
【具体实施方式】
[0036] 如图1所示，本发明通过在〈script〉引入javascript中设置data-config参数 和在被引入的javascript模块文件中处理data-config的详细流程。
[0037] 下面以调用一个轮播的焦点图一jquery插件easySlider为例，详细说明本发明 的【具体实施方式】：
[0038] 第一步，在easySlider中添加以下代码：
[0039] 获取参数：
[0040]
[0041]
[0043] 第 二步， 通过〈script type = " text/javascript " data-sliderlD Smyslideri data-config =" {speed :600} "src ="plugins/easyslider.js"> 的方 式引入D与传统引入方式的显著差异是：添加了 data-sliderlD和data-config这两个 参数。easySlider模块文件内部在解析的过程中调用了第一步添加的代码，即可在ID为 myslider 的元素中，使用了 speed :600，auto :true，continuous :true 这三个参数执行了 easyslider效果。其中speed :600是使用了外部传入的方式，其余两个均直接使用了模块 内部自定义的默认值，如需要覆盖这两个值，在data-config增加即可。
【主权项】
1. 一种可传参的javascript模块文件引入执行的方法，其特征在于：在被引入的 javascript模块文件中增加获取传入获取参数、处理参数、调用接口等相关逻辑代码；通 过常规引入javascript模块文件，在〈script〉标签中根据模块的需求增加自定义参数；被 引入的javascript模块文件在加载解析的过程中执行上述增加的代码，从而实现独立的 引入执行机制。2. 根据权利要求1所述的可传参的javascript文件引入执行的方法，其特征在于：所 述方法的具体流程为： 第一步，在被引入的javascript模块文件的基础上添加获取当前〈script〉标签所传 入的参数的逻辑代码； varscripts=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这两个参数； 第五步，在模块内部使用合并后的参数调用接口。3. 根据权利要求1所述的可传参的javascript文件引入执行的方法，其特征在于：所 述方法中不传参数的详细引入执行流程为： 第一步，在被引入的javascript模块文件的基础上添加获取〈script〉标签所传入参 数的逻辑代码： varscripts=document.getElementsByTagName( 'script'）， config=scripts[scripts,length-1].getAttribute( 'data-config'）； 其中data-config这个参数是给〈script〉标签设置的属性，增加data-的前缀是遵从html5的标准； 第二步，在模块文件内部增加没传参的判断，等到外部代码调用接口； If(config! =null){ //处理参数并调用接口的相关操作 } //没传入参数，不作任何处理 第三步，使用〈script〉标签正常引入javascript模块文件； 第四步，在外部代码中使用参数调用接口。
【专利摘要】本发明涉及前端开发技术领域，尤其适合引入需要传入参数灵活可重用的javascript模块文件。本发明在被引入的javascript模块文件中增加获取传入获取参数、处理参数、调用接口等相关逻辑代码；通过常规引入javascript模块文件，在<script>标签中根据模块的需求增加自定义参数；被引入的javascript模块文件在加载解析的过程中执行上述增加的处理代码，从而实现独立的引入执行机制。本发明能够构建一种相当灵活的javascript模块文件：在<script>标签处传入参数可实现引入执行机制；不传入参数可使用传统的模式来调用模块接口。用于javascript模块引入执行。
【IPC分类】G06F9/44
【公开号】CN104915212
【申请号】CN201510342432
【发明人】陈健豪, 艾建文, 孙傲冰, 季统凯
【申请人】国云科技股份有限公司
【公开日】2015年9月16日
【申请日】2015年6月18日