jQuery自定义导航插件的开发过程

前言

在开发过程中，我们经常会使用到插件，其具有方便灵活的特点，但是如果在市面上找不到自己满意的插件，或者想自己封装一个插件提供给别人使用时，就需要自己编写一个jQuery插件了。
按照功能来分类，插件可以分为以下三类：

1.封装对象方法的插件（就是基于DOM元素的jQuery对象，具有局部性）
2.封装全局函数的插件（全局性的封装）
3.选择器插件（类似于.find()）

经过这么长时间的插件开发，开发者们逐步约定了一些规则，以解决各种因为插件导致的错误和冲突，包括下面的规则：

插件名推荐使用jquery.[插件名].js,以免和其他js文件或者其他库相冲突；
局部对象附加到jquery.fn对象上，全局函数附加在jquery上；
插件内部，this指向当前的局部对象；
可以通过this.each来遍历所有元素；
所有的方法或插件都必须用分号结尾，避免出现问题；
插件应该返回的是jquery对象，以保证可链式连缀；
避免插件内部使用$，如果一定要使用，请传递jQuery。

下面我们来自定义开发一个简单的导航插件。

插件开发

首先定义一个导航栏：

<ul class="list">
        <!-- html -->
        <li>导航列表
            <ul class="nav">
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
                <li>导航列表1</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
                <li>导航列表2</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
                <li>导航列表3</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
                <li>导航列表4</li>
            </ul>
        </li>
        <li>导航列表
            <ul class="nav">
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
                <li>导航列表5</li>
            </ul>
        </li>
    </ul>

然后写css,给导航栏设置一下样式：

.list {
    list-style: none;
    padding: 0;
    font-style: 13;
    color: #fff;
    width: 500px;
    margin: 50px auto;
}

.list li {
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #333;
    cursor: pointer;
}

接下来开始写插件js实现部分，先给导航栏设置样式和下拉特效：

$(".nav").css({
        'list-style' : 'none' ,
        'margin' : 0,
        'padding' :0,
        'display' : 'none'
    });

    $(".nav").parent().hover(function(){
        $(this).find('.nav').slideDown('normal');
    },function(){
        $(this).find('.nav').slideUp('normal');
    })

注意上面的parent()，因为在使用插件时，我们不知道外部的情况，所以不能直接指定某个标签或者类来定位，直接指定父元素是肯定不会出错的。
到这一步已经基本实现了功能，但是你把鼠标放到父元素的时候会发现，快速的来回导航切换会导致一个类似”波浪的效果”，用户体验并不太好，所以我们需要将导航下拉的特效及时的停止，所以要加一个stop()函数。改变后就是：

$(".nav").css({
        'list-style' : 'none' ,
        'margin' : 0,
        'padding' :0,
        'display' : 'none'
    });

    $(".nav").parent().hover(function(){
        $(this).find('.nav').stop().slideDown('normal'); //加上stop函数
    },function(){
        $(this).find('.nav').stop().slideUp('normal'); //加上stop函数
    })

下面我们将其放入jquery.nav.js中封装好

;(function ($){  //分号为了防止前面代码的干扰
    $.extend({
        'nav':function(){
                $(".nav").css({
                    'list-style' : 'none' ,
                    'margin' : 0,
                    'padding' :0,
                    'display' : 'none'
                });

                $(".nav").parent().hover(function(){
                    $(this).find('.nav').stop().slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                })
                return this;
        }
    })
})(jQuery);

然后在HTML中引入，并在本来的js中调用它

$(function(){
    $.nav();
});

这样就能实现全局性的导航列表插件了
这里写图片描述
如果要实现局部性插件功能，就要稍作修改了

;(function ($){
    $.fn.extend({   //加上fn
        'nav':function(){
                $(this).find(".nav").css({    //改为this
                    'list-style' : 'none' ,
                    'margin' : 0,
                    'padding' :0,
                    'display' : 'none'
                });

                $(this).find(".nav").parent().hover(function(){  //改为this
                    $(this).find('.nav').stop().slideDown('normal');
                },function(){
                    $(this).find('.nav').stop().slideUp('normal');
                })
                return this;   
        }
    })
})(jQuery);

然后在js里面调用它

$(function(){
    $('.list').eq(0).nav();   //eq()表示调用第几个，同时nav()中可以传参，改变其它属性
});

以上就是全部的内容了，大家要将自定义插件的过程了解清楚，掌握其规则，在自己开发时避免踩到更多的坑。

jQuery自定义导航插件的开发过程

前言

插件开发

猜你喜欢