jQuery教程-编写jQuery插件

在网上有各种各样的，一个jQuery插件可以实现某项功能，完成某种炫酷的效果。那么，一个jQuery插件是如何开发出来的呢？使用jQuery来编写jQuery插件有2种形式：全局jQuery插件和基于包装集的jQuery插件。

我们直接通过 $.方法名称 就可以定义一个全局的jQuery插件。例如：

$.say = function(name){
  alert("hello" + name);
}                              
                            

调用全局插件的方法也非常简单：

$(function(){
  $.say("Tom");
})                              
                            

在编写一个jQuery插件的时候，我们还需要考虑以下一些问题：

1、一般jQuery插件都需要通过一个独立的js文件来存储，我们应该如何确定插件命名的规则？ 2、如果将来 $ 这个符号被 jQuery.noConflict 之后，如何保证插件还能继续使用？ 3、如何为插件设置参数？

对于第一个问题，我们在为jQuery插件进行命名的时候，通常都遵循 jquery.命名空间.js 的命名规则。例如，如果是一个幻灯片插件，我们可以命名为：jquery.mySlider.js。

对于第二个问题，我们可以将 $ 改为jQuery，但是这种方式会增加我们的插件开发的工作量。最好的办法是将整个插件都写在一个闭包中，例如：

(function($){

    //插件在此定义

})(jQuery);
                            

在上面的代码中， $ 不再是jquery中的 $ ，而是闭包中的 $ ，而闭包中的 $ 又是jQuery对象。

插件编写的第三个问题是参数的问题，假设我们有一个插件，它的参数非常多，其中，只有第一个和最后一个参数的必须的参数，其它参数都是可选的参数，我们需要向下面这样来调用这个插件：

// 插件的定义，有8个参数
$.myPlugins = function(p1,p2,p3,p4,p5,p6,p7,p8){
  //......
}
// 插件的调用
$(function(){
  $.myPlugins("value1",null,null,null,null,null,null,null,"value2");
})                             
                            

这种调用插件的方法会让使用者崩溃。我们注意观察jQuery中提供的一些方法，例如事件处理中的 bind() 方法：

bind(type,[data],fn)                              
                            

这个方法的第二个参数 data 是一个可选参数。我们知道，JavaScript是不支持方法的重载的，那么jQuery是如何实现同一个方法的多种参数的调用的呢？

答案是在jQuery中有一个非常重要的方法： extend() 。 extend() 方法会用第二个参数对象来覆盖第一个参数对象，如果没有的就不进行覆盖，而第二个参数始终不会发生变化。例如：

var person1 = {name:"tom",age:29,email:"123@qq.com"}
var person2 = {name:"jarry",age:30}
$.extend(person1,person2);
console.info(person1.name+","+person1.age+","+person1.email);
console.info(person2.name+","+person2.age);                    
                            

执行上面的代码，查看控制台的输出，可以看到下面的输出结果：

jarry,30,123@qq.com
jarry,30                              
                            

person1的 name 和 age 属性会被person2的同名属性覆盖，person2的属性保持不变。

如果希望获取被覆盖后的对象， extend() 方法提供了第3个参数，来保存被覆盖后的对象。

$.extend(p,person1,person2); 
console.info(person1.name+","+person1.age+","+person1.email);
console.info(person2.name+","+person2.age);
console.info(p.name+","+p.age+","+p.email);                             
                            

在jQuery插件的编写中，通常是通过 extend() 方法来完成自定义参数的设置。以前面的myPlugins插件为例，我们可以将它修改为：

$.myPlugins = function(p1,options,p2){
  //在代码中通过extend方法来完成覆盖
  var settings = $.extend({
    a2:"value1",
    a3:"value2",
    a4:"value3",
    a5:"value4",
    a6:"value5",
    a7:"value6",
  } ,options || {})
}                              
                            

extend() 方法中的第一个参数是一个json对象，在这个json对象中为参数a2-a7设置了一个默认值，然后将第二个参数设置为 options ，这是一个用户自定义的参数选项，如果用户没有提供自定义的参数，那么就是用插件的默认参数，否则用户定义的参数会覆盖插件的默认参数。例如：

$(function(){
  $.myPlugins("abc",{
    a2:"hello"
  },"xyz")
})                              
                            

上面调用插件的方法会将插件的a2参数覆盖为“hello”。

基于包装集的jQuery插件的形式为： $.fn.myplugins 。这是我们编写jQuery插件最常用的一种方式。

$.fn 是什么意思呢？我们可以查看jQuery的源代码：

jQuery.fn = jQuery.prototype = {
  init: function( selector, context ) {
      //......
  }
};                              
                            

原来 $.fn 是 jQuery.prototype 的另外一种写法。 prototype 是JavaScript的。jQuery不建议直接在原型上扩展方法，所以提供了一个 $.fn 给开发者用于插件的编写。

例如编写一个修改文字颜色的jQuery插件。

$.fn.setColor = function(){
  this.css("color","#f00");
  //基于包装集的函数一定要能够支持链式编程结构
  return this;
}                              
                            

注意，在匿名函数的内部， this 对象引用的是整个包装集，不需要在使用 $(this) 来重新包装。

另外，基于包装集的函数一定要能够支持链式编程结构，所以一定要返回 this 对象。

下面我们将以一个最简单的jQuery幻灯片插件的制作为例子。在这个例子中使用的是基于包装集的jQuery插件。先来看一下这个幻灯片的HTML结构：

<div class="slider-warp">
      <div>
          <ul>
              <li>
                  <img src="images/1.jpg" />
              </li>
              <li>
                  <img src="images/2.jpg" />
              </li>
              <li>
                  <img src="images/3.jpg" />
              </li>
          </ul>
      </div>
      <div class="mySlider-arrow"><span class="prev"></span><span class="next"></span></div>
</div>                              
                            

在上面的HTML结构中，幻灯片使用一个 <div> 作为包裹元素，里面使用无序列表作为幻灯片的元素。最后的 .mySlider-arrow 是前后导航的箭头按钮。

为这个幻灯片添加下面的一些基本的CSS样式。

.slider-warp{
    width: 500px;
    height: 281px;  
    position: relative;
    overflow: hidden;
}
.slider-warp ul{
    padding: 0px;
    margin: 0px;
    position: absolute;
}
.slider-warp li{
    list-style: none;
}
.slider-warp li img{
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.mySlider-nav{
    position: absolute;
    z-index: 2;
    bottom: 2px;
    text-align: center;
    width: 100%;
    margin: 5px 0px;
}
.mySlider-nav span{
    display: inline-block;
    width: 0px;
    height: 0px;
    margin: 0 4px;
    padding: 3px;
    background: transparent;
    border-radius: 5px;
    border: 2px solid white;
    cursor: pointer;
    opacity: 0.7;
}
.mySlider-nav span.active{
    background: white;
}
.mySlider-arrow{
    top: 50%;
    position: absolute;
    width: 100%;
}
.mySlider-arrow span{
    display: block;
    width: 32px;
    height: 32px;
    right: 15px;
    position: absolute;
    margin-top: -16px;
    overflow: hidden;
    background: rgba(0,0,0,.2) no-repeat 50% 50%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAQAAABuQZ3IAAAAi0lEQVR4AU3OISBEQQBAwS0AACS9NxqQgCZpkiYBVddFvWhAAUABAPQCAGC4g/0vTnrBqCfDIZl70J+kMUBPpEwT4FNXxBxz4F1HxHyr4EVTxBLb4EFNxEon4CJSlVNw9AcV9sC16h8osgke1P1ArgXwouVvdQq86ww/GQefusNf7kBviBlxpT8k+gL/Wox4r1d4MwAAAABJRU5ErkJggg==');
    background-size: 7px 11px;
    border-radius: 32px;
    text-indent: -999em;
    opacity: .6;
    transition: opacity .2s;
    cursor: pointer;
}
.mySlider-arrow .prev{
    left: 15px;
    transform: rotate(-180deg);
}
.mySlider-nav p{
    display: block;
    border: 1px solid white;
    width: 60px;
    right: 0px;
    position: absolute;
    margin: 5px;
    padding: 2px;
    bottom: 0px;
    color: white;
    font-family: "微软雅黑";
}                             
                            

接下来我们开始编写插件。首先确定这个幻灯片插件的名称，我们命名为：jquery.mySlider.js。按前面所描述的规范，整个插件应该写在一个闭包中：

(function($){

  $.fn.mySlider = function(options){ /*...... *
					

					


      
查看更多关于jQuery教程-编写jQuery插件的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did31474