jQuery插件实践之轮播练习(一)

所有文章搬运自我的个人主页:sheilasun.me

因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法。

新建插件文件

在讨论细节之前,先新建插件文件(当然也可以把代码直接放在页面的script标签中,只是复用麻烦些),如:'jQuery.carousel.js'。在文件中首先加入以下代码:

(function($){
    //...具体的实现
})(jQuery);

为什么一定要用闭包包裹一层?原因有二:

  • 为插件创建私有的作用域。这样包裹以后,外面的代码不能直接访问插件内部的代码,插件内部声明的临时变量也不会污染到全局。
  • 在插件内部可以无顾忌地使用'$'符号代替'jQuery',写起代码来更简便。

写jQuery插件的两种方式

  1. 扩展jQuery全局函数

相当于c#中的静态方法,可以理解为给jQuery类添加静态方法。jQuery的全局函数也就是jQuery命名空间下的函数(如$.ajax(),$.each()等),这种添加方式也就是给jQuery命名空间下添加新函数。这种函数的特征是它不直接操作dom元素,可以说是工具类函数,因此不挂载在jQuery对象上。
这种方式下的函数写法也有多种:

  • 第一种

     $.myAlert=function(){
         window.alert("message from XX");
     }
    

    调用

     $.myAlert();
    
  • 第二种 (可以一次添加多个函数)

     $.extend({
             myAlert:function(){
                 window.alert("message from XX");
             },
             myLog:function(){
                 window.console.log("message from XX");
             }
         }
     );
    

    调用

     $.myAlert();$.myLog();
    
  • 第三种
    在jQuery下再添加一层命名空间,将插件函数挂载在自定义的命名空间下,可以避免和jQuery以及其他插件的变量名或函数名冲突。

     $.myPlugin.myAlert=function(){
         window.alert("message from XX");
     }
    

调用

    $.myPlugin.myAlert();
  1. 扩展jQuery对象(实例)方法

给jQuery对象添加方法,也就是说,只有经过实例化的jQuery对象才可以调用我们添加的方法。

这种方式下的函数写法也有多种:

  • 第一种

     $.fn.myAlert=function(){
         window.alert("message from XX");
     }
    

    调用

     $('.myButton').myAlert();
    
  • 第二种 (可以一次添加多个函数)

     $.fn.extend({
             myAlert:function(){
                 window.alert("message from XX");
             }
         }
     );
    

    调用

     //正确的调用
     $('.myButton').myAlert();
     $(this).myAlert();
     $('#test li').myAlert();
     //错误的调用
     $.myAlert();//error
    

查看jQuery的源码就能知道,$.fn也就是jQuery.prototype,如果对原型有所了解就会知道,我们对它进行扩展,自然所有的jQuery类的实例都可以访问到方法了。

很多的jQuery插件都是用这种方式,这样用jQuery选择器获取到jQuery对象以后,就可以调用插件方法。
本文的轮播插件也将依照这种类型来写。

写插件的标准

使用过jQuery的人都知道它有一些非常棒的特性,如选择器后的隐式迭代、链式调用。

  • 隐式迭代

什么是隐式迭代?看下面这行代码,它会将整个页面上所有的p元素设成背景红色。

$('p').css('background','red');//隐式迭代

我们自己写的插件也要尽量支持这种隐式迭代,实现的方式也很简单,用each方法来遍历即可,代码如下:

$.fn.myLog=function(){
        this.each(function(){//显式迭代
            window.console.log(this);
        });
}

要注意的是,插件函数体内的'this'(上段代码中的第一个'this')即指的是当前通过选择器获取到的jQuery对象数组,而不像通常事件函数内部的'this'指的是dom元素。而代码中的第二个'this'则确实指的是一个dom元素了。

  • 连缀语法
    连缀指的是每次调用完把当前对象返回,供下次调用,这样可以一个方法接一个方法的连缀调用,中间用'.'隔开即可,除了连缀以外,我喜欢叫它链式调用更方便自己理解。下面这行代码就是连缀语法的一个例子。

     $('p').css('background','red').slideDown();
    

可以看出,为了支持这种链式调用,插件除了执行自己的逻辑以外,最后还应该把当前的jQuery对象数组返回。所以上面的代码我们可以修改如下:

$.fn.myLog=function(){
        return this.each(function(){//return 当前对象
            window.console.log(this);
        });
}
  • 设置默认参数
    插件内部可以设置默认参数,让用户在不传入参数的情况下也可以调用。当用户传入自己的参数时,对于用户有设置值的属性,用户设置的值覆盖默认值,对于用户没有设置值的属性,插件内部就用属性的默认值。这个覆盖操作可以用$.extend()方法实现,$.extend()用法可以戳官方API文档→http://api.jquery.com/jQuery.extend/

     (function($) {
     	var defaults = {
     		name: 'test',
     		message: 'test message'
     	};
     	$.fn.myLog = function() {
     		return this.each(function(options) {
     		//也可以用下面注释这句,只是这样defaults也会被改变
     		//var options=$.extend(defaults,options);
     		var options = $.extend({}, defaults, options);
     		window.console.log(options.name + ":" + options.message);
     		});
     	}
     })(jQuery);
    

调用:

    $('.className').myLog();//使用默认值
    $('.className').myLog({name:'sheilasun'});//传入参数,覆盖默认值

还可以进一步改进,现在defaults在外界是无法获取的,我们可以把它暴露出来,让用户可以在使用插件之前修改默认值。

  
    
    (function($) {
  	$.fn.myLog.defaults = {
 		name: 'test',
 		message: 'test message'
 	};
 	$.fn.myLog = function() {
   		return this.each(function(options) {
		         var options = $.extend({}, $.fn.myLog.defaults, options);
     			window.console.log(options.name + ":" + options.message);
  		});
	}
    })(jQuery);

调用:

$.fn.myLog.defaults={name:"sheilasun.me",message:'message from sheilasun.me'};
//或者
$.fn.myLog.defaults.name="sheilasun.me";

总结

  1. jQuery插件可以用两种方式添加,分别是针对jQuery全局函数的扩展和jQuery对象(实例)方法的扩展
  2. 插件要尽量返回当前对象,支持连缀写法
  3. 插件内部可以用$.each()方法遍历选择器获取到的所有jQuery对象,支持隐式迭代
  4. 插件内部可以设置默认值,或将其暴露出来,供外界修改

关于轮播的逻辑实现,放在下一篇写。

posted @ 2015-08-21 09:38  SheilaSun  阅读(353)  评论(0编辑  收藏