JQuery插件编写之封装对象

Jquery扩展插件有三大法宝,

1、封装对象方法 (本文详细介绍):对通过选择器获取的jQuery对象进行操作。
2、封装全局函数
3、选择器插件 

jQuery插件的机制
  jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能。
  jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种,jQuery.extend()用于扩展后两种插件。

废话不多说,自己编写的插件建议命名为jquery.xxxx.js

本文JQuery库使用的版本是1.10.2

jquery.code.js

$.fn.yourMethod写法:

 1 (function ($) { //此处将$作为匿名函数的形参

 2 $.fn.code = function (options) { 

 3 var defaultVal = {

 4     color:'blue'

 5 };

 6 var obj=$.extend(defaultVal,options);

 7 return this.each(function(){

 8     var selObject = $(this);

 9         selObject.css('color',obj.color);

10     });

11 }; 

12 })(jQuery); //这里讲jQuery作为实参传递给匿名函数
  • 匿名函数内的$作为jQuery的缩写别名
  • 设置一个defaultVal的hash作为默认输入参数。
  • var obj = $.extend(defaultVal,options); 将用户输入参数options和默认参数defaultVal通过$.extend方法进行merge,比如说如果用户有给出color的值,则会override默认值blue。
  • 关键词return的作用就是返回each操作后的对象,以便用户接下去使用JQuery的链式操作,如本文的code().fadeOut()

 $.fn.extend写法:

 1 ;(function ($) { //此处将$作为匿名函数的形参

 2 $.fn.extend({

 3     'code':function(options){

 4         var defaultVal = {

 5             color:'blue'

 6         };

 7         var obj=$.extend(defaultVal,options);

 8         this.css('color',obj.color);

 9         return this;

10     }

11 });

12 })(jQuery); //这里讲jQuery作为实参传递给匿名函数

BTW,在"(function($){"前加入一个分号可以避免因为引入其他不规范的代码导致插件出错。

"return this"则是为了能继续使用链式操作。

关于两种写法的区别:



jQuery.fn = jQuery.prototype。

 

$.fn.abc是在$.fn命名空间下定义一个abc的方法,给jQuery对象添加方法。

$.fn.extend为扩展jQuery类本身,为类添加新的方法。


目前看来 $.fn.function用于添加单个方法 $.fn.extend 用于添加多个方法

如果还有什么实际用途上的区别,记得拍上搬砖告诉小弟啊!!

code.html

 1 <!doctype html>

 2 <html>

 3 <head>

 4 <script src="/js/jquery.js" type="text/javascript"></script>

 5 <script src="/js/jquery.code.js" type="text/javascript"></script>

 6 <script>

 7 $(document).ready(function(){

 8     $(".mark").code({

 9         color:'orange'

10     }).fadeOut('slow');

11 });

12 </script>

13 </head>

14 <body>

15 <span class="mark">Hello World!</span>

16 <span class="mark">Hello University!</span>

17 </body>

18 </html>

发挥想象力之后,别忘记载入你自己写的js,其他的不解释。

补充:

这里在介绍一下jQuery的闭包概念

ECMAScript描述:允许使用内部函数(即函数定义和函数表达式位于另一个函数的函数体内),而且,这些内部函数可以访问他们所在的外部函数中声明的所有局部变量、参数和其他内部函数。

;(function($){



  var foo;



  var bar = function(){



  }



  $.BAR = bar;  //让bar进入全局域中,外部可以通过调用jQuery.BAR()来访问内部定义的bar(),并且内部函数bar()可以访问局部变量foo



})(jQuery);

这段框架就是利用闭包的概念,使得外部也能访问匿名函数的局部变量和内部函数。

 

你可能感兴趣的:(jquery插件)