如何用正確的姿勢編寫jQuery外掛程式

2022-01-11 23:53:15 字數 1583 閱讀 5983

這2位大神基礎講的很清楚,在這裡就不多說了,主要那個小需求來練練:

需求說明乙個標題外掛程式,可以通過後端取數,自定義標題,自定義樣式

討論:外掛程式通常不都是載入一下就不操作了,比如**外掛程式,載入資料,重新整理等等。

今天練習的控制項就簡單給大家理理寫控制項的思路,(有問題,有意見大家指出。)

; (function

($)

function

cytitle(options)

cytitle.prototype =

}})(jquery)

每個外掛程式都應該包含以上部分,這個就不多說了(上面2為大神的文章說的很清楚),從實際編寫出發。 (demo)

點選載入控制項列出標題(未定義標題),點選重新整理更改標題(ajax取數)。

下面一步步看**:

(本來請求txt的結果發現不能上傳和請求,放著runjs上也只能是js檔案了。。。)

上面是載入控制項和重新整理的呼叫;

首先點選載入按鈕可以看到是呼叫了外掛程式cytitle,並且指定背景色。先不看重新整理,來看看外掛程式到底怎麼寫的!

$.fn.cytitle = function

(options) ;

var domel = this.get(0); //

獲得繫結元素的dom物件

if (!domel) throw "未找到繫結元素!";

if (domel["cytitle"])

options.el = domel; //

這裡在構建外掛程式的時候直接用this.el就能訪問元素的dom物件

return

newcytitle(options);

}

function

cytitle(options)

cytitle.prototype =,

load:

function

() ,

ref:

function

() ;

this.doevt("ondatabind", e); //

這裡呼叫前面定義的取數方法的內容(url, params)

//依次類推我們可以寫繫結前(在繫結方法前面呼叫),繫結後(執行非同步後呼叫) 等等

if(e.url)

},'html');}},

doevt:

function

(name, p)

return

this

; },

bgcss:

function

() };

以上就是整個外掛程式的內容,

優點:在用乙個元素上繫結n次都不會出現錯誤。

可以自定義取數,從新載入資料。

可以在原型上擴張,自己需要的功能。

用乙個demo練習編寫外掛程式,才知道其中的樂趣,先說到這裡。謝謝

實在忙,最近搞了個girhub.io部落格寫了個滾動條外掛程式。有興趣的可以看看內涵demo

RESTful的正確姿勢

很多人都有這樣的疑問 rest 英文 representational state transfer,簡稱rest 描述了乙個架構樣式的網路系統,比如 web 應用程式。它首次出現在 2000 年 roy fielding 的博士 中,roy fielding是 http 規範的主要編寫者之一。在目...

正確姿勢的verticle align

1.先看後面一句 在表單元格中,這個屬性會設定單元格框中的單元格內容的對齊方式。這很容易理解,如果給乙個 的td加乙個vertical align middle的樣式,裡面的內容會垂直居中,同樣的如果給乙個vertical align bottom就會底部對齊,如果給乙個vertical align...

正確上網的姿勢

1.購買國外伺服器,目前使用的是vultr,乙個月5刀。支援支付寶充值,最低10美元起。vultr相關鏈結 2.使用xshell連線伺服器 官方鏈結。安裝完成後新建會話 alt n 依次填寫圖中資訊。名稱可以是vultr或者其他,協議選擇ssh,主機填寫之前的ip address,埠號選擇22。連線...