jquery插件扩展入门-打造一款自己的插件遮罩

首先,自然是要了解什么是jQuery了,jQuery是一款简洁并流行的JavaScript框架。号称“write Less,Do More”,这里是jQuery官网:http://jquery.com/,这里主要是利用他的插件扩展机制打造自己的jQuery插件。

jQuery的插件主要分为对象级别的插件,给jQuery对象添加方法,如:$(‘元素’).append()元素方法,还有类级别的插件,给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,如:$.trim()方法。

jQuery源码

先看下几段jQuery源码:

  1. // Define a local copy of jQuery
  2.     jQuery = function( selector, context ) {
  3.         // The jQuery object is actually just the init constructor ‘enhanced’
  4.         // Need init if jQuery is called (just allow error to be thrown if not included)
  5.         return new jQuery.fn.init( selector, context );
  6.     },

jQuery实例的构造是由jQuery.fn.init方法完成。

  1. jQuery.fn = jQuery.prototype = {
  2. // ….
  3. }
  4. init = jQuery.fn.init = function( selector, context ) {
  5. // …
  6. }
  7. // Give the init function the jQuery prototype for later instantiation
  8. init.prototype = jQuery.fn;

我们可以得到这样一层关系链:

jQuery.fn.init.prototype =  jQuery.fn = jQuery.prototype;
new jQuery.fn.init() 相当于 new jQuery() ,所以可以无 new 实例化 jQuery 对象。
再一看这个代码片段
  1. jQuery.extend = jQuery.fn.extend = function() {
  2. // …
  3. }

好吧,我云里雾里了,乍一看,一样吧。好吧,这就要看this的指向者了。在 jQuery.fn.extend() 中,this 的指向是 fn 对象,由于 jQuery.fn = jQuery.prototype ,这里增加的是原型方法;在 jQuery.extend() 中,this 的指向是 jQuery 对象(或者说是 jQuery 类),所以这里扩展在 jQuery 上。

这里还是以小小遮罩类插件为例子,直接上菜吧

 jQuery对象级插件

  1. // 添加jQuery对象级的插件,是给jQuery类添加方法
  2. // 调用方法:$(“#id”).函数名(参数);
  3. // 第一种对象方法
  4. $.fn.center = function() {
  5.     // 在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,
  6.     // 用jQuery选择器选中的元素,一般是一个jQuery包装类型的集合
  7.     // 支持链式调用,使用 return
  8.     return this.css(‘position’,’absolute’).css(‘top’, ( $(window).height() – this.height() ) / 2 + $(window).scrollTop() + ‘px’).css(‘left’, ( $(window).width() – this.width() ) / 2 + $(window).scrollLeft() + ‘px’);
  9. }
  10. // 第二种对象方法
  11. $.fn.extend({
  12.     color: function(value) {
  13.         return this.css(“color”,value);
  14.     }
  15. });

  jQuery类级别插件

  1. // jQuery类级别的插件,相当于添加静态方法
  2. // 调用方法:$.函数名(参数);
  3. // 第一种类方法
  4. $.blockUI = function() {
  5.     $(‘<div id=“wenqy_shadelay”><div id=“wenqy_center”><span style=“background:white”>正在加载,请稍后…</span></div></div>’).css({
  6.         position: ‘fixed’,
  7.         top: 0,
  8.         left: 0,
  9.         right: 0,
  10.         bottom: 0,
  11.         opacity: 0.6,
  12.         background: ‘black’,
  13.         display: ‘none’
  14.     }).appendTo(‘body’).fadeIn(‘normal’, function() {
  15.         $(‘#wenqy_center’).color(“red”).center();
  16.     })
  17.     //.click(function(event) {
  18.     //  $(this).fadeOut(‘normal’, function() {
  19.     //      $(this).remove();
  20.     //  });
  21.     //})
  22.     ;
  23. }
  24. // 第二种类方法
  25. $.extend({
  26.     unblockUI: function() {
  27.         $(“#wenqy_shadelay”).fadeOut(‘normal’, function() {
  28.             $(this).remove();
  29.         });
  30.     }
  31. });

匿名函数包裹

再用匿名函数包裹下扩展方法

  1. // 用自调用匿名函数包裹代码,避免污染全局命名空间
  2. // ; 号开头,避免陷入 由于别人代码没有; 号结尾而报错无法执行插件 挖的一手好坑
  3. // 系统变量以参数形式传递到插件内部,避免陷入 由于别人代码可能修改系统变量而引用这些变量导致结果无法预知
  4. // 系统变量以局部引用 安全良构
  5. // 一般HTML代码里面使用双引号,而在JavaScript中多用单引号引用
  6. ;(function($,window,document,undefined) {
  7.    // 这里添加刚才的扩展方法
  8.  })(jQuery,window,document);

加载调用

再模拟测试下调用

  1. $(document).ready(function($) {
  2.             $.blockUI(); // 开启遮罩
  3.             window.setTimeout(function() {
  4.                 $.unblockUI();
  5.             },5000); // 5s 后关闭遮罩
  6.             // $(“p”).changeElementType(“a”);
  7.             // $(“a”).attr(“href”,”http://wenqy.com”);
  8.         });

Html代码

  1. <body>
  2.     <p style=“float:center;text-align: center”>hello world! welcome to wenqy.com!</p>
  3. </body>

效果

看下效果图

wenqy_jquery_blockUI

前提是必须先引用jQuery代码库。然后进行扩展。不管能不能登大雅之堂,反正就是要上道。

参考:

https://github.com/chokcoco/jQuery- jQuery源码剖析

http://plugins.jquery.com/ 官网插件扩展

http://learn.jquery.com/plugins/ 官网插件学习

http://plugins.jquery.com/docs/publish/ 官网插件发布

发表评论

电子邮件地址不会被公开。 必填项已用*标注

1 + 8 = ?