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

一、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 就被取代为橙色。

 二、$.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);