JQuery插件编写
浏览数：50 /
时间：2015年06月09日
jQuery插件的开发包括两种：类级别的插件开发和对象级别的插件开发。
类级别的插件开发：
1、添加一个全局函数，如下定义：
jQuery.ABC = function () { alert(‘this is my first extent Program!!‘); }
如果我们需要定义多个，可采用如下定义：
jQuery.AAA = function () { alert(‘this is my first extent Program!!‘); } jQuery.BBB = function (param) { alert(‘this is my first extent Program!!‘ + param); }
调用方式：
jQuery.BBB(‘123‘);
显示结果：
2、使用jQuery.extend(object)方式定义，代码如下：
jQuery.extend({ CCC: function () { alert(‘this is my first extent Program!!‘); }, DDD: function (param) { alert(‘this is my first extent Program!!‘ + param); } })
3、使用命名空间，为了避免插件中某些变量或者方法与其他插件冲突，我们习惯将一个插件封装到一个命名空间下，代码如下：
jQuery.MyExtent = { EEE: function () { alert(‘this is my first extent Program!!‘); }, FFF: function (param) { alert(‘this is my first extent Program!!‘ + param); } }
调用方式：
$.MyExtent.FFF(‘123‘);
二、对象级别的插件开发
对象级别插件开发有两种定义方式，分别如下：
方式一：
$(function ($) { $.fn.extend({ AAA: function () { //coding...... } }) })(jQuery);
方式二：
$(function ($) {
$.fn.FirstExtens=function(){
//coding
}
})
})(jQuery);
1.接受options参数以控制插件的行为
$(function ($) { $.fn.No2 = function (options) { var defaults = { name: ‘小李‘, age: 32 }; var opt = $.extend(defaults, options); alert(opt.name + ‘‘ + opt.age); } })(jQuery);
调用：
$("#tt1").No2({
name: ‘张三‘
});
2.暴露插件的默认设置
$(function ($) { $.fn.No2 = function (options) { var opt = $.extend({}, $.fn.No2.defaults, options); alert(opt.name + ‘‘ + opt.age); } $.fn.No2.defaults = { name: ‘小李‘, age: 32 }; })(jQuery);
调用：
$.fn.No2.defaults.name = ‘长三‘; //可以这样调用设置值
$("#tt1").No2(); //调用方法
3.适当的暴露一些函数
这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。例如，我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。我们的插件现在看起来像这样，默认的format方法的实现部分在hiligth函数下面。
$(function ($) { $.fn.No2 = function (options) { var opt = $.extend({}, $.fn.No2.defaults, options); return this.each(function () { var $this = $(this); var content = $this.text(); content = content + ‘--此处已经修改--‘; $this.text(content); $.fn.No2.format(opt); }) } $.fn.No2.defaults = { name: ‘小李‘, age: 32 }; $.fn.No2.format = function (option) { alert(‘Hi, My name is ‘ + option.name + ‘,I\‘m ‘ + option.age + ‘year old...‘); } })(jQuery);
调用：
$.fn.No2.defaults.name = ‘张三‘; //可以这样调用设置值
$("#tt1").No2({
name: ‘老王‘ //覆盖设置的值
});
$.fn.No2.format({ //暴露的函数，可以直接在外部调用
name: ‘火龙果‘,
age: ‘1‘
});
结果：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
