jQuery插件开发

1、 jQuery插件的基础原理源自JavaScript的自定函数的概念。

1. JavaScript给对象添加自定义函数有几种方式：

1）先建立对象直接给对象添加方法属性：

var obj = new MyObject();
obj.myFunction = function(){};

2) 在构造函数中直接经过this添加方法属性：

MyObject(){
this.myFunction = function(){};
}

咱们知道this指向当前的对象，因此其实this. 相似于obj. 第一种方法。只不过是在构造函数就提早准备好了，当用构造函数来new一个对象的时候，这个对象随着this的指向，它就具有了myfunction的方法。而第1)种方法是先建立了对象以后才给它自定义一个方法。

3）在原型上添加自定义方法：

咱们知道每个对象都有与之对应的原型，而且可以继承引用原型中的属性和方法，这样一来咱们在原型上添加一个方法。全部继承该原型的对象均可以引用该自定义方法，包括当前对象。

当前对象的原型是它的类（构造函数()名）.prototype的值。这是在定义这个类的时候所定义的原型。如：obj 的类是MyObject。因此他的原型为：MyObject.prototype因此给当前对象添加自定义方法可以下

MyObject.prototype.myFunction=function(){};

4）那如今就能够在obj对象上直接引用myFunction

obj.myFunction();

2. jQuery给对象添加自定义方法（插件）的方法

首先，1. JQ类库定义了一个全局函数：jQuery()，该函数的返回值是一个DOM对象;jQuery()是一个工厂函数，不是构造函数（这也解释了为何它的原型不是jQuery.prototype而是jQuery.fn，从名称上第一个字母不是大写也能看出来了）看下jQuery的源码便知道真相：

jQuery.fn = jQuery.prototype = {

 

。jQuery.fn是全部jQuery对象的原型对象。全部实例化的jQuery对象都是这个jQuery类，并继承自jQuery.fn（它的值）。因此咱们能够模仿JavaScript原生的添加方法之一是在原型上添加自定义方法。

jQuery.fn.myFunction = function(){};//建立插件
$('#btn').myFunction();//引用插件

3. 为何一般你们开发插件的时候，会使用匿名函数而且自调用。

1） 自调用();：是由于在引入当前插件的时候，我这个插件就能直接初始化了：在你使用以前提早帮你把自定义方法（插件）插在jQuery.fn原型对象上，因此当你引入该插件js的时候，无需关心准备工做(先实例化运行)，直接在对象上.运算符引用便可。

2）匿名函数：的使用其实（你就当是一个普通函数便可）是为了保护全局的命名空间，你的插件方法里确定定义了不少的变量，你这些变量若是暴露在全局变量里，可能会污染其余同名的全局变量，那这样一来你这个插件就是"有毒"的。因此把你的插件方法函数内容定义在一个函数(做用域)里，就能避免这个问题。若是须要jQuery对象来定义，直接把全局jQuery对象当参数同样传入这个的函数便可。实参务必是"jQuery"字符不是"$"！

4. .extend（）方法的使用

将一个对象的的属性和方法扩展到jQuery对象上

var person = {  
    sex      : 'male',  
    showName : function(name){  
            alert("Name: " + name);  
    }  
};  
jQuery.extend(person); // 将person对象扩展到jQuery（$）对象上  
jQuery.showName("admin"); // Name: admin  
$.showName("admin"); // Name: amdin  
alert("Sex: " + $.sex); // Sex: male