jQuery插件的写法

jquery插件写法;

jquery整体有两种使用形式;一种是$.ajax(),另一种是$(selector).xx();这两种方法的插件编写形式也有不同

$.ajax();

这里我仿照$.ajax()写了一个简单的求和的插件;

    $.extend({
        sum: function() {
            var sum = 0;
            for ( var i = 0, r = arguments.length; i< r; i++ ) {
                sum += arguments[i];
            }
            return sum;
        }
    });
    var t = $.sum(0,1,2,3,4,5);
    console.log(t);

$(selector).xx();

这里是写的一个下拉菜单的插件;$(selector).xx()组件的写法里必然会出现一个jQuery(this)或者$(this)作为当前选择器;

    <style>
        .second,.third {
            display:none;
        }
        .show {
            display:block;
        }
    </style>
    <ul class="first">
        <li>
            <a href="javascript:;">女装</a>
            <ul class="second">
                <li>
                    <a href="javascript:;">上衣</a>
                    <ul class="third">
                        <li><a href="javascript:;">毛衣</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">裤子</a>
                    <ul class="third">
                        <li><a href="javascript:;">毛裤</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">鞋子</a>
                    <ul class="third">
                        <li><a href="javascript:;">皮鞋</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <script src="//cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
    <script>

        $.fn.extend({
            clickMenu: function() {

                if ( jQuery(this).siblings().hasClass('show') ) {
                    jQuery(this).siblings().removeClass('show');
                } else {
                    jQuery(this).siblings().addClass('show');
                }
            }
        })

        $('.first').on('click',function(e) {
            $(e.target).clickMenu();
        })

    </script>

总结

两种插件的写法都是扩展的jQuery的extend方法.神奇的是在jQuery中 jQuery.extend = jQuery.fn.extend = function() {}是同一个方法,这个
extend是通过for……in……实现对象的copy功能;
至于两者的区别?jQuery.extend,是将jQuery看成一个对象,而extend作为该对象的一个方法;
jQuery.fn.extend 则由于jQuery.fn = jQuery.prototype = {},将jQuery作为一个实例化对象,jQuery.fn.extend是该对象上的原型方法.