jQuery插件开发(一)

在说jQuery插件开发前需要说一下几个JavaScript基础的东西，理解它们有助于理解插件开发原理。

 

 对象动态扩展

 

JavaScript是一门动态语言，所以可以通过赋值语句来更新一个对象的属性，如果这个对象没有这个属性，就会把这个属性扩展到这个对象上。

var  cup={
     height:30;
};
cup.height=40; //更新
cup.width=10; //扩展

 

 

即时执行函数

 

顾名思义就是声明一个函数后立即执行，这是一个把全局变量变成局部变量(立即执行函数作用域内变量)不相互影响的好方法，所模块化编程都会用到它，jQuery插件也最好用它，以达到不同插件之间变量不会相互影响。

有三种实现方法：

1．函数字面量：首先声明一个函数对象，然后执行它。

(function(){
  alert(1);
} ) ( );

2．优先表达式：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。

( function(){
  alert(2);
} ( ) );

 3．Void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。

void function(){
  alert(3);
}()

 

 JavaScript继承原理

 

在介绍插件原理之前，我们先来了解一下JavaScript的继承原理。在JavaScript中除了基本类型外其它都是对象，包括函数，所以函数可以有自己的属性和方法。每一个JavaScript函数都有一个prototype属性对象。它用来保存构造函数生成的对象共有的属性和方法。

下面是一个简化的与jQuery对象生成相关的代码。

 

var jQuery=function(){
return new jQuery()
 }
jQuery.fn=jQuery.prototype={
   constractor:jQuery
     //....
}

 

如果我们在jQuery对象上动态添加属性和方法，就可以通过$.property方式来调用。

如果我们用在jQuery.fn对象上动态添加属性和方法，由于jQuery.fn==jQuery.prototype，所以需要生成jQuery对象才能调用这些属性和方法，通过$().property方式来调用。

 

JQuery插件开发方法

 

下面来说一下jQuery插件用到的两个方法

jQuery.fn.extend(object)

 

用来扩展jQuery.fn(也就是jQuery.prototype)对象

jQuery.extend(object)

 

用来扩展jQuery对象

 

在明白了这两个方法分别是用来扩展jQuery对象和jQuery.prototyp对象后，我们就可以用原型扩展jQuery对象了。

jQuery.property
jQuery.fn.property
或是
jQuery.prototype.property

 

下面是一段简单的插件代码：

(function($){
 
  $.fn.alert=function(id){
    alert(this.val());
  };
 
})(jQuery);

 

 

jQuery提供的extend是一个拷贝方法，

jQuery.extend([deep], target, object1, [objectN])

 

deep用来决定是深拷贝还是浅拷贝。

target待修改对象。

target之后的对象的属性和方法将合并到target对象上。

 

jQuery内部的新添加的功能都是通过这个方法附加在jQuery对象上的。用来分离代码，比如ajax一类的方法用一个extend加到jQuery对象上，这样做的好处是可以轻易的把一个jQuery文件分离成多个文件，实现“高内聚，低耦合”。

 

之后会再总结一些普遍的插件开发模式。