封装自己的jquery插件

最新推荐文章于 2021-04-06 22:51:43 发布

你是八月的光亮

最新推荐文章于 2021-04-06 22:51:43 发布

阅读量453

点赞数

本文链接：https://blog.youkuaiyun.com/kun_moon/article/details/100025204

版权

第一步：要想封装自己的jq插件，要先了解jquery插件运行机制。jQuery使用无new的构造方式，直接$(’ ')进行构造，相当于new jQuery()。看下面例子。
在这里插入图片描述
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 $(" s e l e c t o r ") 是在 j q u e r y 对象上设置的方法。我们可以通过$ .extend(）去扩展。例如：

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

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

第一种：在jQuery对象上添加了一个静态方法。所以我们调用通过 $. e x t e n d () 添加的函数时直接通过$ 符号调用（ $. m y f u n c t i o n () ）而不需要选中 D O M 元素 ($ (‘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 : "测试插件!" //显示内容
    });