首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery插件开发(1)

2013-03-25 
jQuery插件开发(一)在说jQuery插件开发前需要说一下几个JavaScript基础的东西,理解它们有助于理解插件开发

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.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文件分离成多个文件,实现“高内聚,低耦合”。

?

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

热点排行