jQuery插件开发在项目中的使用是非常方便的,那么如何来写一个jQuery插件?接下来我们就来看一看jQuery插件的编写及使用。
引言:
在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除...
此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可是要追寻
高大上的00后有为青年呢~可是该如何高大上呢?这时jQuery自定义插件开发来了,第一次听到插件开发觉得如此happy,
遂动手网上查找资料进行学习,如下,我用自己的语言将插件开发的程序步骤写出来,如有错误,欢迎指正。
1:jQuery插件开发分为类级别开发和对象级别开发,因为类级别开发在真实项目中几乎不用,下面只对象级别进行探究。
给jQuery扩展插件添加静态方法:就是给jQuery这个类添加方法这种方法叫做静态方法(不常用)
$.hello = function(){//给jQuery这个类添加静态方法(不常用)
console.log('我是jQuery的静态方法')
}
$.hello();
a , 首先准备好一个架子,如下:
b, 这个架子是你编写插件代码要写入的空间,下面简单解释一下这个架子:
- 1)在jQuery环境下封装自己的插件,首先为避免与其他库的冲突,需要在插件的后面传一个jQuery参数进去,对应的函数里面的参数写入$
- 2)未避免出现问题,需在插件的前后加入分号(分号的增加并不会影响程序的运行)
2:再上一个架子
;(function($){
//通过$.fn.方法名 方法是添加到jQuery的原型当中的
$.fn.tab = function(options){
var defaults = {
//各种参数,各种属性
}
var options = $.extend(defaults,options);
this.each(function(){
//各种功能
});
return this;
}
})(jQuery);
这个架子是个什么东西呢?原来他是jQuery官方提供的一个标准化的开发模式,这里简单地介绍一下,不作详要说明,细节有兴趣的童鞋可以自己百度一下。
$.fn.tab 这个tab是你这个功能插件的名字,可任意改变名字,你自己知道就好了。
var options = $.extend(defaults,options); 这个是利用extend方法把 defaults对象的方法属性全部整合到 options里,
也就是options继承了defaults对象的方法以及属性。这个defaults和options名字是可以随意更改的,只要是满足js的命名规范。
this.each(function(){});就不介绍了,下面会通过一个实例表现它,这里你只需要知道他是实现功能代码的地方就可以啦~
至于return this; 就留到实例结束后面再说,这样做肯定是有原因的啦,别心急~
3:心细的girls or boys 肯定知道这个实例是什么啦,没错,是tab选项卡~
下面以tab选项卡的方式来explore这个插件的编写。
a: 先备好html,
<div class="container">
<ul class="option-list">
<li class='current'>新闻频道</li>
<li>军事频道</li>
<li>体育频道</li>
<li>娱乐频道</li>
<li>音乐频道</li>
</ul>
<ul class="card-list">
<li class='current'>这是新闻频道</li>
<li>这是军事频道</li>
<li>这是体育频道</li>
<li>这是娱乐频道</li>
<li>这是音乐频道</li>
</ul>
</div>
b:在准备好css,
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
width: 800px;
margin: 50px auto;
}
.container .option-list {
height: 40px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.container .option-list li {
float: left;
padding: 0 20px;
height: 39px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
line-height: 40px;
background-color: #eee;
cursor: pointer;
}
.container .option-list li.current {
height: 40px;
background-color: #fff;
}
.container .card-list {
border: 1px solid #ccc;
border-top: none;
}
.container .card-list li {
display: none;
height: 300px;
padding: 20px;
}
.container .card-list li.current {
display: block;
}
c,页面是这样的:
d,ok,页面已经准备就绪,现在就来看看jQuery插件写法,先上代码
;(function($){
$.fn.tab = function(options){
var defaults = {
//各种参数,各种属性
}
var options = $.extend(defaults,options);
//各种功能 //可以理解成功能代码
this.each(function(){
$('.option-list').on('click','li',function(){
$(this).addClass('current').siblings().removeClass('current');
var $index = $(this).index();
$('.card-list li').eq($index).addClass('current').siblings().removeClass('current');
})
});
return this;
}
})(jQuery);
f,这个时候只需要看this.each下的功能代码,学过jQuery的同学都知道代码实现,这里主要就调用插件和配置参数这一块来进行探究。
4,在html代码里我们只需要:
<script>
$(document).ready(function(){//jQuery入口代码
$('.container').tab();//启动在jQuery原型中定义的tab方法
})
</script>
a,找到外部容器,并调用你所写的tab方法(就是你所写的插件名字):
$.fn.tab = function(options){}
b,敏感的童鞋肯定发现了功能代码里面的class元素以及事件是被写死的,要是我们在另外一个页面写的class和事件需求和这个插件的不同,
除了改插件源码之外这个插件就没法用用了,作为可扩展性的插件我们怎么可以把它写死呢?嗯哼?当然不可以啦~
好,就让我们一起来解决它吧:
1)请看下面
$.fn.tab = function(options){
var defaults = {//配置此处
//各种参数,各种属性
}
2) 没错,就在这里配置它,我们可以看到哪些东西被写死了呢?下图:
3) 现在我们可以在default对象里面绘画你的小空间啦~见下图:
3)有的同学可能会疑惑为什么用options调用呢?其实上面已经说过啦,因为extends将default对象的属性以及方法都整合到了options里。
这时候只需要用options调用就可以了。
4)同样的如果需求是把click事件改为mouseover事件,此时我们需要用到on() 函数设置事件 这样就方便我们改事件参数啦,如下:
var defaults = {
//各种参数,各种属性
title : '.option-list',
content: '.card-list li',
current : 'current',
type : 'mousemove',
}
5)此时因为需求是mouseover,这是就不需要改插件源码啦,直接在html里的js代码(or你自己的js总文件里)进行相应的变化就ok啦,如下:
$(options.title).on(defaults.type,'li',function(){
*此时在这里更改class和事件就很方便啦,温馨提示,class改变虽好,可别忘了改对应的css样式名字哦,要成双成配呢~
5:jQuery最强大的特性之一莫过于链式操作啦,此时如果你在$('.tab').tab()后面追加操作,你会发现无法实现,如下:
$(document).ready(function(){//jQuery入口代码
$('.container').tab().find('.option-list>li').css('background', 'red');
//启动在jQuery原型中定义的tab方法
})
但是当你return this把对象返回出去的时候你会发现又重新实现了~
上面种方法需要写插件内部修改对应的值(不方便),但是下面这种方法要在创建插件的外面修改对应的值
6:编写jquery插件中的闭包demo和编写jQuery插件的另一种写法
另一种编写选项卡创建的形式
//HTMLscript里面的代码
$(document).ready(function(){//jQuery入口代码
//要先引用jQuery插件 在引用人为编写的插件
$('.container').tab({
title: '.option-list',
content: '.card-list li',
current: 'current',
type: 'mousemove',
});//启动在jQuery原型中定义的tab方法
})
//自己编写创建内部的代码
;(function($){//闭包函数 避免污染全局变量
//往jQuery原型上面添加tab方法
$.fn.tab = function(defaults){
//如果用户不在tab方法内部传递对应的参数我们应当做什么
//给tab方法设置默认值
defaults = defaults ? defaults : {};
var title = defaults.title ? defaults.title : null;
var content = defaults.content ? defaults.content : null;
var current = defaults.current ? defaults.current : null;
var type = defaults.type ? defaults.type : null;
//各种功能 //可以理解成功能代码
this.each(function(){
$(title).on(type,'li',function(){
$(this).addClass(current).siblings().removeClass(current);
var $index = $(this).index();
$(content).eq($index).addClass(current).siblings().removeClass(current);
})
});
return this;
}
})(jQuery);
编写jQuery插件中的闭包特性
//闭包特性,
//1. 避免内部临时变量影响全局空间,
//2. 插件内部继续使用$作为jquery别名
/**
定义一个匿名函数--闭包
**/
;(function($){//$作为匿名函数的参数
//这里编写插件代码,可以继续使用$作为jquery的别名
/**
定义一个局部变量foo,仅函数内部可以访问,外部无法访问
--利用闭包特性,可以避免内部临时变量影响全局空间,又可以再插件内部继续使用$作为jquery的别名
--独立,有关联,且无污染
**/
var foo;
var bar = function(){
foo="aa";
alert(foo);
/**
1.匿名函数内部的函数都可以访问foo
2.匿名函数的外部调用bar()的时候,也可以再bar()内部访问到foo,但是在匿名函数外部直接访问foo是不可以的
**/
}
/**
功能:扩展匿名函数内的私有函数bar()到全局可访问范围
调用:在匿名函数外通过jQuery.BAR()来访问闭包内定义的函数bar(),且,bar()必然是可以访问foo私有变量的
**/
$.BAR=bar;
})(jQuery);//将jquery作为实参传递给匿名函数
$(function(){
$.BAR();
})
/**
以上概念简单介绍了jquery的闭包概念,显然闭包不是几句话能讲清楚的
但对于插件的制作来说,只需要知道所有插件的代码必须放在下面的代码内部就可以了
;(function(){
//填写jquery插件代码
})(jQuery);
**