您的位置:首页 > Web前端 > JQuery

如何编写jquery的插件?

2018-02-08 16:54 211 查看
虽然现在市面上出现了许多优秀的前端的框架.但我们来聊一下最为经典的前端框架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插件方法
js
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)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: