jQuery插件开发总结
jQuery插件的开发包括两种：
一种是类级别的插件开发$.extend，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法，比如：$.ajax, $.getJSON等。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发$.fn.extend，即给jQuery对象添加方法。比如：$.css()等。为了保持jQuery的完整性，一般趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend。
一、$.extend(src)，
$.extend方法是将src合并到jQuery全局对象中去，相当于静态方法。
开发扩展其方法时使用$.extend方法，即jQuery.extend(object);
$.extend({
add: function(a, b) {
return (a + b)
},
minus: function(a, b) {
return (a - b)
},
print: function(a, b) {
console.log(a + ',' + b);
}
});
页面中调用：
var i = $.add(,);
var j = $.minus(,);
var k = $.print(3,2)
二、$.fn.extend，
$.fn.extend对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);
$.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
})
},
uncheck: function() {
return this.each(function() {
this.checked = false;
})
},
click: function() {
return this.each(function(index, value) {
console.log($.type(this));
console.log(index);
})
}
});
页面中调用：
$("input[type=checkbox]").check()
$("input[type=radio]").uncheck()
$("input[type=checkbox]:eq(0)").click()
来看一个综合例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>插件开发</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
(function($){
$.fn.myStyle=function(options){
var defaults={
color:'black',
fontSize:'12px',
padding:,
margin:,
text:"This is a text!",
font:"microsoft yahei",
}
var obj=$.extend(defaults,options);
return this.each(function(index, el) {
var me=$(this)
me.html(obj.text);
me.css({
color:obj.color,
fontSize:obj.fontSize,
padding:obj.padding,
margin:obj.margin,
fontFamily:obj.font
})
});
} })(jQuery)
//页面调用
$("p").myStyle({
color:"red",
fontSize:'18px',
font:'simsun',
})
</script>
</body>
</html>
三、插件方法
在任何情况下，一个单独的插件不应该在jQuery.fnjQuery.fn对象里有多个命名空间。
(function($) {
$.fn.tooltip = function(options) {
// this
};
$.fn.tooltipShow = function() {
// is
};
$.fn.tooltipHide = function() {
// bad
};
$.fn.tooltipUpdate = function(content) {
// !!!
};
})(jQuery);
这是不被鼓励的，因为它$.fn使$.fn命名空间混乱。 为了解决这个问题，你应该收集对象文本中的所有插件的方法，通过传递该方法的字符串名称给插件以调用它们。参看下面这个代码：
(function($) {
var methods = {
init: function(options) {
// this
},
show: function() {
// is
},
hide: function() {
// good
},
update: function(content) {
// !!!
}
};
$.fn.tooltip = function(method) {
// 方法调用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}
};
})(jQuery);
//调用init方法
$('div').tooltip();
//调用init方法
$('div').tooltip({
foo: 'bar'
});
// 调用hide方法
$('div').tooltip('hide');
//调用Update方法
$('div').tooltip('update', 'This is the new tooltip content!');
这种方法推荐使用；
来看一个综合例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
.box{width: 300px;height: 300px;background: red;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div class="box">11</div>
<script>
(function($){
var methods={
init:function(options){
var defaults = {
foreground: 'red',
background: 'yellow',
text:'This is a paragraph!'
};
var obj=$.extend(defaults,options);
$(this).each(function(){
$(this).html(obj.text);
$(this).css({
color:obj.foreground,
background:obj.background,
}); })
},
alertClick:function(){
$(this).click(function() {
alert($(this).html());
});
}
}
$.fn.myPlugin=function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.myPlugin');
}
}
})(jQuery)
$('.box').myPlugin('init')
$('.box').myPlugin('alertClick')
</script>
</body>
</html>
四、面向对象的插件开发；
面向对象编程的概念和重要性不再阐述。对于插件开发来说，为什么要使用面向对象的思维。假设你不这样做，当你需要一个方法的时候就去定义一个function，需要另外一个方法的时候，再去定义一个function，毫无规则地定义一些散落在代码各处的变量和方法，结构不够清晰，维护起来也不方便。
假设使用面向对象的思想设计插件，将需要的重要变量定义到对象的属性上，函数变成对象的方法，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
来看下面这面向对象开发的插件：
(function($) {
//定义Beautifier的构造函数
var Beautifier = function(ele, options) {
this.$ele = ele;
this.opt = options;
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.obj = $.extend({}, this.defaults, this.opt);
}
//定义Beautifier的方法
Beautifier.prototype.beautify = function() {
return this.$ele.css({
color: this.obj.color,
fontSize: this.obj.fontSize,
textDecoration: this.obj.textDecoration,
})
}
//在插件中使用Beautifier对象
$.fn.beautify = function(options) {
//创建Beautifier的实例
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify()
}
})(jQuery)
经过上面一番改造，我们的插件变得面向对象了，更好维护和理解。以后要加新功能新方法，只需向对象添加新变量及方法即可，然后在插件里实例化后即可调用新添加的东西。插件的调用还是一样的，我们对代码的改动并不影响插件其他地方，只是将代码的组织结构改动了而以。
// 插件调用
$(".box").beautify();
将系统变量以变量形式传递到插件内部。
var foo=function(){
//别人的代码
}//注意这里没有用分号结尾
//开始我们的代码。。。
(function(){
//我们的代码。。
alert('Hello!');
})();
本来别人的代码也正常工作，但是最后定义的那个函数没有用分号结尾，然后当页面中引入我们的插件时，报错了，代码无法正常执行。原因是我们用来充当自调用匿名函数的第一对括号与上面别人定义的函数相连，因为中间没有分号嘛，我们的代码无法正常解析了，所以报错。所以好的做法是我们在代码开头加一个分号，这在任何时候都是一个好的习惯。
var foo=function(){
//别人的代码
}//注意这里没有用分号结尾
//开始我们的代码。。。
;(function(){
//我们的代码。。
alert('Hello!');
})();
同时，将系统变量以参数形式传递到插件内部也是个不错的实践。当我们这样做之后，window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升。
;(function($,window,document,undefined){
//我们的代码。。
//blah blah blah...
})(jQuery,window,document);
而至于这个undefined，就非常有意思了，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了。这是值得细细体会的技术和思维方式，当然不是我发明的，都是从前人的经验中学习到的。所以最后我们的插件成了这样：
;(function($, window, document,undefined) {
//定义Beautifier的构造函数
var Beautifier = function(ele, options) {
this.$ele = ele;
this.opt = options;
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.obj = $.extend({}, this.defaults, this.opt);
}
//定义Beautifier的方法
Beautifier.prototype.beautify = function() {
return this.$ele.css({
color: this.obj.color,
fontSize: this.obj.fontSize,
textDecoration: this.obj.textDecoration,
})
}
//在插件中使用Beautifier对象
$.fn.beautify = function(options) {
//创建Beautifier的实例
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify()
}
})(jQuery, window, document);
一个安全，结构良好，组织有序的插件编写完成。
jQuery插件开发总结的更多相关文章
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery插件开发精品教程，让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jquery插件开发
jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...
- jQuery插件开发（溢出滚动）
声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...
- 从零开始学jQuery插件开发
http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...
- jquery插件开发继承了jQuery高级编程思路
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jQuery插件开发(转)
jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命 ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- Jquery插件开发学习
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
随机推荐
- php中使用end方法报错
<b>Strict Standards</b>: Only variables should be passed by reference in <b> 1.如果 ...
- [原]Python 简单异常处理
s=raw_input("Input your age:") if s =="": raise Exception("Input must no be ...
- ie8以下不兼容document.getElementsByName解决方法
在IE8以认为只有文本标签才有name属性的,一些元素标签用document.getElementsByName获取不到DOM,如DIV,span等,这里做一下兼容. HTML: <div na ...
- CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
- 软件工程 speedsnail 冲刺6
2015-5-10 完成任务:学习了黑马android教学视频13.14.15集,记分功能: 遇到问题: 问题1 android native method not found 解决1 没有解决 明日 ...
- 获取屏幕分辨率（C#）
C#获取屏幕分辨率的方法 static void Main(string[] args) { // 控制台程序,需要添加程序集: // using System.Drawing; // using S ...
- VS2008无法切换到视图设计器
编写人:CC阿爸 2014-2-17 近来用于干活的笔记本电脑实在太慢了,在领导的安排下,有幸更换了一台配置好的电脑.经过一天的努力,所有之前的开发软件都安装完成了.并且OS从xp升级到win7.SQ ...
- windows实用技巧
电脑如今已经非常普及,不过目前大多数电脑系统都是Win7/Win8.1或者Win10.你真的对自己电脑系统了解吗?今天小编为大家分享13个实用电脑技巧,会这些电脑技巧才叫牛哦! 13个实用电脑技巧 一 ...
- 在Activity中设置new出来的TextView属性
//创建一个TextView---->textView TextView textView = new TextView(this); // 第一个参数为宽的设置,第二个参数为高的设置 te ...
- 关于VS2012下安装破解文件Visual Assit X的一点说明
今天在使用Visual Studio 2012的时候,编写代码的助手Visual Assit X突然提示我说,试用期已过,要求我输入一个注册码,我靠,这货不是几个月前已经破解了吗,怎么今天傻不愣登的提 ...