封装自己的jquery插件

第一步:要想封装自己的jq插件,要先了解jquery插件运行机制。jQuery使用无new的构造方式,直接$(' ')进行构造,相当于new jQuery()。看下面例子。

封装自己的jquery插件_第1张图片

 jQuery将jQuery.prototype赋值给jQuery.prototype.init的prototype作为中转站,最终return出了一个jQuery实例。将上述代码写在一个自执行函数内(形成私有作用域,避免命名空间污染),就构成了jQuery的核心框架。

第二步: jquery的两种使用方法 $.function() 和 $("selector");

 1  $.function() 是在jquery原型对象设置的方法。我们可以通过 $.fn.extend()去扩展。例如:

 $.fn.extend({
            getMax:function(a,b){   //getMax 自定义方法。3
                var result=a>b?a:b;
                console.log(result);
            }
        });
        $("input").getMax(1,2); //使用方法

2 $("selector")是在jquery对象上设置的方法。我们可以通过$.extend()去扩展。例如:

 $.extend({
        print1:function(name){            //print1是自己定义的函数名字,括号中的name是参数
            console.log(name)
        }
    });
     $.print1("222") ;    //使用方法

 所以我们的扩展插架也有两种方式。

第一种:在jQuery对象上添加了一个静态方法。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素($('selector').myfunction())。

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('test'); //带参调用

第二种方法:运用面向对象的思维方式,在jquery的原型上扩展方法。这就要用到 $.fn.extend({})这个方法了。


;(function($,window,document,undefined){ //用一个自调用匿名函数把插架代码包裹起来,防止代码污染
     $.fn.插件名称 = function (options) {
        var defaults = {          //defaults 使我们设置的默认参数。
            Event : "click",      //触发响应事件
            msg : "Holle word!"   //显示内容
        };
        var options = $.extend(defaults, options);    //将传入参数和默认参数合并
        var $this = $(this);      //当然响应事件对象
       
        $this.live(options.Event, function (e) {   //功能代码部分,绑定事件
            alert(options.msg);
        });
    }
})(jQuery,window,document);

//调用插件
$("#test").插件名称({
        Event : "click", //触发响应事件
        msg : "测试插件!" //显示内容
    });

是不是很简单。

你可能感兴趣的:(封装自己的jquery插件)