jquery编写插件的两种方法
时间：7年前 阅读：5943
如今做web开发，jquery几乎是必不可少的，就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。
编写插件的两种方式:
1、类级别开发插件(1%)
2、对象级别开发(99%)
类级别的静态开发就是给jquery添加静态方法，三种方式
1、添加新的全局函数
2、使用$.extend(obj)
3、使用命名空间
类级别开发插件（用的非常少，1%）
分别举例：
//1.直接给jquer添加全局函数
jQuery.myAlert=function (str) {
alert(str);
};
//2.用extend()方法。extend是jquery提供的一个方法，把多个对象合并起来，参数是object
jQuery.extend({
myAlert2:function (str1) {
alert(str1);
},
myAlert3:function () {
alert(11111);
}
});
//一定要注意两种类级别编写插件方式书写的区别。
//3.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突)
jQuery.yuqing={
myAlert4:function (str) {
alert(str);
},
centerWindow:function (obj) {
obj.css({
'top':($(window).height()-obj.height())/2,
'left':($(window).width()-obj.width())/2
});
//必须进行返回对象的操作，否则就不能继续往下进行链式操作了。。
return obj;
}
};
调用部分：
//调用自定义插件方法
$('#btn').click(function () {
$.myAlert('我是调用jquery编写的插件弹出的警告框');
$.myAlert2('我是调用jquery的extend()方法编写的插件弹出的警告框');
$.myAlert3();
$.yuqing.myAlert4("调用使用了命名空间编写的插件方法");
});
$.yuqing.centerWindow($('#div1')).css('background','red');
注意：jquery文件要一并引入。
对象级别开发插件（常用99%）
jquery官方给了一套对象级别开发插件的模板：
;(function ($) {
$.fn.plugin=function (options) {
var defaults={
//各种参数、各种属性
};
//options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
var endOptions=$.extend(defaults,options);
this.each(function () {
//实现功能的代码
});
};
})(jQuery);
模板要点：
1、函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全
2、前面加分号,避免不必要的麻烦
举个栗子：
需求：开发一个插件，要求奇数行颜色是yellow，偶数行颜色是green，鼠标移到的行变为blue，移除变为原来的颜色
HTML布局：
<table id="tab"> <tr> <th>姓名</th> <th>年龄</th> <th>身高</th> <th>体重</th> </tr> <tr> <td>张三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> <tr> <td>张三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> <tr> <td>张三</td> <td>22</td> <td>178cm</td> <td>79kg</td> </tr> <tr> <td>美美</td> <td>34</td> <td>167cm</td> <td>60kg</td> </tr> <tr> <td>小青</td> <td>23</td> <td>170cm</td> <td>55kg</td> </tr> </table>
css样式
table{
width: 100%;
border-collapse: collapse;
border: 1px solid palevioletred;
}
th,td{
height: 30px;
text-align: center;
border: 1px solid deeppink;
}
.evenRow1{background: yellow;}
.oddRow1{background: green;}
.curRow1{background: blue;}
jquery调用代码：
$('#tab').table({
evenRowClass:'evenRow1',
oddRowClass:'oddRow1',
curRowClass:'curRow1',
eventType1:'click'
});
jquery插件代码：
;(function ($) {
$.fn.table=function (options) {
var defaults={
//各种参数、各种属性
evenRowClass:'evenRow',
oddRowClass:'oddRow',
curRowClass:'curRow',
eventType1:'mouseover',
eventType2:'mouseout'
};
var endOptions=$.extend(defaults,options);
this.each(function () {
var _this = $( this );
_this.find('tr:even').addClass(endOptions.evenRowClass);
_this.find('tr:odd').addClass(endOptions.oddRowClass);
//鼠标移入和移出，但实际开发中不直接使用mouseover这种方法
/*$(this).find('tr').mouseover(function () {
$(this).addClass(endOptions.curRowClass);
}).mouseout(function () {
$(this).removeClass(endOptions.curRowClass);
});*/
//实际开发中要用bian()方法绑定
//因为用bind()方法绑定非常灵活，事件可以自己定义
//mouseover mouseout...事件底层都是用bind()去实现的，mouseout 等只是快捷方式
_this.find('tr').bind(endOptions.eventType1,function () {
$(this).addClass(endOptions.curRowClass);
});
_this.find('tr').bind(endOptions.eventType2,function () {
$(this).removeClass(endOptions.curRowClass);
})
});
};
})(jQuery);
插件注释：
15行：var _this = this; 变量存储，因为很多地方用到$(this);所以将其存储为变量使用更加的方便，也提高了运行效率。
19-23行与28-33行实现的功能是相同的，但是推荐使用28-33行的写法，使用bian()进行事件的绑定，因为使用会非常的灵活。
可变的地方，如样式名称等最好写在defaults里，方便用户自行配置。
再来一个对象级别实现jquery插件的栗子(⊙o⊙)哦！！实现选项卡功能~~
HTML布局
<div id="tab"> <ul id="nav"> <li class="active">HTML</li> <li>CSS</li> <li>JAVASCRIPT</li> </ul> <div id="cont"> <div style="display: block;">HTML</div> <div>CSS</div> <div>JAVASCRIPT</div> </div> </div>
css样式：
* {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
height: 25px;
line-height: 25px;
border: 1px solid #0000FF;
border-bottom: none;
padding: 5px;
margin: 10px;
margin-bottom: 0;
}
#cont div {
width: 210px;
height: 150px;
border: 1px solid #0000FF;
margin-left: 10px;
clear: both;
display: none;
}
.active {
background: #AFEEEE;
}
调用的JS代码
<script type="text/javascript">
$('#tab').tab({
tabType: 'mouseover'
});
</script>
注意哦：不要忘记先引入jquery.js文件喔，然后在引入我们编写的插件tab.js，才能正确调用到tab()方法。。。
插件tab.js
;(function($) {
$.fn.tab = function(options) {
var defaults = {
tabActiveClass: 'active',
tabNav: '#nav>li',
tabCont: '#cont>div',
tabType: 'click'
};
var endOptions = $.extend(defaults, options);
$(this).each(function() {
var _this = $(this);
_this.find(endOptions.tabNav).bind(endOptions.tabType, function() {
$(this).addClass(endOptions.tabActiveClass).siblings().removeClass(endOptions.tabActiveClass);
var index = $(this).index();
_this.find(endOptions.tabCont).eq(index).show().siblings().hide();
});
});
};
})(jQuery);
这个小栗子和上一个表格插件的栗子相似度是很高的，多敲几遍，理解意思，其实jquery扩展插件并不难哦~~
如有不对的地方，还请各路大神赐教！
什么是成功？就是所有失败的路都走过了，只剩下一条路还没有走，这条路就叫成功！
本文转载：https://www.cnblogs.com/yuqingfamily/p/5813270.html
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论