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.fn.extend(object)
?
用来扩展jQuery.fn(也就是jQuery.prototype)对象
jQuery.extend(object)
?
用来扩展jQuery对象
?
在明白了这两个方法分别是用来扩展jQuery对象和jQuery.prototyp对象后,我们就可以用原型扩展jQuery对象了。
jQuery.propertyjQuery.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文件分离成多个文件,实现“高内聚,低耦合”。
?
之后会再总结一些普遍的插件开发模式。