一个通过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的event详解。
Sep 06 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
vue移动端实现红包雨效果
Jun 23 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
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
有关php运算符的知识大全
2011/11/03 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python2 对excel表格操作完整示例
2020/02/23 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
给物业的表扬信
2014/01/21 职场文书
总会计师岗位职责
2014/02/19 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers