如何寫一個(gè)jquery 插件

jquery插件開(kāi)發(fā)模式

目前成都創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、磐石網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

jquery插件一般有三種開(kāi)發(fā)方式：

通過(guò)$.extend()來(lái)擴(kuò)展jQuery

通過(guò)$.fn 向jQuery添加新的方法

通過(guò)$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建

第一種$.extend()相對(duì)簡(jiǎn)單，一般很少能夠獨(dú)立開(kāi)發(fā)復(fù)雜插件，第三種是一種高級(jí)的開(kāi)發(fā)模式，本文也不做介紹。第二種則是一般插件開(kāi)發(fā)用到的方式，本文著重講講第二種。

插件開(kāi)發(fā)

第二種插件開(kāi)發(fā)方式一般是如下定義

$.fn.pluginName = function() {

//your code here

}

插件開(kāi)發(fā)，我們一般運(yùn)用面向?qū)ο蟮乃季S方式

例如定義一個(gè)對(duì)象

var Haorooms= function(el, opt) {

this.$element = el,

this.defaults = {

'color': 'red',

'fontSize': '12px',

'textDecoration':'none'

},

this.options = $.extend({}, this.defaults, opt)

}

//定義haorooms的方法

haorooms.prototype = {

changecss: function() {

return this.$element.css({

'color': this.options.color,

'fontSize': this.options.fontSize,

'textDecoration': this.options.textDecoration

});

}

}

$.extend({}, this.defaults, opt)有{}主要是為了創(chuàng)建一個(gè)新對(duì)象，保留對(duì)象的默認(rèn)值。

$.fn.myPlugin = function(options) {

//創(chuàng)建haorooms的實(shí)體

var haorooms= new Haorooms(this, options);

//調(diào)用其方法

return Haorooms.changecss();

}

調(diào)用這個(gè)插件直接如下就可以

$(function() {

$('a').myPlugin({

'color': '#2C9929',

'fontSize': '20px'

});

})

上述開(kāi)發(fā)方法的問(wèn)題

上面的開(kāi)發(fā)方法存在一個(gè)嚴(yán)重的問(wèn)題，就是定義了一個(gè)全局的Haorooms，這樣對(duì)于插件的兼容等等各個(gè)方面都不好。萬(wàn)一別的地方用到了Haorooms，那么你的代碼就悲催了！現(xiàn)在我們把上面的代碼包裝起來(lái)，用一個(gè)自調(diào)用匿名函數(shù)(有時(shí)又叫塊級(jí)作用域或者私有作用域)包裹，就不會(huì)出現(xiàn)這個(gè)問(wèn)題了！包括js插件的開(kāi)發(fā)，也是一樣的，我們用一個(gè)自調(diào)用匿名函數(shù)把自己寫的代碼包裹起來(lái)，就可以了！包裹方法如下：

(function(){

})()

用上面的這個(gè)包裹起來(lái)，就可以了。

但是還有一個(gè)問(wèn)題，當(dāng)我們研究大牛的代碼的時(shí)候，前面經(jīng)常看到有“；”，那是為了避免代碼合并等不必要的錯(cuò)誤。

例如，我們隨便定義一個(gè)函數(shù)：

var haoroomsblog=function(){

}

(function(){

})()

由于haoroomsblog這個(gè)函數(shù)后面沒(méi)有加分號(hào)，導(dǎo)致代碼出錯(cuò)，為了避免這類情況的發(fā)生，通常這么寫！

；(function(){

})()

把你的插件代碼包裹在上面里面，就是一個(gè)簡(jiǎn)單的插件了。（注js插件和jquery插件都是如此）

還有一個(gè)問(wèn)題

把你的插件包裹在

；(function(){

})()

基本上可以說(shuō)是完美了。但是為了讓你開(kāi)發(fā)的插件應(yīng)用更加廣泛，兼容性更加好，還要考慮到用插件的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs沖突，將jquery的前綴“$”,修改為“jQuery”，還有些朋友將默認(rèn)的document等方法修改。為了讓你的插件在這些東西修了了的情況下照常運(yùn)行，那么我們的做法是，把代碼包裹在如下里面：

;(function($,window,document,undefined){

//我們的代碼。。

})(jQuery,window,document);

就可以避免上面的一些情況了！

至此，你開(kāi)發(fā)的插件就算完美了！

怎樣編寫一個(gè)jQuery插件

為了方便用戶創(chuàng)建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1.?jQuery.extend()?方法有一個(gè)重載。

　?jQuery.extend(object)?,一個(gè)參數(shù)的用于擴(kuò)展jQuery類本身，也就是用來(lái)在jQuery類/命名空間上增加新函數(shù)，或者叫靜態(tài)方法，例如jQuery內(nèi)置的?ajax方法都是用jQuery.ajax()這樣調(diào)用的，有點(diǎn)像?“類名.方法名”?靜態(tài)方法的調(diào)用方式。下面我們也來(lái)寫個(gè)jQuery.extend(object)的例子：

//擴(kuò)展jQuery對(duì)象本身

jQuery.extend(｛

"minValue":?function?(a,?b)?｛

///《summary

///?比較兩個(gè)值，返回最小值

///《/summary

return?a?《?b???a?:?b;

},

"maxValue":?function?(a,?b)?｛

///《summary

///?比較兩個(gè)值，返回最大值

///《/summary

return?a??b???a?:?b;

}

});

//調(diào)用

var?i?=?100;?j?=?101;

var?min_v?=?$.minValue(i,?j);?//?min_v?等于?100

var?max_v?=?$.maxValue(i,?j);?//?max_v?等于?101

重載版本：jQuery.extend([deep],?target,?object1,?[objectN])

用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象。

如果不指定target，則給jQuery命名空間本身進(jìn)行擴(kuò)展。這有助于插件作者為jQuery增加新方法。

如果第一個(gè)參數(shù)設(shè)置為true，則jQuery返回一個(gè)深層次的副本，遞歸地復(fù)制找到的任何對(duì)象。否則的話，副本會(huì)與原對(duì)象共享結(jié)構(gòu)。

未定義的屬性將不會(huì)被復(fù)制，然而從對(duì)象的原型繼承的屬性將會(huì)被復(fù)制。

參數(shù)

deep:???????可選。如果設(shè)為true，則遞歸合并。

target:?????待修改對(duì)象。

object1:???待合并到第一個(gè)對(duì)象的對(duì)象。

objectN:???可選。待合并到第一個(gè)對(duì)象的對(duì)象。

示例1：

合并?settings?和?options，修改并返回?settings。

var?settings?=?｛?validate:?false,?limit:?5,?name:?"foo"?};

var?options?=?｛?validate:?true,?name:?"bar"?};

jQuery.extend(settings,?options);

結(jié)果：

settings?==?｛?validate:?true,?limit:?5,?name:?"bar"?}

示例2：

合并?defaults?和?options,?不修改?defaults。

var?empty?=?｛};

var?defaults?=?｛?validate:?false,?limit:?5,?name:?"foo"?};

var?options?=?｛?validate:?true,?name:?"bar"?};

var?settings?=?jQuery.extend(empty,?defaults,?options);

結(jié)果：

settings?==?｛?validate:?true,?limit:?5,?name:?"bar"?}

empty?==?｛?validate:?true,?limit:?5,?name:?"bar"?}

這個(gè)重載的方法，我們一般用來(lái)在編寫插件時(shí)用自定義插件參數(shù)去覆蓋插件的默認(rèn)參數(shù)。

jQuery.fn.extend(object)擴(kuò)展?jQuery?元素集來(lái)提供新的方法（通常用來(lái)制作插件）。

首先我們來(lái)看fn?是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。

jQuery.fn?=?jQuery.prototype?=?｛

　init:?function(?selector,?context?)?｛.....};

};

原來(lái)?jQuery.fn?=?jQuery.prototype，也就是jQuery對(duì)象的原型。那jQuery.fn.extend()方法就是擴(kuò)展jQuery對(duì)象的原型方法。我?們知道擴(kuò)展原型上的方法，就相當(dāng)于為對(duì)象添加”成員方法“，類的”成員方法“要類的對(duì)象才能調(diào)用，所以使用?jQuery.fn.extend(object)擴(kuò)展的方法，?jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。jQuery.fn.extend(object)和jQuery.extend(object)方法一?定要區(qū)分開(kāi)來(lái)。

如何寫一個(gè)簡(jiǎn)單的jquery插件

：jquery插件開(kāi)發(fā)模式 jquery插件一般有三種開(kāi)發(fā)方式： 通過(guò)$.extend()來(lái)擴(kuò)展jQuery 通過(guò)$.fn 向jQuery添加新的方法 通過(guò)$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建 第一種$.extend()相對(duì)簡(jiǎn)單，一般很少能夠獨(dú)立開(kāi)發(fā)復(fù)雜插件

如何編寫JQuery 插件詳解

jQuery 如何寫插件 -

jQuery插件的開(kāi)發(fā)包括兩種：

一種是類級(jí)別的插件開(kāi)發(fā)，即給jQuery添加新的全局函數(shù)，相當(dāng)于給jQuery類本身添加方法。jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)，另一種是對(duì)象級(jí)別的插件開(kāi)發(fā)，即給jQuery對(duì)象添加方法。下面就兩種函數(shù)的開(kāi)發(fā)做詳細(xì)的說(shuō)明。

1、類級(jí)別的插件開(kāi)發(fā)

類級(jí)別的插件開(kāi)發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開(kāi)發(fā)可以采用如下幾種形式進(jìn)行擴(kuò)展：

1.1?

添加一個(gè)新的全局函數(shù)

添加一個(gè)全局函數(shù)，我們只需如下定義：

jQuery.foo =?

function() {?

alert('This is a test. This is only a?

test.');?

};?

1.2?

增加多個(gè)全局函數(shù)

添加多個(gè)全局函數(shù)，可采用如下定義：

Java代碼 收藏代碼

jQuery.foo = function() {?

alert('This is a test. This is?

only a test.');?

};?

jQuery.bar =?

function(param) {?

alert('This function takes a?

parameter, which is "' + param + '".');?

};?

調(diào)用時(shí)和一個(gè)函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3?

使用jQuery.extend(object);　

jQuery.extend({?

foo:?

function() {?

alert('This is a test. This is?

only a test.');?

},?

bar: function(param)?

{?

alert('This function takes a?

parameter, which is "' + param +'".');?

}?

});

新聞標(biāo)題：jquery插件怎么寫,jquery的插件
當(dāng)前鏈接：http://chinadenli.net/article36/dseiipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、Google、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)