如何编写jquery的插件？

虽然现在市面上出现了许多优秀的前端的框架.但我们来聊一下最为经典的前端框架jquery.

jquery为我们提供了许多非常有用的方法.例如,获取Dom节点,animate(),ajax等等方法.我们今天来看下,我个人觉得非常非常有用的东西.就是jquery的插件编写。

编写插件的目的是给已有的一系列方法或函数做一个封装,以便在其他地方进行重复使用,方便后期维护和提高开发效率。

编写插件有两种方法

第一种:类级别开发插件

1_1.直接给jQuery添加全局函数

jQuery.hello = function(str){
    alert(str) 
}

前台调用

var a = "1232131asd213"
//类级别的开发插件
$("#btn").click(function(){

$.hello1(a)
})

但是这种写法,如果有多个方法,就显的无能为力了.

1_2.用extend()方法,里面是json;

jQuery.extend({
    hello:function(){
        alert("你好")
    },
    hello1:function(str){
        alert(str)
    }
})

通过extend(),里面可以编写多个方法.

前台调用

var a = "1232131asd213"
//extend的开发插件
$("#btn").click(function(){
      $.hello1(a);
})

1_3 使用命名空间来编写插件

jQuery.kafei = {
    hello:function(str){
        alert(str)
    },

//多个方法.....

例子:编写一个盒子居中的jquery插件方法

jQuery.kafei = {
    centerDiv:function(obj){
        obj.css({
            "position":"absolute",
            "left":($(window).width()-obj.width())/2,
            "top":($(window).height()-obj.height())/2
        })
        return obj;//为了完成链式操作,最后要返回出这个对象
    }
}

前台调用

 var oDiv = $("#div1");
 $.kafei.centerDiv(oDiv).css("background","green");//盒子居中而且会变成绿色

2.对象级别的插件开发。

;(function($){
    $.fn.plugin = function(options){
        var defaults = {
            //各种属性和参数
            


        }
        
    }
    var options = $.extend(defaults,options);
    this.each(function(){//逻辑方法

    })


})(jQuery)

如何编写jquery的插件？

猜你喜欢