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

jquery插件開發(fā)模式

創(chuàng)新互聯(lián)建站于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元原州做網(wǎng)站,已為上家服務(wù),為原州各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

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

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

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

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

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

插件開發(fā)

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

$.fn.pluginName = function() {

//your code here

}

插件開發(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'

});

})

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

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

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

//我們的代碼。。

})(jQuery,window,document);

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

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

jquery 插件開發(fā)，屬性，事件，方法寫法？

我自己寫過(guò)許多插件，應(yīng)該可以解答你的問(wèn)題。

其實(shí)，所謂的方法，屬性，事件，都是你自己總結(jié)出來(lái)的。對(duì)于純正的JS和JQuary來(lái)說(shuō)，這3個(gè)都是一種東西。我們常常用了簡(jiǎn)便寫法，因此樓主才覺(jué)得這3者不同，其實(shí)這些統(tǒng)統(tǒng)都是變量。

只不過(guò)，如果變量是個(gè)參數(shù)，就是：

var temp = "怪蛋";

如果參數(shù)是個(gè)數(shù)組，那么就是：

var temp = {title:'newTab'};

而我們常見(jiàn)的函數(shù)，都會(huì)寫成getVal(a,b,c){}其實(shí)寫的更符合JS原生態(tài)的，是

var getVal = function(a,b,c){} 從這里看出，我們所謂的函數(shù)，其實(shí)和變量是一種東西。

因此所謂的$('#id').Tabs({onSelect:functuon(){}});這類情況，等于傳入的是一個(gè)叫onSelect的變量，而這個(gè)變量剛好是一個(gè)函數(shù)類型而已。事實(shí)上這個(gè)onSelect原本并不存在，是你后來(lái)的插件里去調(diào)用了而已。你通過(guò)英文意思覺(jué)得這是“被選中”的意思，其實(shí)在這里，僅僅是一個(gè)名字而已。只有插件內(nèi)部寫到$(this).on("click",function(){});才真正調(diào)取到JS原本的event的click事件。而我們插件中常見(jiàn)的onSelect、onClick、onSuccess都是寫插件的人按照自己的喜好和大家喜歡的名字而命名的。

jQuery插件開發(fā)原理？

jQuery為開發(fā)插件提拱了兩個(gè)方法，分別是：

jQuery.fn.extend(object); 給jQuery對(duì)象添加方法。

jQuery.extend(object); 為擴(kuò)展jQuery類本身.為類添加新的方法。

fn 是什么東西呢。查看jQuery代碼，就不難發(fā)現(xiàn)。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//....　

//......

};

原來(lái) jQuery.fn = jQuery.prototype.對(duì)prototype肯定不會(huì)陌生啦。雖然 javascript　沒(méi)有明確的類的概念，但是用類來(lái)理解它，會(huì)更方便。jQuery便是一個(gè)封裝得非常好的類，比如我們用 語(yǔ)句　$("#btn1") 會(huì)生成一個(gè) jQuery類的實(shí)例。

jQuery.fn.extend(object); 對(duì)jQuery.prototype進(jìn)得擴(kuò)展，就是為jQuery類添加“成員函數(shù)”。jQuery類的實(shí)例可以使用這個(gè)“成員函數(shù)”。

比如我們要開發(fā)一個(gè)插件，做一個(gè)特殊的編輯框，當(dāng)它被點(diǎn)擊時(shí)，便alert 當(dāng)前編輯框里的內(nèi)容。可以這么做：

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());

});

}

});

$("#input1").alertWhileClick(); //頁(yè)面上為：input id="input1" type="text"/

$("#input1")　為一個(gè)jQuery實(shí)例，當(dāng)它調(diào)用成員方法 alertWhileClick后，便實(shí)現(xiàn)了擴(kuò)展，每次被點(diǎn)擊時(shí)它會(huì)先彈出目前編輯里的內(nèi)容。

jQuery.extend(object);　

為jQuery類添加添加類方法，可以理解為添加靜態(tài)方法。如：

$.extend({

add:function(a,b){return a+b;}

});

便為　jQuery　添加一個(gè)為 add　的　“靜態(tài)方法”，之后便可以在引入 jQuery　的地方，使用這個(gè)方法了，$.add(3,4); //return 7

如何編寫JQuery 插件詳解

jQuery 如何寫插件 -

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

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

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

類級(jí)別的插件開發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個(gè)函數(shù)，將函數(shù)定義于jQuery的命名空間中。關(guān)于類級(jí)別的插件開發(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 +'".');?

}?

});

jquery插件開發(fā)有幾種

//類級(jí)別插件開發(fā)，主要是在jQuery中定義全局方法：

//第一種寫法

jQuery.myFunc = function(str){

alert("直接在jquery中定義方法",str)

}

//調(diào)用方式 $.myFunc("hello!");

//第二種寫法

jQuery.extend({

myFunc:function(str){

alert("extend擴(kuò)展$的方法",str)

}

})

//調(diào)用方式 $.myFunc("hello!");

//第三種寫法： 為了不污染全局，掛載一個(gè)對(duì)象作為命名空間，自定義的所有方法放在這里，保證jQuery全局安全。

jQuery.define={

myFunc:function(str){

alert("命名空間的寫法",str)

}

}

//調(diào)用方式：$.define.myFunc("hello");

//以上三種是級(jí)別插件開發(fā)方式，不常用，從調(diào)用方式看出，他們是全局執(zhí)行的，不需要綁定節(jié)點(diǎn)對(duì)象。

//對(duì)象級(jí)別插件開發(fā)：有規(guī)范模板

;(function($){

$.fn.plugin = function(options){

var defaults = {

//各種默認(rèn)參數(shù)

}

var options = $.extend(defaults,options); //傳入的參數(shù)覆蓋默認(rèn)參數(shù)

this.each(function(){

var _this = $(this); //緩存一下插件傳進(jìn)來(lái)的節(jié)點(diǎn)對(duì)象。

//執(zhí)行內(nèi)容

})

return $(this); //把節(jié)點(diǎn)對(duì)象返回去，為了支持鏈?zhǔn)秸{(diào)用。

}

})(jQuery);

//調(diào)用方式

$("selector").plugin({

//自定義參數(shù)，json格式

})

如何自己開發(fā)一個(gè)簡(jiǎn)單的jquery 插件

現(xiàn)在網(wǎng)上關(guān)于js和jquery封裝的插件很多，我剛剛接觸前端的時(shí)候，就很敬佩那些自己寫插件的大牛們！因?yàn)槭撬麄兘o網(wǎng)站開發(fā)更多的便利，很多網(wǎng)頁(yè)效果，網(wǎng)上很多現(xiàn)成的插件！那么這些插件是如何寫的呢看首先是有扎實(shí)的js和jquery技術(shù)基礎(chǔ)，其次還有一些寫插件的方法和技巧。關(guān)于js和jquery的技術(shù)基礎(chǔ)，那是一個(gè)慢慢積累的過(guò)程。但是關(guān)于寫插件的一些注意和技巧，本文可以略微介紹一下，方便以后寫插件的時(shí)候用得到。

jquery插件開發(fā)模式

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

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

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

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

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

文章題目：jquery插件的開發(fā),jquery組件開發(fā)
地址分享：http://jinyejixie.com/article36/dssdgpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、軟件開發(fā)、網(wǎng)站維護(hù)、ChatGPT、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(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)