一个通过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 相关文章推荐
纯js分页代码(简洁实用)
Nov 05 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
一个字符串反转函数可实现字符串倒序
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
discuz目录文件资料汇总
2014/12/30 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
浅谈js的异步执行
2016/10/18 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实用代码片段收集贴
2015/06/03 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python如何保存文本文件
2020/06/07 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Python 图片处理库exifread详解
2021/02/25 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
2013年军训通讯稿
2014/02/05 职场文书
会员卡清退活动总结
2014/08/27 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis