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是最合适不过的了，插件只需要援用一次，即实行一次。
