jquery插件基本格式

前端之家收集整理的这篇文章主要介绍了jquery插件基本格式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.jquery中$是神马?$.fn又是神马?

@H_403_2@稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知:

$ === jQuery
true
@H_403_2@在jquery源码中也能找到下面代码

window.jQuery = window.$ = jQuery;
@H_403_2@$.fn就是$的原型,,在源码中我们也能找到:

jQuery.fn = jQuery.prototype

插件的写法

@H_403_2@一个常见的插件的基本样式应该如下(注释写的很详细,就不再一一赘述):

/*
插件名:
作者:
日期:等信息
*/

//一个匿名自执行函数,划分一个独立的作用域,不至于插件中的变量干扰jquery

;(function($){ //开始写上; 为防止代码压缩出错

//为jquery扩展<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>,也就是<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>的主体
$.fn.extend({

    //<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>名
    "method" : function(opts){
        //定义<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>的默认参数
        var default = {
            width : //定义默认宽度
            height : //定义默认高度
            speed : //定义默认速度
            //等等各种默认参数
        }
        //有些参数<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>直接使用默认,有些参数<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>要使用自己定义的
        //<a href="/tag/zidingyi/" target="_blank" class="keywords">自定义</a>参数替换默认参数
        //var option = $.extend(default,opts); //为什么不用此行<a href="/tag/daima/" target="_blank" class="keywords">代码</a>?为了保护默认参数
        //extend<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>中opts会永久取代default,所以新加一个空对象{}来保存本次所使用的参数,下次使用default依然不变
        var option = $.extend({},default,opts);

        this.each(function(){ //用each处理选择器选中的一个或多个dom节点
            /*
                此处是<a href="/tag/chajian/" target="_blank" class="keywords">插件</a>处理过程<a href="/tag/daima/" target="_blank" class="keywords">代码</a>
            */
        });

        //最后别忘了保持jquery的链式操作(视情况而定)
        return this; //返回被选中的元素节点,以供后续操作。
    }

});

})(jQuery)//传入jQuery是为更快查找,避免沿作用域链往上层查找,提高性能

猜你在找的程序笔记相关文章