一个通过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='/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自定义属性即可。

赞 (0)

相关推荐

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

    刚刚开始正式的职业生涯,最近几天在给公司做统一的头部js,想到了一个通过script自定义属性传递配置参数的方法. 有时候我们编写了一个js插件,要使用该插件需要先在html中引入该插件Js,然后再添加一个script标签,在里面调用.如一个图片切换的插件.其代码大致如下: $.fn.picSwitch = function(option){ //这里是图片切换的代码 } 再引入了该插件后,需要再在另外的script标签内加入调用代码 $('#pic').picSwitch({ 'speed'

  • spring mvc 读取xml文件数据库配置参数的方法

    spring mvc 读取xml文件数据库配置参数的方法

    本文主要介绍怎么通过属性注入与构造器注入实现把我们项目中要用到的数据库参数放到xml文件里面去,方便部署. spring mvc 4.2.6项目 SQL Server 2008数据库 本文介绍的主要使用ApplicationContext以及其实现类实现.主要用到的是ClassPathXmlApplicationContext. ClassPathXmlApplicationContext:从类路径ClassPath中寻找指定的XML配置文件,找到并装载 完成ApplicationContext

  • C#实现向函数传递不定参数的方法

    本文实例讲述了C#实现向函数传递不定参数的方法.分享给大家供大家参考.具体实现方法如下: using System; class Min{ public int MinVla(params int [] nums){ int m; if (nums.Length == 0){ Console.WriteLine("Error: no arguments."); return 0; } m = nums[0]; foreach ( int val in nums){ if ( val &

  • jQuery Tips 为AJAX回调函数传递额外参数的方法

    具体到这个例子,我们希望button1和button2点击之后,用AJAX的方式取example.html的内容,然后动态更新页面的id=callbackdemo3的div HTML如下: 复制代码 代码如下: <div id="callbackdemo1"> <button id="button1">ajax load1</button><br/> </div> <div id="call

  • vue中get请求如何传递数组参数的方法示例

    前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题 示例代码 let params = { statusList: ['OVERDUE', 'DELAY'] } this.$http.get('/list', params) .then(res => {}) .catch(e => {}) 上述代码在不做配置的时候请求信息为:/list?stat

  • C# WebApi Get请求方式传递实体参数的方法示例

    前言 我又搞回笃NET啦!java之路真是命运多舛,好事多磨.不过,也许我已经进入无招胜有招,博取众家之长.融会贯通的地步了. 对于WebApi,今天又有了一些新的了解. 话说,Get请求方式,参数会附在Url后面,称为QueryString,传递给服务器:而POST方式,则将参数放在消息体内.采用QueryString的话,简单,方便,但只适合参数比较少的情况:但有的时候,需要传递比较多.比较复杂的参数,比如,组合条件查询. 组合条件查询,条件会很多,通常会用一个实体类来封装,传递给服务器.用

  • JS与PHP向函数传递可变参数的区别实例代码

    # JS 调用函数传递可变参数的方法 复制代码 代码如下: <script> function test() { for(var i = 0;i < arguments.length; i++) { alert(arguments[i]); } } //调用函数 test(1, 2, 3, 'abc'); </script> # PHP 调用函数传递可变参数的方法 复制代码 代码如下: <?php //方法一 //接收一系列参数,并逐一输出 function show_

  • @insert mybatis踩坑记录,实体接收前端传递的参数

    目录 @insert mybatis踩坑实体接收前端传递的参数 mybatis获取主键及参数传递的有关问题 获取主键值 不同的参数类型,${}和#{}的不同取值方式 @insert mybatis踩坑实体接收前端传递的参数 插入方法使用的使用entity实体对象进行接收的 @Insert(" insert into infor (name,pass,salary) values (#{infor.name},#{infor.pass},#{infor.salary})")     pu

  • vue+element_ui上传文件,并传递额外参数操作

    需求: 1.文件大小验证 2.文件类型验证 3.额外参数传输 <template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="

  • AngularJS入门教程二：在路由中传递参数的方法分析

    本文实例讲述了AngularJS在路由中传递参数的方法.分享给大家供大家参考,具体如下: 我们不仅可以在控制器中直接定义属性的值,比如: app.controller('listController',function($scope){ $scope.name="ROSE"; }); AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参: <!--首页html--> <li><a href="#/user/18"

随机推荐