jQuery插件开发(1)
在说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文件分离成多个文件,实现“高内聚,低耦合”。
之后会再总结一些普遍的插件开发模式。