jquery插件扩展入门-打造一款自己的插件遮罩 | 小温之家

frontend

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

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

jQuery源码

先看下几段jQuery源码：

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

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

jQuery.fn = jQuery.prototype = {
// ….
}
init = jQuery.fn.init = function( selector, context ) {
// …
}
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

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

jQuery.fn.init.prototype =  jQuery.fn = jQuery.prototype；

new jQuery.fn.init() 相当于 new jQuery() ，所以可以无 new 实例化 jQuery 对象。

再一看这个代码片段

jQuery.extend = jQuery.fn.extend = function() {
// …
}

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

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

jQuery对象级插件

// 添加jQuery对象级的插件，是给jQuery类添加方法
// 调用方法：$(“#id”).函数名(参数);
// 第一种对象方法
$.fn.center = function() {
    // 在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，
    // 用jQuery选择器选中的元素，一般是一个jQuery包装类型的集合
    // 支持链式调用，使用 return
    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’);
}
// 第二种对象方法
$.fn.extend({
    color: function(value) {
        return this.css(“color”,value);
    }
});

jQuery类级别插件

// jQuery类级别的插件，相当于添加静态方法
// 调用方法：$.函数名(参数);
// 第一种类方法
$.blockUI = function() {
    $(‘<div id=“wenqy_shadelay”><div id=“wenqy_center”><span style=“background:white”>正在加载，请稍后…</span></div></div>’).css({
        position: ‘fixed’,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        opacity: 0.6,
        background: ‘black’,
        display: ‘none’
    }).appendTo(‘body’).fadeIn(‘normal’, function() {
        $(‘#wenqy_center’).color(“red”).center();
    })
    //.click(function(event) {
    //  $(this).fadeOut(‘normal’, function() {
    //      $(this).remove();
    //  });
    //})
    ;
}
// 第二种类方法
$.extend({
    unblockUI: function() {
        $(“#wenqy_shadelay”).fadeOut(‘normal’, function() {
            $(this).remove();
        });
    }
});

匿名函数包裹

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

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

加载调用

再模拟测试下调用

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

Html代码

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

效果

看下效果图

wenqy_blockUI

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

参考：

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

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

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

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

本文由 wenqy 创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Nov 8,2020