使用jQuery写插件

程序员文章站 2024-03-05 15:26:37

...

jQuery一直在用，但是却没有自己写过插件，看了几篇博客，想整理一下。

jQuery编写插件的方式：
使用jQuery写插件
接下来分别举例介绍它们：
参考文章
1、类级别的静态开发就是给jQuery添加静态方法。

首先创建classDev.js文件，

//1、直接给jQuery添加全局函数
jQuery.myAlert1 = function(str1){
    alert(str1);
};

//2、使用extend方法，jQuery.extend(object)；把两个或更多的对象合并到第一个当中，
// 为扩展jQuery类本身，为自身添加新的方法。
jQuery.extend({
    myAlert2: function(str2){
        alert(str2);
    },
    myAlert3: function(){
        alert("3333");
    }
});

//3、使用命名空间（防止与其它引入的JS库里面的同名方法冲突）
jQuery.test = {
    myAlert4: function(str4){
        alert(str4);
    },
    centerWindow: function(obj){
        console.log($(window).height());
        console.log(obj.height());
        obj.css({
            'top': ($(window).height() - obj.height())/2,
            'left': ($(window).width() - obj.width())/2
        });
        return obj;   //返回对象，才能进行链式调用
    }
};

其次，创建html文件，引入jQuery源文件以及classDev.js文件。并对classDev.js中的插件函数进行自定义调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="classDev.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function (){
                $.myAlert1('我是调用jQuery编写的插件弹出的警告框');
                $.myAlert2('我是调用jQuery的extend()方法编写的插件弹出的警告框');
                $.myAlert3();
                $.test.myAlert4('我是使用命名空间编写的插件弹出的警告框');
            });
            //使用centerWindow的居中功能，同时进行链式调用设置颜色。
            $.test.centerWindow($('#div1')).css('background','red');
        });
    </script>
</head>
<body>
    <div id="div1" style="position:absolute;width:50px;height:50px;">
        <button id="btn" style="width:20px;height:20px;"></button>
    </div>
</body>
</html>

注意：classDev.js文件引用了jQuery的jQuery类，所以必须在其后引入。显示效果：
使用jQuery写插件
div已经居中显示，背景为红色，灰色button在div的左上角，点击button，会依次弹出myAlert1、myAlert2、myAlert3、myAlert4的消息。

如你所见，这种方式来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中的任何需要的地方调用它。但这种方法无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好的运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到的或使用的插件也大多是通过此种方式开发。

2、对象级别的插件开发。

$. f n 中的 f n 是指 p r o t o t y p e ，即$ .fn = $. p r o t o t y p e 。加在 f n 上的方法及属性，会对每一个 j Q u e r y 实例有效。如扩展 . f n . a b c () ，即 . f n . a b c () 是对 j Q u e r y 扩展了一个 a b c 方法，那么后面你的每一个 j Q u e r y 实例都可以引用这个方法了。例如：$ (“#div”).abc()。

比如我们将上面页面中的div转成绿色，则可以将classDev.js改写成：

$.fn.myPlugin = function() {
    //this指代jQuery选中的元素返回的集合，要进行链式调用，返回this即可。
    this.css('backgroundColor', 'green');
}

将html中对div进行操作的script部分变成：

$(function(){
    $('#div1').myPlugin();
})

可以看见div变成了绿色。但是为了让插件功能更加强大，例如让插件的使用者自己定义显示什么颜色，我们就需要在调用的时候给插件传入参数。并使用jQuery的extend()方法将参数对象合并。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接受来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数时使用指定的值，未指定的参数使用插件默认值。

jQuery官方给了一套对象级别开发插件的模板：

;(function ($) {
    $.fn.plugin = function (options) {
        var defaults = {
            //各种参数、各种属性 
        };

        //options合并到defaults上，defaults继承了options上的各种属性和方法，将所有的赋值给endOptions
        var endOptions = $.extend(defaults, options);

        this.each(function(){
            //实现功能的代码；  
        }); 
    };
})(jQuery);

关于模板的几点说明：
* 使用自调用匿名函数包裹了代码，不会污染全局命名空间，同时不会和别的代码起冲突；并且，自调用匿名函数里面的代码会在第一时间执行，页面准备好过后，上面的代码就将插件准备好了，以方便在后面的代码中使用插件。
* 代码前加分号，防止前面别人写的代码没有用分号结尾；
* 将jQuery变量以参数形式传递到插件内部，这样，jQuery在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能提升。

jQuery轮播图插件：

之前自己用js写过原生的轮播图，步骤：
* 把当前索引index的图片显示，导航icon高亮；其余图片隐藏；
* 向左向右按钮以及导航按钮的实现，都是改变索引index，再利用index控制相应css，显示对应图片；
* 利用定时器实现图片的自动导航，就是利用setInterval，隔一段时间，使得index+1。显示改变后index对应得图片；
* 当鼠标放入图片轮播的div时，要清除定时器，停止自动轮播，方便我们操作左右按钮以及导航按钮。

下面记录一个轮播图插件，来源，其中有些许错误，已改正：

//html部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>banner图学习中</title>
    <style type="text/css">
        *{margin:0; padding: 0;font-family: 'Microsoft Yahei';}
        a{text-decoration: none;}
        li{list-style: none;}
        img{border:0;}
        ul{list-style: outside none none;}
        .slider{ width: 500px; height: 485px;border:1px solid #000; margin:0 auto; overflow: hidden; position: relative;text-align: center;}
        .slider .slider_main li{ width: 500px; height: 485px;position: absolute;}
        .slider .slider_main img{ width: 500px; height: 485px;}
        .slider .slider_nav{ width:160px; height:15px;bottom:15px; left: 40%; position: absolute;text-align: center;}
        .slider .slider_nav li{ float: left; width: 15px; height: 15px; cursor: pointer; background: #ccc; text-align: center; margin-left:10px;border-radius: 50%;}
        .slider .slider_nav li.on{ background: #f73f07; }
        .slider .slider_page .slider_pre,.slider .slider_page .slider_next{width: 51px;top:46%; height: 51px; position: absolute; display:inline-block; *display:inline; zoom:1; z-index: 8; font-size: 28px;}
        .slider .slider_page .slider_pre{left:10px;  }
        .slider .slider_page .slider_next{right:10px; }
    </style>
</head>
<body>
    <!-- 第一步先放一个大盒子，装图片和相关按钮 -->
    <div class="slider" id="sliderBox">
        <!-- 第二步放图片布局 -->
        <ul class="slider_main">
            <li class=""><a href="#"><img src="./img/nav1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="./img/nav2.jpg" alt="" /></a></li>
            <li><a href="#"><img src="./img/nav3.jpg" alt="" /></a></li>
            <li><a href="#"><img src="./img/nav4.jpg" alt="" /></a></li>
            <li><a href="#"><img src="./img/nav5.jpeg" alt="" /></a></li>
        </ul>
        <!-- <div class="slider_extro"> -->
        <!-- 点点索引 -->
        <ul class="slider_nav">
            <li class="slider_item on"></li>
            <li class="slider_item"></li>
            <li class="slider_item"></li>
            <li class="slider_item"></li>
            <li class="slider_item"></li>
        </ul>
        <!-- 左右箭头 -->
        <div class="slider_page">
            <a class="slider_pre" href="javascript:;"><</a>
            <a class="slider_next" href="javascript:;">></a>
        </div>
        <!-- </div> -->
    </div>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="classDev.js"></script>
    <script type="text/javascript">
        $("#sliderBox").jquerySlider ({
            auto:true,
            times:1000
        });
    </script>
</body>
</html>

jQuery插件classDev.js的部分：

;(function($){
    //定义插件名称 jquerySlider
    $.fn.jquerySlider = function(options){
        //定义默认设置
        var defaults = {
            auto: true, //是否自动播放
            sliderli:'.slider_main li',
            pagenvali:'.slider_nav li', //分页按钮集合
            active:"on",
            prev: '.slider_pre', //上一页
            next: '.slider_next', //下一页
            actions:"click",
            curren:0,
            times: 1000, //定时器时间
            flag: true //默认从左往右播放
        };


        //可以被拓展的默认设置(通过使用$.extend)
        var options = $.extend({}, defaults, options); //{}这个代表是把defaults 和后面的optinso整合一起返回给你options


        this.each(function(){
            var _this = $(this),
                sliderli = $(options.sliderli,_this),
                pagenvali = $(options.pagenvali,_this),
                interval = null;//定时器


            //分页
            pagenvali.on(options.actions, function(event) {
                event.preventDefault();
                var index = $(this).index();  //jQuery的index()函数，自动获取下标
                $(this).addClass(options.active).siblings(pagenvali).removeClass(options.active);
                sliderli.eq(index).fadeIn().siblings(sliderli).fadeOut();
            });


            //上一页，下一页，注意这里因为是上一页和下一页，记得要打逗号  + “ ，”+
            $(options.prev+','+options.next).on('click',  function(event) {
                event.preventDefault();
                clearInterval(interval);//清除定时器
                $(this).is(options.prev) ? sliderchage(false) : sliderchage(true);
            });


            //hover
            _this.hover(function() {
                clearInterval(interval);
            }, function() {
                autoplay();
            });


            //切换js
            function sliderchage(flag){
                console.log("循环播放")
                if(flag){
                    if(options.curren >= sliderli.length-1){
                        options.curren = 0 ;
                    }else{
                        options.curren++;
                    }
                }else{
                    if(options.curren <= 0){
                        options.curren = sliderli.length-1;
                    }else{
                        options.curren--;
                    }
                }
                pagenvali.eq(options.curren).addClass(options.active).siblings().removeClass(options.active);
                sliderli.eq(options.curren).fadeIn().siblings(sliderli).fadeOut();
            }


            //自动播放
            function autoplay(){
                interval = setInterval(function(){
                    sliderchage(options.flag);
                }, options.times);
            }


            //是否自动播放
            options.auto ? autoplay():''
        });


        //返回
        return this;
    }
})(jQuery);

3、利用$.widget()
这个功能强大，但是用的较少，暂且不说。参考文章：编写jQueryUI插件(widget)

4、插件在Github的发布 参考文章

使用jQuery写插件

使用jQuery写插件

jQuery三级联动插件

jQuery插件及ajax

jQuery Datepicker 日期插件

jQuery插件cookie

toly插件02之Jquery拖动插件--toly-drag

jQuery sudoSlider插件

jquery画图插件jPainter

jQuery.touchswipe插件

jQuery地图插件-jqvmap