首页 > 代码库 > script自定义属性传递配置参数
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=http://www.mamicode.com/‘/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自定义属性即可。
script自定义属性传递配置参数
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。