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

时间 2019-11-08

标签 script 自定义属性传递配置参数繁體版

原文原文链接

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

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


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

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

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

这固然没有什么问题，但有些时候咱们并不想再多添加个script标签，若是只引入script标签，那该怎么作怎么传递配置参数呢？插件

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

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

};

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

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

<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自定义属性便可。blog