从零开始学jQuery插件开发
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从零开始学jQuery插件开发相关的知识，希望对你有一定的参考价值。
通过$.fn 向jQuery添加新的方法
要处理DOM元素以及将插件更好地运用于所选择的元素身上，优先使用这种方法
$.fn.myPluginOne = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$(‘a‘),则this=$(‘a‘)
this.css(‘color‘, ‘red‘);
}
在这个函数内部，this指代的是我们在调用该插件时，jQuery选择器选中的元素。例如，$(‘a‘)返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用$符号包装。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="jquery-1.12.1.min.js"></script> <script type="text/javascript" src="myJquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //页面所有a标签变红色 $("a").myPluginOne(); }); </script> <style type="text/css"> *{padding: 0;margin:0;} body{font: 14px/24px "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;} #content{width:800px;margin:20px auto;} #content h3{color: #1c7557;text-align: center;line-height: 40px;font-size: 20px;border-bottom: #1c7557 solid 1px;} #content ul{padding: 20px;} </style> </head> <body> <div id="content"> <h3>一颗会开花的树</h3> <ul> <li><a href="www.baidu.com">青春是一本太仓促的书，我们含着泪，一读再读。</a></li> <li><a href="jd.com">青春，如同一场盛大而华丽的戏，我们有着不同的假面，扮演着不同的角色，演绎着不同的经历，却有着相同的悲哀。</a></li> </ul> <P>我以为，我已经把你藏好了，藏在那样深，那样冷的，昔日的心底。我以为，只要绝口不提，只要让日子继续地过去，你就终于，终于会变成一个，古老的秘密。可是，不眠的夜，仍然太长，而，早生的白发，又泄露了，我的悲伤。</P> </div> </body> </html>
下面进一步，在插件代码里处理每个具体的元素，而不是对一个集合进行 处理，这样我们就可以针对每个元素进行相应操作。 在上面讲到this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处 理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指代的不再是一个jQuery对象， 而是普通的DOM对象了，如果调用jQuery的方法，需要用$包装之后才可以调用。 比如现在我们要在每个链接显示链接的真实地址，首先通过each遍历所有a标签，然后获取href属性的值 再加到链接文本后面。
$.fn.myPluginTwo = function() {
this.css(‘color‘, ‘red‘);
this.each(function() {
//对每个元素进行操作
$(this).append(‘ ‘ + $(this).attr(‘href‘));
});
}
我们都知道jQuery一个优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法。 要让插件不打破这种链式调用，只需return一下即可。
$.fn.myPluginTwo = function() {
//在这里面,this指的是用jQuery选中的元素
this.css(‘color‘, ‘green‘);
this.each(function() {
//对每个元素进行操作
$(this).append(‘ ‘ + $(this).attr(‘href‘));
});
}
//链式调用return this
$.fn.myPluginTwo2 = function() {
//在这里面,this指的是用jQuery选中的元素
this.css(‘fontSize‘, ‘20px‘);
this.each(function(index) {
//对每个元素进行操作
$(this).append(‘ ‘ + index+100);
});
return this;
}
调用：
$("a").myPluginTwo2().myPluginTwo();
让插件接收参数
一个强劲的插件是可以让使用者随意定制的，这要求我们在编写插件可以接收提供的合适的参数。 例如我们不想让链接只变成红色，我们让插件的使用者自己定义显示什么颜色，需要使用者在调用的时候传入一个参数。我们在插件的代码里面接收。如果使用者不传递参数，插件里面会给出参数的默认值。 在处理插件参数的接收上，通常使用jQuery的extend方法。extend方法传递单个对象的情况下，这个对象会合并到jQuery身上，而当用extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。 利用这一点，可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指定的值，未指定的参数使用插件默认值。
$.fn.myPluginThree = function(options){
var defaults = {
color:"yellow",
fontSize:"12px"
};
var settings = $.extend(defaults,options);
return this.css(
{
"color":settings.color,
"fontSize":settings.fontSize
}
);
}
上面代码调用extend时会将defaults的值改变，如果在后续代码中还要使用defaults的话，会发现它已经被用户传进来的参数更改了。但是对于插件来说，defaults的值不应该被改变。
所以，将一个新的空对象做为$.extend的第一个参数， defaults和用户传递的参数对象紧随其后，这样所有值被合并到这个空对象上， 保护了插件里面的defaults对象中的默认值。
$.fn.myPluginFour = function(options){
var defaults = {
color:"yellow",
fontSize:"12px"
};
var settings = $.extend({},defaults,options); //将一个空对象做为第一个参数
return this.css(
{
"color":settings.color,
"fontSize":settings.fontSize
}
);
}
面向对象的插件开发
插件可以接收和处理参数后，就可以编写出更健壮而灵活的插件了。若要编写一个 复杂的插件，代码量会很大，如何组织代码就成了一个需要面临的问题，没有一个好的 方式来组织这些代码，整体感觉会杂乱无章，同时也不好维护，所以将插件的所有方法 属性包装到一个对象上，用面向对象的思维来进行开发，无疑会使工作轻松很多。
面向对象编程的概念和重要性不再阐述。对于插件开发来说，为什么要使用面向对象的思维。 假设你不这样做，当你需要一个方法的时候就去定义一个function，需要另外一个方法的时候，再去定义一个function，毫无规则地定义一些散落在代码各处的变量和方法，结构不够清晰，维护起来也不方便。 假设使用面向对象的思想设计插件，将需要的重要变量定义到对象的属性上，函数变成对象的方法，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。 接着上面的例子，他的功能是设置颜色啊字体啊什么的，我们可以把这个插件抽象成一个美化页面的对象，我们还可以加入其他功能，比如设置下划线什么的。 所以我们新建一个对象命名为Beautifier，然后我们在插件里使用这个对象来编码。
//定义Beautifier的构造函数
var Beautifier = function(ele,opt){
this.$element = ele;
this.default = {
color:"yellow",
fontSize:"12px"
};
this.options = $.extend({},this.default,opt);
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function () {
return this.$element.css({
"color":this.options.color,
"fontSize":this.options.fontSize
});
}
}
//在插件中使用Beautifier对象
$.fn.myBeautifyFive = function(options){
var b = new Beautifier(this,options);
return b.beautify();
}
经过上面一番改造，我们的插件变得面向对象了，更好维护和理解。以后要加新功能新方法，只需 向对象添加新变量及方法即可，然后在插件里实例化后即可调用新添加的东西。 插件的调用还是一样的，我们对代码的改动并不影响插件其他地方，只是将代码的组织结构改动了而以。
命名空间
我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多， 如果总是在全局范围内定义一些变量的话，最后很难维护，也容易跟别人写的代码有冲突。 比如你在代码中向全局window对象添加了一个变量status用于存放状态，同时页面中引用了另一个别人 写的库，也向全局添加了这样一个同名变量，最后的结果肯定会产生冲突。所以不到万不得已，一般我们不会将变量定义成全局的。 一个好的做法是始终用自调用匿名函数包裹你的代码，这样就可以完全放心，安全地将它用于任何地方了，绝对没有冲突。 将系统变量以参数形式传递到插件内部也是个不错的实践。 当我们这样做之后，window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升 而至于这个undefined，就非常有意思了，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的‘undefined‘了。这是值得细细体会的技术和思维方式，当然不是我发明的，都是从前人的经验中学习到的。
;(function($,window,document,undefined){
//定义Beautifier的构造函数
var Beautifier = function(ele,opt){
this.$element = ele;
this.default = {
color:"yellow",
fontSize:"12px"
};
this.options = $.extend(true,{},this.default,opt);
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function () {
return this.$element.css({
"color":this.options.color,
"fontSize":this.options.fontSize
});
}
}
//在插件中使用Beautifier对象
$.fn.myBeautifyFive = function(options){
var b = new Beautifier(this,options);
return b.beautify();
}
})(jQuery,window,document);
以上是关于从零开始学jQuery插件开发的主要内容，如果未能解决你的问题，请参考以下文章