jQuery插件开发
主要是使用$.extend()和$.fn.extend()两个方法扩展对象的方法和属性
API文档上的示例：
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="radio">单选框
<input type="checkbox">多选框
<script src="jquery.min.js"></script>
<script src="jq.fn.extend.js"></script>
</body>
</html>jq.fn.extend.js：
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();index.html:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<ul>
<li>
<a href="http://weibo.com/">我的微博</a>
</li>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<li>
<a href="http://www.google.com">谷歌</a>
</li>
</ul>
<span>我是span标签</span>
<span>我是span标签</span>
<span>我是span标签</span>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script src="jquery.min.js"></script>
<script src="jq.fn.extend.js"></script>
<script>
$(function () {
$.sayWord();
$.sayWord('erbao');
setInterval(function () {
$('div').text('当前的时间是：' + $.log());
}, 1000);
$('a').changeColor().css('font-weight', 'bold');
$('span').myPlugin({
/*'color': 'lightpink',*/
'fontSize': '20px'
});
$('p').myPlugin();
});
</script>
</body>
</html>jq.fn.extend.js：
/**
* $.extend()这种方式开发无法运用jq强大的选择器，只能做简单的对象扩展
* @param {[type]} name) { console.log((name ? name : 'Alan') + ' say some word.'); }
[description]
* @param {Date} log: function () { var date,year,month,day,hour,minute,second; date [description]
* @return {[type]} [description]
*/
$.extend({
sayWord: function (name) {
console.log((name ? name : 'Alan') + ' say some word.');
},
log: function () {
var date,year,month,day,hour,minute,second;
date = new Date();
year = date.getFullYear();
month = parseInt(date.getMonth() + 1);
day = date.getDate();
hour = date.getHours();
minute = date.getMinutes();
second = date.getSeconds();
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
});
// 最常用的jq插件开发格式
$.fn.changeColor = function () {
this.css({'color': 'red'});
// 返回，使其支持链式调用
return this.each(function () {
// 对每个元素进行对应的操作
$(this).append(' ' + $(this).attr('href'));
});
};
// 支持自定义传参
$.fn.myPlugin = function (options) {
var defaults = {
'color': 'green',
'fontSize': '12px'
};
// 写一个空对象，都合并到空对象，保护defaults里面的值
var settings = $.extend({}, defaults, options);
return this.each(function () {
$(this).css({
'color': settings.color,
'fontSize': settings.fontSize
});
});
};$.extend(obj1, obj2) 合并和覆盖到第一个对象
一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保
护了插件里面的默认值。
$.extend({}, defaults, settings);
在处理插件参数的接收上，通常使用jQuery的extend方法，上面也提到过，但那是给extend方法传递单个对象的情况下，这个对象会合并到jQuery身上，所
以我们就可以在jQuery身上调用新合并对象里包含的方法了，像上面的例子。当给extend方法传递一个以上的参数时，它会将所有参数对象合并到第一个里
。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。
利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接收来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数使用指
定的值，未指定的参数使用插件默认值。
为了演示方便，再指定一个参数fontSize，允许调用插件的时候设置字体大小。
面向对象模式开发插件（最好的方式，当代码量特别大的时候，易于维护）
;(function ($, win, doc, undefined) {
// 创建一个构造函数
var Butterfly = function (element, options) {
this.$element = element;
this.defaults = {
'color': 'lightpink',
'fontSize': '20px',
'fontWeight': 'bold'
};
this.options = $.extend({}, this.defaults, options);
};
Butterfly.prototype = {
_init: function () {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'fontWeight': this.options.fontWeight
});
}
};
$.fn.myPlugin = function (options) {
var butterfly = new Butterfly(this, options);
butterfly._init();
};
})(jQuery, window, document);// 调用方式
$(ele).myPlugin();
$(ele).myPlugin({
// ...传参
});
- 上一篇 »php插件功能实现方法介绍
- 下一篇 »使用 javascript 替换 jQuery
