刚刚开始正式的职业生涯,最近几天在给公司做统一的头部js,想到了一个通过script自定义属性传递配置参数的方法。
有时候我们编写了一个js插件,要使用该插件需要先在html中引入该插件Js,然后再添加一个script标签,在里面调用。如一个图片切换的插件。其代码大致如下:
1
2
3
|
$.fn.picSwitch = function (option){
//这里是图片切换的代码
}
|
再引入了该插件后,需要再在另外的script标签内加入调用代码
1
2
3
4
5
|
$( '#pic' ).picSwitch({
'speed' : '400' ,
'derection' : 'left'
//... 这里是配置
})
|
这当然没有什么问题,但有些时候我们并不想再多添加个script标签,如果只引入script标签,那该怎么做怎么传递配置参数呢?
这时候我们就可以利用script上的自定义属性进行传递配置参数。在这之前先要对该图片切换插件进行处理。修改后代码如下:
1
2
3
|
$.fn.picSwitch = function (){
//这里是图片切换的代码
};
|
//写好插件后就直接调用
$('这里是选择器,需要在script标签上获取').picSwitch('这里是配置参数,需要在script标签上获取');
接下来就是用script上传递参数了,在html页面上如下引用该js插件。
1
2
3
4
5
6
7
8
|
<head>
<script src= '/script/picSwitch.js' id= 'picSwitch' obj= '#pic' option= '{"speed":"400","derection":"left"}' ></script>
</head>
<body>
<div id= "pic" >
//这里是具体结构
</div>
</body>
|
最后再修改插件为:
1
2
3
4
5
6
7
8
9
10
|
$.fn.picSwitch = function (){
//这里是图片切换的代码
};
//写好插件后就直接调用
var script = $( '#picSwitch' ), //标签上的id
selector = script.attr( 'selector' ),
option = JSON.parse(script.attr( 'option' )); //标签上的是字符串需要转为json对象
$(selector).picSwitch(option);
|
这样就只用了一个标签便实现了功能,配置变化只需要改变script自定义属性即可。