JQuery插件之$.fn
人心 2019-07-01
jQuery对象方法
$("a").css("color", "red");当使用$选择元素的时候，它会返回一个jQuery对象，这个对象中包含了你一直使用的方法（比如：.css()，.click()等）。这个jQuery对象是从$.fn对象中得到的这些方法。$.fn对象包含了jQuery对象的所有方法，如果想编写我们自己的方法，也要将方法定义在$.fn对象里面。使用这种方式编写插件，即jQuery类的实例将会拥有此功能。为什么会有这种效果？简单看下源码
jQuery.fn = jQuery.prototype ={
init: function( selector, context ){
//do something...
};从源码可知，当使用$.fn的方式编写插件时，就是在jQuery的原型中绑定新的方法，所以根据原型的特性，新创建的jQuery对象自然会拥有新绑定的方法。
初识插件
目的：改变a标签的字体颜色
做法：创建名为greenify的方法，将其加在$.fn里面。
如此一来，greenify方法适用于所有的jQuery对象了
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="../../js/jQuery-1.8.0.min.js"></script>
<script type="text/javascript">
//这里使用$与jQuery都可以
$.fn.greenify = function () {
/*这里使用this和$(this)都可以*/
this.css("color", "red");
};
$(function () {
//$("a")即jQuery实例化对象
$("a").greenify();
});
</script>
</head>
<body>
<a href="#">Click Me!!!</a>
<a href="#">Cover Me!!!</a>
</body>
</html>$.fn还有另外一种写法$.fn.extend({})
jQuery.fn.extend({
greenify: function () {
$(this).css("color", "red");
}
});
$(function () {
$("a").greenify();
});链式写法
jQuery.fn.extend({
greenify: function () {
$(this).css("color", "red");
//在结尾处返回this
return this;
}
});
$(function () {
$("a").greenify().addClass("greenified");
});链式编程的好处就是当调用完一个方法后，可以在后面继续调用该对象的其他方法。
$的别名保护
$在JavaScript库中使用是非常广泛的，如果你正在使用的其他JavaScript类库中也使用到了$，并且你也使用了jQuery，那么你不得不使用jQuery.noConflict()来解除冲突。显然这会破坏我们的插件，因为它是在假设$是jQuery函数的别名（实际上$本来就是jQuery的别名）如果既想使用其他插件，也要使用jQuery的$别名，我们需要将代码放进立即执行函数（文章结尾会对其简单解释）中，然后将jQuery作为实参传递进去，$作为形参接收。
(function ( $ ) {
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};
}( jQuery ));由于window，document都是全局作用域的，而将其传入函数内部后，其在内部是作为局部变量存在的，这样做可以提高性能，减少作用域的查找时间，如果在函数内部多次调用window、document，这是很高效的做法。
(function ( _window, _document ) {
$.fn.greenify = function() {
this.css( "color", "green" );
return this;
};
}( window, document));另外，存储私有变量也是使用立即执行函数的主要目的，假如想要存储一个默认的颜色，就可以使用一个私有变量进行存储。
(function ($) {
var defaultColor = "pink";
$.fn.extend({
setColor:function () {
$(this).css("color", defaultColor);
return $(this);
}
})
})(jQuery);
$(function () {
//所有div的text都会变成粉色
$("div").setColor();
});;分号的使用
通常在编写插件时，会在在立即执行函数前加入一个分号
;(function($){
//do something...
})(jQuery);作用：防止多个文件压缩合并后，前一个文件最后一行语句没加分号，而引起合并后的语法错误。
如果前面已经加了分号，此时就会多出来一个分号，但这样是不会报错的。即不怕多，就怕少。
undefined解决兼容性问题
;(function($, undefined){
//do something...
})(jQuery)上面代码的undefined参数略显多余，此参数是为了解决undefined在老一辈的浏览器（IE5）可以被赋值的问题，全局的undefined有可能会被其他函数覆盖。
var undefined = 99; alert(undefined);
以上代码如果在IE5运行，可以弹出99， 而不是undefined，如果是这样的话，全局的undefined就有被其他函数覆盖的危险；但以上代码在chrome运行，会弹出undefined。
既然是插件就要考虑兼容性，所以通过在匿名函数中多定义一个undefined的形参，由于只传入了一个实参jQuery，从而可以保证undefined形参未被赋值，从而最终是我们想要的undefined的值，什么是我们想要的undefined？即，undefined没有被赋值，undefined就是undefined。
最大限度的减少插件的空间
当使用$.fn创建插件时，尽量减少空间的占用，能使用参数进行区分的，就不要多定义一个方法，这样可以降低插件被覆盖的可能性。
- 反例
(function( $ ) {
$.fn.TurnOnLight= function() {
// Turn on
};
$.fn.TurnOffLight = function() {
// Turn off
};
}( jQuery ));- 正例
(function( $ ) {
$.fn.light = function( action ) {
if ( action === "turnOn") {
// Turn on light code.
}
if ( action === "turnOff" ) {
// Turn off light code.
}
};
}( jQuery ));使用参数选项
当插件越来越复杂时，通过接收参数选项的方式来自定义插件是一种很好的做法。
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="../../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.extend({
changeColor:function (options) {
var defaultColor = $.extend({
color: "red",
backgroundColor:"skyblue"
}, options);
return $(this).css({
color:defaultColor.color,
backgroundColor:defaultColor.backgroundColor
});
}
});
})(jQuery);
$(function () {
$("div").changeColor();
/*$("div").changeColor({
color:"pink",
backgroundColor:"yellow"
});*/
});
</script>
</head>
<body>
<div>JavaScript</div>
<div>Jquery</div>
</body>
</html>调用changeColor不传递任何参数，文本颜色默认红色，背景默认天蓝色；反之按照传入参数渲染颜色。默认的颜色被$.extned()覆盖为其他颜色。
$.extend({
color: "red",
backgroundColor:"skyblue"
}, options)以上代码执行结果：options如果有值，那么它将覆盖第一个参数并返回options；如果为undefined则直接返回第一个参数。
简单解释立即执行函数（IIFE）
立即执行函数(（Immediately-Invoked Function Expression）也称为自调用函数，函数定义好后会自动执行。(function(){})表示一个匿名函数，后面紧跟一个()，表示立即执行函数。
(function(){
console.log("我会立即执行");
})()
(function(param){
console.log(param); //我会立刻执行
})("我会立刻执行");优点：不会产生产生全局变量，不会造成变量污染。
缺点：只能执行一次，没法重复执行。
在编写插件时，使用IIFE是最合适不过的了，插件只需要引用一次，即执行一次。
