script自定义属性传递配置参数

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

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

复制代码

        $.fn.picSwitch = function(option){
            //这里是图片切换的代码
            
        }
   
复制代码

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

$('#pic').picSwitch({
            'speed' : '400',
            'derection' : 'left'
            //... 这里是配置
        })

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

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

复制代码
$.fn.picSwitch = function(){
    //这里是图片切换的代码

};

//写好插件后就直接调用
$('这里是选择器,需要在script标签上获取').picSwitch('这里是配置参数,需要在script标签上获取');
复制代码

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

复制代码
<head>
    <script src='/script/picSwitch.js' id='picSwitch' obj='#pic' option='{"speed":"400","derection":"left"}'></script>
</head>
<body>
    <div id="pic">
        //这里是具体结构
    </div>
</body>
复制代码

最后再修改插件为:

复制代码
$.fn.picSwitch = function(){
            //这里是图片切换的代码

};

//写好插件后就直接调用
  var script = $('#picSwitch'),//标签上的id
    selector = script.attr('selector'),
    option = JSON.parse(script.attr('option'));//标签上的是字符串需要转为json对象
    $(selector).picSwitch(option);
复制代码

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值