理解$.extend(),与$.fn.extend()方法区别
原文链接:http://www.cnblogs.com/navy235/archive/2011/05/17/2049120.html
1.$.extend()方法
$.extend()方法在JQuery中有两个用法,第一次是扩展方法,
第二个方法是
jQuery.extend([deep], target, object1, [objectN])
返回值:Object
把2个对象合并得到新的target,deep是可选的(递归合并)
合并 settings 和 options,修改并返回 settings。
jQuery 代码:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
描述:
合并 defaults 和 options, 不修改 defaults。
jQuery 代码:
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
2中扩展:
第一种,看代码
$(
function
(){
jQuery.extend({
modalshow:
function
(options) {
var
defaults = {
triggerID:
'LoginShow'
,
callback:
function
() { }
}<br>
//这里是$.extend的第二种用法<br> var opts = $.extend({},defaults, options);
if
($(
"#"
+ opts.triggerID)[0] ==
null
) {
var
$triggerBTN = $(
'<input type="button" value="LoginShow" id='
+ opts.triggerID +
'/>'
);
$triggerBTN.bind(
"click"
,
function
() {
alert(opts.triggerID);
});
$(
"body"
).append($triggerBTN);
}
else
{
$(
"#"
+ opts.triggerID).bind(
"click"
,
function
() {
alert(opts.triggerID);
})
}
}
});
$.modalshow();
//这里是调用的地方,id为'loginshow'的button可以先不再HTML中添加可以自动生成
})
|
第二种扩展
$(
function
(){
jQuery.fn.extend({
modalshow:
function
(options) {
var
defaults = {
//这里的this是JQuery对象
triggerID:
this
.attr(
"id"
),
callback:
function
() { }
}<br>
//这里是$.extend的第二种用法<br> var opts = $.extend(defaults, options);
$(
"#"
+ opts.triggerID).bind(
"click"
,
function
() {
alert(opts.triggerID);
})
}
});
$(
"#loginShow"
).modalshow();
//这里是调用的地方,这里需要先在HTML中加入元素
})
|