一个通过script自定义属性传递配置参数的方法

一个通过script自定义属性传递配置参数的方法

刚刚开始正式的职业生涯，最近几天在给公司做统一的头部js，想到了一个通过script自定义属性传递配置参数的方法。

有时候我们编写了一个js插件，要使用该插件需要先在html中引入该插件Js,然后再添加一个script标签，在里面调用。如一个图片切换的zGfyvFUwe插件。其代码大致如下：

$.fn.picSwitch = function(option){

//这里是图片切换的代码

}

再引入了该插件后，需要再在另外的script标签内加入调用代码

$('#pic').picSwitch({

'speed' : '400',

'derection' : 'left'

//... 这里是配置

})

这当然没有什么问题，但有些时候我们并不想再多添加个script标签，如果只引入script标签，那该怎么做怎么传递配置参数呢？

这时候我们就可以利用script上的自定义属性进行传递配置参数。在这之前先要对该图片切换插件进行处理。修改后代码如下：

$.fn.picSwitch = function(){

//这里是图片切换的代码

};

//写好插件后就直接调用

$('这里是选择器,需要在script标签上获取').picSwitch('这里是配置参数,需要在script标签上获取');

接下来就是用script上传递参数了，在html页面上如下引用该js插件。

</head>

//这里是具体结构

</div>

最后再修改插件为：

$.fn.picSwitch = function(){

//这里是图片切换的代码

};

//写好插件后就直接调用

var script = $('#picSwitch')，//标签上的id

selector = script.attr('selector'),

option = JSON.parse(script.attr('option'));//标签上的是字符串需要转为json对象

$(selector).picSwitch(option);

这样就只用了一个标签便实现了功能，配置变化只需要改变script自定义属性即可。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。