说起jQuery插件,很多人的脑海种已经有了一定的雏形,仿佛感觉仅仅就是那样子,事实呢?当你看了Bootstrap.js,品读了slidesjs,观摩了jquery.cycle2.js,不禁发现,原来插件的世界千变万化,细微之处总是不容易让人发觉,世界那么大,那么我们就一起去看看它到底长什么样子?

  工欲善其事必先利其器,如果你对于jQuery插件运用熟练的话,那么对已$.extend,你一定要去了解!,下面我们就先对$.extend来个剖析!先看看你对于$.extend的几种形式!

  一、$.extend的用法

 $.extend(dest,src1,src2,src3...)
$.extend({},src1,src2,src3...)
$.extend({name:function(){}})
$.fn.extend({name:function(){}})
$.extend({net:{}})
$.extend({boolean,dest,src1,src2,src3...})

  

  $.extend(dest,src1,src2,src3...)

  将src1,src2,src3...合并到dest中,请记住合并时,后面同名的属性会覆盖掉前面的属性,对于前面没有的属性,难就进行合并,如下: 

<script type="text/javascript">
$(function() {
var obj = {
name: "yyh",
age: 26
},
obj1 = {
name: "yyh1",
age: 27
},
obj2 = {
name: "yyh2",
age: 27,
address:"chitu"
}
var mergeObj = $.extend(obj,obj1,obj2);
console.log(mergeObj)//{name: "yyh2", age: 27, address: "chitu"}
})
</script>

  $.extend({},src1,src2,src3...)

  这个和上面的是一样的,不同只是把dest={},把src1,src2,src3合并到一个空对象中,原理同上,不在赘述!

  

  $.extend({name:function(){}})

  看到这个东西,你可以这么认为,这是相当于$.extend(dest,src1) 中省略了dest后变成了$.extend(src1),这样子就相当于将该src合并到调用extend方法的对象中去,也就是将src合并到jquery的全局对象中去!举个例子,我们给jquery全局对象拓展一个是否支持CSS3的方法supportCSS3:

 <script type="text/javascript">
$(function() {
$.extend({
supportCSS3: function() {
var body, i, style, transition, vendor;
body = document.body || document.documentElement;
style = body.style;
transition = "transition";
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
transition = transition.charAt(0).toUpperCase() + transition.substr(1);
i = 0;
while (i < vendor.length) {
if (typeof style[vendor[i] + transition] === "string") {
return vendor[i];
}
i++;
}
return false;
}
})
if($.supportCSS3){
alert("该浏览器支持css33");
}
})
</script>

  所以像$.get,$post,$.ajax就是jquery全局对象的方法!

  

  $.fn.extend({name:function(){}})

  和上面的$.extend相比,如果对于js的原型对象有了解,你肯定可以知道$.fn=jQuery.prototype,也就是说这种方式是把方法拓展到jquery对象的实例中,同样来个例子:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
</head>
<body>
<button id="btn1">点击</button>
<script type="text/javascript">
$(function() {
$.fn.extend({
say: function() {
alert("我是丑男孩");
return this;//为什么加this,jquery的链式写法,你懂的!
}
});
$("#btn1").on("click",function(){
$(this).say().hide();
}) })
</script>
</body>
</html>

  

  $.extend({net:{}})

  顾名思义,这个事在全局对象中扩展一个net命名空间,理解方式可以$.extend({name:function(){}}) 相似的。作用是干嘛?很简单假设团队有多个人,你担心推展到全局对象中会产生冲突,那么就自己独立建一个属于自己的空间,这样妈妈就在也不用担心儿子程序和别人冲突了!来个例子(如何来读取拓展的属性):

 <script type="text/javascript">
$(function() {
$.extend({
yyh: {
age: 26,
address: "chitu",
supportCSS3: function() {
var body, i, style, transition, vendor;
body = document.body || document.documentElement;
style = body.style;
transition = "transition";
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
transition = transition.charAt(0).toUpperCase() + transition.substr(1);
i = 0;
while (i < vendor.length) {
if (typeof style[vendor[i] + transition] === "string") {
return vendor[i];
}
i++;
}
return false;
} }
});
//读取对应的属性
if($.yyh.supportCSS3){
alert("浏览器支持css3");
}
console.log($.yyh.age);
console.log($.yyh.address);
})
</script>

  $.extend(boolean,dest,src1,src2,src3...)

  这中方式,通过boolean,来决定是否深度拷贝!这种方式想必你在很多场合也见过了,boolean默认的是false,可以省略!至于为什么这样做呢?来个例子就豁然开朗了!

 <script type="text/javascript">
$(function() {
var obj = {
name:{
nickname:"丑男孩",//外号
truename:"yyh",//真是姓名
},
age: 26
},
obj1 = {
name:{
nickname:"小男孩",//外号
truename:"yyh1",//真是姓名
},
age:25
},
obj2 = {
name:{
nickname:"老男孩",//外号
username:"uglyboy"
},
age: 27
}
var mergeObj1 = $.extend(true,obj,obj1,obj2);
//mergeObj1={name:{nickname: "老男孩",truename: "yyh1",username: "uglyboy",age: 27}}
var mergeObj2 = $.extend(false,obj,obj1,obj2);
//mergeObj2={name:{nickname: "老男孩",username: "uglyboy",age: 27}}
})
</script>

  

  看完上面的例子的时候,你就知道如果false的时候,后面添加的对象的obj2中没有属性truename,合并后对象就不会有truename这个属性,所以写插件的时候会在里面看到如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.js"></script>
</head> <body>
<script type="text/javascript">
;(function($){
$.fn.Plugin=function(options){
//如果defaults是下面的形式,这里大可以不加boolean
var defaults={
property1:"value1",
property2:"value2",
property3:"value3",
method1:function(){},
method2:function(){},
};
var opt=$.extend(defaults,options);
}
})(jQuery) ;(function($){
$.fn.Plugin=function(options){
//如果defaults是下面的形式,亲,记得加上boolean,不然传递参数可麻烦了!
var defaults={
property1:{
property11:"value11",
property12:"value12",
},
property2:{
property21:"value21",
property22:"value22",
},
property3:{
property31:"value31",
property32:"value32",
},
method1:function(){},
method2:function(){},
}; var opt=$.extend(true,defaults,options);
}
})(jQuery) </script>
</body> </html>

  二、jquery插件的几种形式

  1、传统的插件写法,defaut没有暴露出来供外部调用(这个应该我们写插件很常用的一种方式),下面是单个实例的时候

<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$.fn.Tab = function(options) {
var defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
};
var opts = $.extend(defaults, options),
$hdItems=this.find(opts.hdClass),
$bdItems=this.find(opts.bdClass);
$hdItems.each(function(index, el) {
var $this=$(this);
$this.on("click",function(){
$this.addClass('oncurr').siblings().removeClass('oncurr');
$bdItems.eq(index).show().siblings().hide();
})
});
      //如果想要支持链式写法,在这里请添加return this; 
}
})(jQuery);
$(function() {
$("#J_tab-parent").Tab();
})
</script>
</body>
</html>

  多个实例的时候

<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div> <div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$.fn.Tab = function(options) {
var defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
};
var opts = $.extend(defaults, options);
return this.each(function(index, el) {
var $hdItems=$(this).find(opts.hdClass),
$bdItems=$(this).find(opts.bdClass);
$hdItems.each(function(index, el) {
var $this=$(this);
$this.on("click",function(){
$this.addClass('oncurr').siblings().removeClass('oncurr');
$bdItems.eq(index).show().siblings().hide();
})
});
}); }
})(jQuery);
$(function() {
$(".tab-parent").Tab();
})
</script>
</body>
</html>

  

  2、default写成$.fn.default暴露出来供外部调用(这种方式的插件写法是很经常遇到的,比如jquery.cycle2.js),这个时候你应该会联想到$.fn.format在插件中的用法,这样的好处是可以让用户自定义自己的操作行为,而不用每次实例的时候都去传递同样的阐述,如下的例子:

<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item-1 oncurr">选项卡1</li>
<li class="tab-hd-item-1">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item-1">选项卡1对应的内容</div>
<div class="tab-bd-item-1 undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
(function($) {
$.fn.Tab = function(options) {
var opts = $.extend($.fn.Tab.defaults, options);
return this.each(function(index, el) {
var $hdItems = $(this).find(opts.hdClass),
$bdItems = $(this).find(opts.bdClass);
$hdItems.each(function(index, el) {
var $this = $(this);
$this.on("click", function() {
$(this).html($.fn.Tab.format($(this).text()));
$this.addClass('oncurr').siblings().removeClass('oncurr');
$bdItems.eq(index).show().siblings().hide();
})
});
});
}
$.fn.Tab.defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
};
$.fn.Tab.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
})(jQuery);
$(function() {
$.fn.Tab.defaults = {
hdClass: '.tab-hd-item-1',
bdClass: '.tab-bd-item-1'
};
$(".tab-parent").Tab();
})
</script>
</body> </html>

  3、通过data的方式来实现jquery插件的写法(参考bootstrap.js,slidesjs)  

<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.10.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<style type="text/css">
.undis {
display: none;
} .tab-parent {
width: 400px;
margin: 50px auto;
border: 1px solid #e5e5e5;
} .tab-hd {
height: 45px;
} .tab-hd li {
padding: 15px 0;
width: 200px;
text-align: center;
float: left;
border-bottom: 1px solid #e5e5e5;
} .tab-hd li.oncurr {
border-color: #f60;
color: #f60;
font-weight: bold;
} .tab-bd {
padding: 20px;
min-height: 250px;
}
</style>
</head> <body>
<div class="tab-parent" id="J_tab-parent">
<ul class="tab-hd">
<li class="tab-hd-item oncurr">选项卡1</li>
<li class="tab-hd-item">选项卡2</li>
</ul>
<div class="tab-bd">
<div class="tab-bd-item">选项卡1对应的内容</div>
<div class="tab-bd-item undis">选项卡2对应的内容</div>
</div>
</div>
<script type="text/javascript">
;(function($, window, document, undefined) {
var pluginName = 'Tab',
defaults = {
hdClass: '.tab-hd-item',
bdClass: '.tab-bd-item'
}; function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function() {
this.$hdItems = $(this.element).find(".tab-hd-item");
this.$bdItems = $(this.element).find(this.options.bdClass);
var _this = this;
this.$hdItems.each(function(index, el) {
var $this = $(this);
$this.on("click", function() {
$this.addClass('oncurr').siblings().removeClass('oncurr');
_this.$bdItems.eq(index).show().siblings().hide();
})
});
}
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, 'plugin_' + pluginName)) {
return $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
})
} })(jQuery, window, document); $(function() {
$("#J_tab-parent").Tab()
})
</script>
</body> </html>

  基本的插件形式就这这三种,当然我们依然可以找到其他的方式的插件,比如私有方法的放置,还有像bootstrap.js的框架的细微的变形,万变不离其中,只要了解基本的方法,其他的都可以依葫芦画瓢!

jQuery插件的点点滴滴的更多相关文章

  1. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  2. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  3. BootStrap_04之jQuery插件(导航、轮播)、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

  4. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

  5. 2016年6月份那些最实用的 jQuery 插件专辑

    jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...

  6. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  9. jquery插件扩展的学习

    jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...

随机推荐

  1. memcmp()直接比较两个数组的大小

    两个字符数组可以用strcmp()比较大小.两个整数数组也有个函数memcmp()可以比较大小,和strcmp()的返回值一样的. 头文件#include<cstring> / #incl ...

  2. shell script中的$*和$@

    在shell script中,$*和$@都是获取所有的命令行参数,但是这两者在使用的过程中会有细微的差别,差别主要是在有没有使用双引号,即是直接使用$*,$@,还是使用"$*",& ...

  3. 50中制作图表的JS库

    参看以下链接:http://www.tuicool.com/articles/FZNjMz

  4. python-整理-vs2013新建文件编码

    使用VS2013新建py包和py空文件还有文本文件时发现编码是936.如果代码中写了中文关闭后再打开就乱码了. 找了几个小时,发现模板文件就是936编码,奇怪的是pyclass等其它模板是正常的UTF ...

  5. Strtus2工作流程及原理

    从上图可以看出,一个请求在Struts2 框架中的处理大概分为以下几个步骤:1.客户端初始化一个指向Servlet 容器(例如Tomcat)的请求:2.这个请求经过一系列的过滤器(Filter)(这些 ...

  6. vs 2013打开vs 2008解决方案问题解决

    同时安装了vs 2013和vs 2008后,双击vs 2008的解决方案,会出现直接用vs 2013打开的问题. 解决以上问题: 右键选择VS 2008的解决方案,选择开发方式->选择默认程序, ...

  7. ORA-14400: inserted partition key does not map to any partition

    ORA-14400: inserted partition key does not map to any partition 数据库表已经分区,如果插入数据时出现错误提示: ORA-14400: 插 ...

  8. eMMC的MMC模式与SPI模式

    MMC存贮卡可以分为MMC和SPI两种工作模式,MMC模式是标准的默认模式,具有MMC的全部特性.而SPI模式则是MMC存贮卡可选的第二种模式,这个模式是MMC协议的一个子集,主要用于只需要小数量的卡 ...

  9. BufferedStream类 - 缓冲流

    BufferedStream常用于对其他流的一个封装,它必须和其他流结合一起使用.MemoryStream将所有的内容都放入内存中,而BufferedStream不是.BufferedStream在基 ...

  10. Arcgis api For silverlight 加载QQ地图

    原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/07/2759079.html //本篇博客仅在技术上探讨可行性   //如果要使用Q 地图,请 ...