99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

編寫jQuery插件有哪些技巧？

發(fā)布時(shí)間：2017-06-27 19:57  回復(fù):0  查看:2141   最后回復(fù)：2017-06-27 19:57  
本文和大家分享的主要是jQuery 插件的編寫技巧，一起來看看吧，希望對大家 學(xué)習(xí)jquery有所幫助。
　　 1. 把你的代碼全部放在 閉包 里面
　　這是我用的最多的一條。但是有時(shí)候在閉包外面的方法會不能調(diào)用。
　　不過你的插件的代碼只為你自己的插件服務(wù)，所以不存在這個問題，你可以把所有的代碼都放在閉包里面。
　　而方法可能應(yīng)該放在Prototype 方法內(nèi)部。
　　( function($)  {
　　//code here
　　})( jQuery);
　　 2. 提供插件的默認(rèn)選項(xiàng)
你的插件應(yīng)該會有一些選項(xiàng)是可以讓開發(fā)者設(shè)置的，所以提供恢復(fù)默認(rèn)選項(xiàng)是以有必要的。  你可以通過jQuery 的 extend 功能來設(shè)置這些選項(xiàng)：
　　var defaultSettings = {      mode            : 'Pencil',
　　lineWidthMin    : '0',
　　lineWidthMax    : '10',
　　lineWidth       : '2' };
　　settings = $.extend({}, defaultSettings, settings || {});
　　 3. 使用返回一個元素
　　JavaScript/jQuery 有一個很好的特點(diǎn)就是可以進(jìn)行方法級聯(lián)，所以我們不應(yīng)該破壞這個特性，始終在方法中返回一個元素。我在我的每一個 jQuery 插件中都遵守這一條。
$.fn.wPaint =  function(settings)  {
return  this.each( function()  {
var elem = $( this);
//run some code here
　　}
　　}
　　 4. 一次性代碼放在主循環(huán)以外
　　這一條很重要，但是常常被忽略。簡單的講，如果你有一段代碼是一堆默認(rèn)值，只需要被實(shí)例化一次，而不是每次調(diào)用你插件功能的時(shí)候都實(shí)例化，你應(yīng)該把這段代碼放在插件方法的外面。這樣可以讓你的插件運(yùn)行的更高效，節(jié)省內(nèi)存。
你可以注意到，上面代碼中的“defaultSettings” 是完全在插件方法外面的，由于這些代碼是在閉包里面，我們不用擔(dān)心這些變量被重寫。
　　var defaultSettings = {
　　mode            : 'Pencil',
　　lineWidthMin    : '0',
　　lineWidthMax    : '10',
　　lineWidth       : '2' };
　　settings = $.extend({}, defaultSettings, settings || {});
　　$.fn.wPaint = function(settings)  {
　　return this.each(function()  {
　　var elem = $(this);
　　//run some code here
　　}
　　}
　　 5. 為什么要設(shè)置 Class Prototyping
　　作為你代碼的血與肉，方法和函數(shù)應(yīng)該放在prototype 函數(shù)內(nèi)。有兩個原因：
　　·  它可以節(jié)省很多內(nèi)存，因?yàn)榭梢圆挥弥貜?fù)創(chuàng)建這些方法。
　　·  引用一個現(xiàn)成的方法比重新創(chuàng)建一個好快很多。
　　簡單的說，prototype 就是擴(kuò)展了一個對象，為它提供方法，而不用在每一個對象中實(shí)例化這些方法。這也讓你的代碼更有條理和高效。一旦你習(xí)慣這種開發(fā)方式，你會發(fā)現(xiàn)它在你將來的項(xiàng)目中為你節(jié)省了很多時(shí)間。
　　 6. 如何設(shè)置 Class Prototyping
　　設(shè)置一個 prototype  方法有兩個部分。首先我們需要創(chuàng)建我們最初的類定義，在多數(shù)情況下這就意味著創(chuàng)建一個對象。這個定義包含了每一個對象實(shí)例都不同的部分。在我的 Paint jQuery Plugin  插件中，我是這么寫的：
function Canvas(settings)  {
this.settings = settings;
this.draw = false;
this.canvas = null;
this.ctx = null;
return  this;  
}
　　下面來添加全局的方法：
Canvas.prototype =  {
generate:  function() {
//generate code
　　}
　　}
　　這里的關(guān)鍵是要讓prototype 的方法是通用的，但是數(shù)據(jù)是每個實(shí)例自己的，可以用 “this” 引用。
　　 7. 使用 “this” 對象
通過使用“$this” ，我們可以向別的閉包傳遞正確的引用。我們也可能需要向別的方法傳入  $this  引用。需要注意的是，  $this  這個名字是可以改的，任意的變量名都可以。
　　Canvas.prototype =  {
　　generate: function()   {
　　//some code
　　var $this = this;
　　var buton = //...some code
　　button.click(function(){
　　//using this will not be found since it has it's own this
　　//use $this instead.
　　$this.someFunc($this);
　　});
　　},
　　someFunc: function($this)      {
　　//won't know what "this" is.
　　//use $this instead passed from the click event
　　}
　　}
　　 8. 在每一個對象中保存設(shè)置
　　我一直在每一個對象中保存自己的設(shè)置，然后操作它自己的設(shè)置。這樣你就不用在不同的方法中傳遞很多參數(shù)。把這些變量放在對象中，也方便你在其他地方調(diào)用這些變量。
function Canvas(settings)  {
this.settings = settings;
return  this;
　　}
　　 9. 分離你的Prototype方法邏輯
　　這可能是一個基本的原則。當(dāng)你在猶豫是否需要提供一個方法的時(shí)候，你可以問你自己 “ 如果其他人要重寫這個方法的話，你的代碼是否能滿足他的需求 ?” 或者 “ 別人來寫這個方法有多困難 ?” 。當(dāng)然這是一個靈活性拿捏的問題。這里列出了我的 Color Picker jQuery Plugin  的方法，你可以參考一下：
generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()
　　 10. 提供 Setter/Getter 選項(xiàng)
　　這一條不是必須的，但是我發(fā)現(xiàn)我所有的插件都包用到了這一條。因?yàn)樗恍枰稽c(diǎn)點(diǎn)代碼，就能為別人提供一個他可能需要的功能。
　　基本上，我們只要讓開發(fā)者能夠設(shè)置或者獲取元素已經(jīng)存在的值：
　　 var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");
　　總結(jié)：以上十條基 本上覆蓋了 jQuery 插件開發(fā)  的核心，并且可以作為開發(fā)的模板。有一套基本的代碼可以極大的縮短你的開發(fā)時(shí) 間，并且能夠讓你設(shè)計(jì)插件架構(gòu)的時(shí)候更自信。
來源： 極客頭條
您還未登錄，請先登錄

熱門帖子

最新帖子

?