《锋利的jQuery（第2版）》jQuery核心原理及插件编写
前六章的内容在上一篇文章中已有介绍，后面的内容主要是一些JQuery的插件的介绍，有一些感觉是很有用的，但是有一些个人觉得构建一个功能需要引入2-3个插件，就有点累赘，所以我觉得学会先学会如何编写插件才是最适合自己的方法，今天根据书中内容结合自己的理解说说jQuery插件的编写。
jQuery核心原理
我们通过jQuery（）函数可以得到一个jQuery对象，但是实际上，我们得到的jQuery对象并不是jQuery（）这个函数创造出来的对象，在这个函数中，原理是
jQuery(){
return new jQuery.fn.init()
}
05jQuery源码截取.jpg
在jQuery的原型对象有两个名字，jQuery.prototype == jQuery.fn。jQuery的原型对象有一个constructor属性，又指回了jQuery，jQuery的原型对象还有一个init属性，这个init属性才是真正的构造函数，jQuery原型对象上还有一些first（），last（），eq（）等函数，我们知道，每一个函数都有一个prototype指针指向原型对象，每一个原型对象都有一个constructor指针指回构造函数，构造函数创建出来的实例对象，都可以使用原型对象中封装的属性和方法。也就是说，通过jQuery.fn.init()创建出来的对象，都可以使用eq（），first（），last（）等函数，因为jQuery的原型对象上就有这些方法，那么我们直接把jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype，那么init函数创建出来的对象，就可以使用这些方法了。
总结起来就是说，jQuery的原型对象jQuery.prototypr中有一个init属性，它才是真正的构造函数，这个构造函数的原型对象又指回了jQuery的原型对象jQuery.prototypr，所以init创建出来的对象，就可以使用jQuery原型对象上的方法。因为init和jQuery的原型对象都是jQuery.prototype，所以init和jQuery创建出来的对象理解上去应该是一样的。
以下为jQuery源码截取。
06.jpg
07.jpg
关于链式语法
jQuery中比较经典的还有就是链式语法，它的实现原理是啥呢？
在每一个jQuery对象方法的末尾，都返回这个对象，那么即可实现链式语法。也就是return this、
08jQuery源码截取.jpg
那么我们模拟一下这个链式语法
<script type="text/javascript">
function Person(){
this.name = "小饭";
}
Person.prototype.study = function(){
console.log("饭饭爱学习");
return this;//链式语法的核心
}
Person.prototype.eat = function(){
console.log("饭饭爱吃饭");
return this;
}
var Luckfine = new Person();
console.log( Luckfine.study() === Luckfine );
Luckfine.study().eat()
/*
jQuery的核心原理 jQuery.fn.init.prototype == jQuery.prototype
jQuery的链式语法 return this;
*/
</script>
运行结果
09.jpg
jQuery === $
在实际使用的时候我们通常是用$来代替jQuery，那么我们是如何实现的呢？
10jQuery源码截取.jpg
所以就是说jQuery还有个名字叫$.
jQuery插件的基本要点
1、jQuery插件的文件名推荐为jQuery.[插件名].js，一面和其他JavaScript库插件混淆，例如：jQuery.color.js
2、所有对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应该附加到jQuery对象本身上
3、在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不是像一般方法那样，例如click()方法，内部this指向的是DOM元素。
4、可以通过this.each来遍历所有元素
5、所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题，为了更稳妥一些，甚至可以在插件头部先加一个分号，以免他人的不规范代码给插件带来的影响。
6、插件应该返回一个jQuery对象，以保障插件可以链式操作，除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
7、避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示，这样可以避免冲突，当然，也可以利用欧冠必报这种技巧来避免这个问题，使插件内部继续使用$作为jQuery的别名，很多插件都是这么做的
插件的形式
通过jQuery源码我们能够看到，jQuery整体就是模仿一个块级作用域，也就是整体在一个立即执行函数中书写的，这样也防止了用户自己定义的变量和jQuery定义的变量冲突。这种也是利用闭包，显然闭包不是几句话就能讲清楚的，我们就理解这是一个块级作用域就好了。
01.jpg
那么我们在封装自己的jQuery插件的时候，就可以采用这种形式，首先定义一个匿名函数function ( ) { //这里放置代码 }，将其插入到一个立即执行函数中 （function ( ) { //这里放置代码}）（）,在第二个括号中，可以将参数传递进去，以供函数内部使用。
//为了更好的兼容性，开始前可以有个分号
；( function ( $ ) { //此处将$作为匿名函数的形参
//这里放置代码，可以使用$作为jQuery的缩写别名
} )( jQuery ) //这里就将jQuery作为实参传递给匿名函数了。
jQuery插件的机制
jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn,extend( ) 和 jQuery.extend ( ) 方法、前者用于扩展对象方法的插件，后者用于封装全局函数的插件。这两种方法都接受一个参数，类型为object，object对象的“名/值对”分别代表“函数或方法名/函数主体”，具体内容会在下面讲解。
编写jQuery对象插件
1.编写设置和获取颜色的插件
该插件有两个功能
a，设置匹配元素的颜色
b，获取匹配的元素（元素集合中的第一个）的颜色
由于是对jQuery对象的方法的扩展，因此采用jQuery.fn.extend( )来编写，可以给这个方法提供一个参数value，如果调用方法的时候传递了value这个参数，那么就是这个值来设置字体颜色，否则就是获取匹配元素的字体颜色的值。
首先，我们要知道，简单的调用jQuery提供的css() 方法，直接写成this.css("color","value")即可。注意，插件内部的this指向的是jQuery对象，而非普通的DOM对象，接下来需要注意的是，插件如果不需要返回字符串之类的特定值，应当使其具有可链接性，为此，直接返回这个this对象，由于css（）方法会直接返回调用它的对象，那么我 们直接return this.css("color","value")即可。
接下来第二个功能，如果没有给方法传递参数，那么就是获取集合对象对象中第一个对象的color的值，由于css（）本身就有返回第一个匹配元素的样式值得功能，因此此处无需用eq（）来回去第一个元素，只要将这两个功能 结合起来，判断一下value是否是undefined即可。
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
;(function($){
jQuery.fn.extend({
"color":function(value){
if(value == undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
})
})(jQuery)
</script>
测试一下该插件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="a">red</div>
<div class="blue">blue</div>
<div style="color: green;">green</div>
<div style="color: yellow;">yellow</div>
<script src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
;(function($){
jQuery.fn.extend({
"color":function(value){
if(value == undefined){
return this.css("color");
}else{
return this.css("color",value);
}
}
})
})(jQuery)
</script>
<script>
$(function(){
//查看第一个div的color样式
alert($('div').color())
//返回的object证明得到的jQuery对象
alert($('div').color('red'))
//把所有的div的字体颜色都设为红色，证明插件好
$('div').color("red")
})
</script>
</body>
</html>
测试效果
GIF.gif
2、编写插件实现点击标签改变标签的背景色
$.fn.extend({
clcikChangeBg:function(){
this.on("click",function(){
$(this).css("background-color","red");
$(this).siblings().css("background-color","#fff");
})
}
})
$("div").clcikChangeBg();
插件效果
GIF.gif
3、编写插件实现单击双击
功能如下：
a，区分单击双击
b，单击改变颜色，双击时候不触发单击，只允许隐藏
jQuery.fn.extend({
myClick:function(){
var timer;
this.on("click",function(){
clearTimeout(timer);
var _this=$(this)
timer = setTimeout(function(){
_this.siblings().css("background-color","blue")
_this.css("background-color","orange")
},200)
})
.on("dblclick",function(){
clearTimeout(timer);
$(this).css("background-color","blue")
$(this).fadeOut(800);
})
}
})
$("div").myClick()
效果如下
GIF.gif
编写jQuery全局插件
这类插件是在jQuery命名空间内部添加一个函数，这类插件很简单，只是普通的函数，利用jQuery.extend( )方法直接对jQuery对象进行扩展。
1.编写插件实现过滤敏感字
$.extend({
filterWord:function(str){
var keyWords = ["台独","藏独","国民党"];
for (var i = 0; i < keyWords.length; i++) {
// str = str.replace(keyWords[i],"***");
var r = new RegExp(keyWords[i],"g"); // /台独/g
str = str.replace( r,"***")
}
return str;
}
});
console.log( $.filterWord("台独规划局规划台独藏独藏独国民党是什么") );
效果如下
02.jpg
重点
添加到$.extend( ) 上的是全局函数：添加到jQuery.fn.extend( )上的是原型对象上的函数，需要通过jQuery的对象来调用。
编写插件实现把集合转换成真正的数组
都知道如果我们jQuery选择器获取到的是一个集合，并不是一个数组，如果我们把获取的集合转换成数组，那么我们就可以直接使用数组中自带的方法操作我们的对象，岂不是很方便。
封装在全局函数中
$.extend({
makeRealArray:function($Arr){
var arr = [];
for (var i = 0; i < $Arr.length; i++) {
arr.push( $Arr[i] );
}
return arr;
}
})
var ret = $.makeRealArray( $("div") )
console.log(ret);//打印这个数组
console.log( Array.isArray(ret) );//判断对象是否是数组
效果如下
03.jpg
封装成对象方法
$.fn.extend({
toArray_My:function(){
var arr = [];
this.each(function(index,element){
arr.push(element);
})
return arr;
}
})
console.log( $("div").toArray_My() );
效果如下
04.jpg
两个方法都是将获取到的集合转换成数组，但是封装的形式不一样，所以调用的方法是不一样的，要注意区分。
自己把书看了一遍，结合自己的理解，整理成文章，真是一个耗时的过程。也建议正在看这本书的孩子把里面的例子自己敲一下，会发现里面的有些例子扩展性很强。
喜欢小饭的文章就点赞啦啦拉票啦~
