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


Posted in Javascript onSeptember 15, 2014

刚刚开始正式的职业生涯,最近几天在给公司做统一的头部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自定义属性即可。

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 #Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 #Javascript
javascript使用数组的push方法完成快速排序
Sep 15 #Javascript
一款由jquery实现的整屏切换特效
Sep 15 #Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 #Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 #Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 #Javascript
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php db类库进行数据库操作
2009/03/19 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
php mail to 配置详解
2014/01/16 PHP
php HTML无刷新提交表单
2016/04/05 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python list语法学习(带例子)
2013/11/01 Python
python实现归并排序算法
2018/11/22 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
护士求职自荐信范文
2015/03/04 职场文书
python中urllib包的网络请求教程
2022/04/19 Python