jQuery 插件运行机制和 $冲突解决

1、jQuery.fn.extend(object)

基本插件
假设我们要创建一个插件，使一组元素中的文本变为绿色。我们要做的就是添加一个名为greenify的函数， $.fn 将像其他任何jquery对象方法一样使用。

$.fn.greenify = function() {
this.css("color","green");
}
//使用
$("a").greenify();

链式操作

jQuery 的一大特性就是链式操作，这是你可以将几个操作链接到一个选择器上。这是通过jQuery对象方法再次返回原始的jQuery对象来完成的。

$.fn.greenify = function() {
this.css("color","green");
return this;
}

$("a").greenify().addClass("greenified");

保护 $ 并添加范围

$ 变量在javascript 库中非常的流行，如果你也使用了另外一个库，这就有可能发生$ 冲突，当然你可以使用 jQuery.noConflict()方式解决。

jQuery.noConflict();
jQuery.("div p").hide();
// 其他库使用$
$("content").style.display = 'none';

运行jQuery.noConflict();将变量$ 的控制器让渡给第一个实现它的库。运行之后只能使用jQuery变量访问jQuery 对象。虽然这样解决了$冲突，但是破坏了插件的使用。

为了与其他插件一起工作，并且使用$ 作为jquery 的别名，我们需要将所有代码放入立即执行函数表达式中，然后传递该函数jQuery并命名该参数$。

(function($) {
$.fn.greenify = function() {
this.css("color","green");
return this;
}
}(jQuery));

接收选项

随着插件越来越复杂，通过接收参数实现可定制化，最简单的方法是使用对象字面量，特别是有很多参数时。

(function($) {
$.fn.greenify = function(options) {
var settings = $extend({
color: "#556b2f",
backgroundColor: "white"
},options);

return this.css: settings.color,
backgroundColor: settings.backgroundColor
});
}(jQuery));
//使用
$("div").greenify({
color: "orange"
})
// color 的默认值 #556b2f 就被取代为橙色。

 2、$.extend(object)

作用：拓展jQuery对象本身，在jQuery命名空间上增加新函数

jQuery.extend({
min:function(a,b) {
return a < b ? a : b
},
max:function(a,b) {
return a > b ? a : b
}
});
// 使用
jQuery.min(2,3);
jQuery.max(4,5);