|
|
在編寫本文中的插件時(shí)，我發(fā)現(xiàn)插件的創(chuàng)建過程以及用來創(chuàng)建它的框架非常簡單明了。困難的地方在于想一些其他人還沒有做過的事情，并編寫一些能真正完成某些操作的 JavaScript 代碼。由于插件結(jié)構(gòu)簡單明了，對于新手它簡單易學(xué)，對于高手它很靈活，因此插件的數(shù)量急速上升。
當(dāng)然，在研究本文所涉及的內(nèi)容時(shí)，我還發(fā)現(xiàn)每個(gè)作者編寫插件的風(fēng)格都不同，jQuery 允許好幾種不同的插件編寫風(fēng)格。在本文中，我集中介紹最簡單的一種風(fēng)格，以及 jQuery 本身推薦的一種風(fēng)格，插件彈出后您就會(huì)看到差別或不同的選項(xiàng)。
描述插件
創(chuàng)建插件的第 1 步當(dāng)然是想一個(gè)好點(diǎn)子。像大部分點(diǎn)子一樣，其他人總會(huì)給您創(chuàng)造機(jī)會(huì)。以我在本文中開發(fā)的插件為例，它不是什么新穎的概念，但在我撰寫文本的時(shí)候，jQuery 插件社區(qū)還找不到該插件。我知道我個(gè)人會(huì)從該插件中受益良多。
我的插件是一個(gè) NumberFormatter 插件。處理服務(wù)器端代碼（比如 Java™ 或 php）和國際化的用戶應(yīng)該很熟悉數(shù)字格式化。眾所周知，并非每個(gè)人都用相同的方式格式化數(shù)字。例如，并非每個(gè)人都使用 “里” 來度量距離。在美國，數(shù)字的寫法可能是 “1,250,500.75”（這個(gè)數(shù)字是從我的稅收表上抄來的），但在其他國家的寫法可能完全不同：德國是 “1.250.500,75”，法國是 “1 250 500,75”，瑞士是 “1'250'500.75”，日本是 “125,0500.75”。數(shù)字完全相同，但是在向 web 應(yīng)用程序用戶展示時(shí)使用不同的格式。
因此，問題歸結(jié)到，當(dāng)編寫一個(gè)國際化應(yīng)用程序時(shí)，如何向不同國家的人展示這些數(shù)字？當(dāng)然，解決方案是使用服務(wù)器端格式化，這種解決辦法非常常見。Java 有一個(gè)健壯的格式化庫，使數(shù)字的格式化變得非常簡單。當(dāng)使用數(shù)字在服務(wù)器上設(shè)置頁面時(shí)，服務(wù)器負(fù)責(zé)處理這些數(shù)字。但是，很多時(shí)候數(shù)字可能不在服務(wù)器上，因此您需要一種方法在客戶機(jī)上格式化數(shù)字，而不需要與服務(wù)器會(huì)話。
我在這里描述的典型用例如下。您的 web 應(yīng)用程序中有一個(gè)輸入字段，要求用戶輸入他們的薪水。在美國，用戶可能以各種格式輸入 “$65000”、“65,000”、“65000” 和 “65,000.00”。所有這些數(shù)字都是相同的，但是您需要控制這些數(shù)字在屏幕上的顯示方式，這樣才能提供更好的用戶體驗(yàn)。您可以在輸入數(shù)字之后調(diào)用服務(wù)器，但是如果有許多使用不同格式的數(shù)字字段就太麻煩了。此外，如果您可以在客戶端處理該問題，并向用戶提供即時(shí)反饋，那么就不需要這樣做了。
因此，我建立了一個(gè)空缺，之后我將嘗試使用 JavaScript/jQuery 功能填補(bǔ)這一空缺。我的插件將在客戶機(jī)上提供數(shù)字格式化，為其他人提供一種國際化 web 應(yīng)用程序的方式，且無需與服務(wù)器會(huì)話。作為額外的功能，我的插件還可以提供反向操作；該插件使開發(fā)人員能夠解析數(shù)字，從格式化的文本字符串中獲取數(shù)字。這還可以應(yīng)用于客戶機(jī)上的數(shù)字操作。此外，我將模擬 JavaDecimalFormatter類中的功能，以維護(hù)執(zhí)行數(shù)字格式化的客戶端代碼和標(biāo)準(zhǔn)服務(wù)器端方法之間的通用性。
第 1 步結(jié)果：我發(fā)現(xiàn)了一個(gè)插件需求，然后定義了對于該需求我可以填補(bǔ)的空缺。
插件規(guī)則
jQuery 團(tuán)隊(duì)建立了許多希望插件作者都能遵守的通用規(guī)則，為插件用戶創(chuàng)建一個(gè)通用而可信的環(huán)境。考慮到 jQuery 團(tuán)隊(duì)比我聰明多了，我沒有理由違背這些規(guī)則，對不對？出于該原因，我在此列出這些規(guī)則，并且在插件的每一步都盡量遵守這些規(guī)則。
- 文件命名為 “
jquery.<your plug-in name>.js”
這是有道理的，因?yàn)槟Ｍ脩舨榭次募r(shí)立即知道這是一個(gè) jQuery 插件以及這是哪個(gè)插件。檢查完畢。我的插件將命名為 “
jquery.numberformatter.js”。 - 所有新方法都附加到 jQuery.fn 對象，所有新功能都附加到 jQuery 對象
現(xiàn)階段這可能有點(diǎn)難以理解，在下一節(jié)我將討論更多內(nèi)容，因?yàn)檫@是實(shí)際編碼過程中最重要的規(guī)則。檢查完畢。我的方法/函數(shù)將僅附加到這兩個(gè)對象。
- “
this” 用于引用 jQuery 對象
這有利于插件作者的編寫，它讓所有插件作者在引用 “this” 時(shí)都知道將從 jQuery 收到哪個(gè)對象。檢查完畢。我將僅使用 “
this” 引用 jQuery 對象。 - 插件中定義的所有方法/函數(shù)的末尾都必須帶有一個(gè) “;”（分號），否則將不利于代碼的最小化。
因?yàn)檫@是最小化 JavaScript 文件的最佳實(shí)踐，大于最小值會(huì)很糟糕，您的插件有可能很快就被拋棄。檢查完畢。所有的方法/函數(shù)都將以 “;” 結(jié)尾。
- 除有特別注明外，所有方法都必須返回 jQuery 對象
jQuery 方法的順序鏈 (daisy-chaining) 非常著名，如果您編寫打破鏈條的插件，它就一定會(huì) “打破鏈條”。檢查完畢。我的
format()方法將返回 jQuery 對象，雖然我的parse()方法沒有返回 jQuery 對象，但我在很多地方都注明該函數(shù)打破了鏈條。（畢竟，它不可能返回一個(gè) Number 對象而不打破鏈條）。 - 您應(yīng)該總是使用
this.each()迭代匹配的元素，這是一種可靠而有效地迭代對象的方式。
出于性能和穩(wěn)定性考慮，他們推薦所有的方法都使用它迭代匹配的元素。檢查完畢。我的方法都將只使用該方法迭代匹配的元素。
- 總是在插件代碼中使用 “jQuery” 而不是 “$”
這很重要，它使與 “$” 有沖突的用戶（那些使用另一個(gè) JavaScript 庫的用戶）能夠使用 “var JQ = jQuery.noConflict();” 函數(shù)更改他們的 jQuery 別名（pseudonym）。但是，在我查看許多插件時(shí)，我發(fā)現(xiàn)該規(guī)則常常得不到遵守，這太不幸了。如果開發(fā)人員需要更改 jQuery 別名，那么很可能意味著該插件要被棄用了。檢查完畢。在我的插件中，我將僅使用 jQuery 而不是它的別名 “$”。
好了，這些就是在插件代碼中必須遵守的規(guī)則和建議。真正的問題在于，它們實(shí)際上是強(qiáng)制性的，因?yàn)槿绻蛔袷剡@些插件規(guī)則，那么您的插件就得不到廣泛應(yīng)用，而且還會(huì)得到不好的反饋。結(jié)果該插件很快就沒有人使用了，您所花費(fèi)的時(shí)間都將白費(fèi)。因此，遵守這些規(guī)則非常重要。這不僅能幫助您鶴立雞群，保證您代碼的統(tǒng)一性，還能增加插件的成功幾率。
第 2 步結(jié)果：我將遵守創(chuàng)建 jQuery 插件的所有規(guī)則
編寫插件
現(xiàn)在可以開始編寫代碼了！開始編寫插件的第一步是確定如何組織您的插件。開始有兩種選擇：您希望它是一個(gè)方法還是一個(gè)函數(shù)？“它們有區(qū)別嗎？”您可能會(huì)這樣問。
正如我上面提到的，方法需要附加到 jQuery.fn 對象，函數(shù)需要附加到 jQuery 對象。這樣一切都清楚了，不是嗎？如果您對 jQuery 相對不太了解，那么可能還不是很清楚。您可以這樣考慮。方法使代碼能夠迭代所有傳入插件的選定元素。因此，插件可以接收任何類型的 HTML 元素，由插件決定如何處理每個(gè)元素。因此，插件方法可以接收任何 jQuery 選擇器，所有從 “p” 到 “#mySpecificPageElement” 的內(nèi)容。如果您希望插件更加靈活，允許用戶傳入任何類型的頁面元素，那么最好使用方法。插件開發(fā)人員應(yīng)該負(fù)責(zé)正確地處理所有內(nèi)容。相比之下，函數(shù)不使用任何選定元素作為參數(shù)。函數(shù)可以簡單地應(yīng)用于整個(gè)頁面。這也由插件開發(fā)人員負(fù)責(zé)處理，開發(fā)人員必須定義他們希望與插件交互的頁面元素，并忽略其他元素。讓我們在代碼中看看不同之處。
清單 1. jQuery 插件方法/函數(shù)
| // This is a method because you can pass any type of selector to the method and it // will take some action on the results of the selector. In this case, it will // doSomething() on the page element with an ID of myExample $("#myExample").doSomething(); // This is also a method, even though you are passing the entire page body to // the method, because you are still passing a selector $("body").doSomethingElse();
// This is a function, because you are NOT passing any selector to the function <div class="anotherThing"> // This hypothetical plug-in developer would document that his plug-in only works |
從這些描述中判斷，插件使用的似乎是方法，因?yàn)槟枰層脩舾嬖V您他們希望格式化哪些頁面元素。清單 2 展示了現(xiàn)在插件的代碼。
清單 2. 方法定義
| jQuery.fn.format = function();
// You would call your plug-in like this (at this point) |
當(dāng)然，您的函數(shù)不可能是放之四海而皆準(zhǔn)的插件，因?yàn)槟幚淼氖菄H化情況，無法自動(dòng)指出希望格式化文本的國家或者需要的格式。因此，您必須稍微修改插件以接收某些選項(xiàng)。格式化方法中需要兩個(gè)選項(xiàng)：數(shù)字應(yīng)該使用的格式（例如，#,### 以及 #,###.00）和本地語言環(huán)境（本地語言環(huán)境是一個(gè)簡單的 2 字符國家代碼，用于確定要使用的國際數(shù)字格式）。
您還需要讓插件盡可能的易于使用，因?yàn)槟仨毺岣卟寮某晒茁省＿@意味著您應(yīng)該繼續(xù)定義一些默認(rèn)的選項(xiàng)，使用戶在不想傳入選項(xiàng)時(shí)不需要這樣做。我編寫插件的所在地是美國，這里使用的是世界上最常見的數(shù)字格式，我的默認(rèn)語言環(huán)境是 “us”，格式默認(rèn)為 “#,###.00”，因此貨幣自然要使用該默認(rèn)值。
清單 3. 允許在插件中使用選項(xiàng)
jQuery.fn.format = function(options) {
// the jQuery.extend function takes an unlimited number of arguments, and each format: "#,###.00", }, options); |
創(chuàng)建插件框架的最后一步是正確處理傳入方法的選定元素。回想一下上例您會(huì)發(fā)現(xiàn)，選定元素可以是單頁面元素，或者是多頁面元素。您必須等效地處理它們。同樣，回想一下 jQuery 插件規(guī)則，"this" 對象只能引用 jQuery 對象。因此，您有一個(gè)對傳入方法的 jQuery 選定元素的引用，現(xiàn)在需要迭代它們。同樣，回顧規(guī)則讓我們知道，每個(gè)插件方法都應(yīng)該返回 jQuery 對象。當(dāng)然，您知道 jQuery 對象就是 "this"，因此在方法中返回 this 完全沒有問題。讓我們看看如何在代碼片段中實(shí)現(xiàn)迭代每個(gè)選定元素并返回 jQuery 對象。
清單 4. 處理 jQuery 對象
jQuery.fn.format = function(options) {
var options = jQuery.extend( { format: "#,###.00", }, options); // this code snippet will loop through the selected elements and return the jQuery object |
由于實(shí)際插件本身不是本文的重點(diǎn)，我不對此進(jìn)行詳細(xì)闡述，但是您可以在本文的插件代碼附件中看到全部內(nèi)容（請參見 下載）。如果您決定編寫函數(shù)而不是方法，我還將向您展示一個(gè)樣例，介紹如何設(shè)置插件架構(gòu)。
清單 5. 使用函數(shù)的示例插件
jQuery.exampleFunction = function(options) {
var options = jQuery.extend( { // your defaults }, options); }); |
調(diào)優(yōu)插件
網(wǎng)上關(guān)于初級插件的大部分文章都到此為止了，這時(shí)它們會(huì)讓您采用基本的插件格式并運(yùn)行。但是，這種基本架構(gòu)也太 “基本” 了。在編寫插件時(shí)還必須考慮另一件重要的事情，給您插件增色所需要的內(nèi)容遠(yuǎn)不止一個(gè)初級插件那么簡單。再多增加兩個(gè)步驟，您就能將初級插件轉(zhuǎn)換為中級插件。
調(diào)優(yōu) #1 - 讓內(nèi)部方法私有化
在任何面向?qū)ο蟮木幊陶Z言中，您會(huì)發(fā)現(xiàn)創(chuàng)建運(yùn)行重復(fù)代碼的外部函數(shù)非常方便。在我創(chuàng)建的 NumberFormatter 插件中，有一個(gè)這種代碼的樣例 ―― 該代碼決定向函數(shù)傳遞哪個(gè)地理位置，以及要使用哪些字符作為小數(shù)點(diǎn)和分組符。format() 方法和 parse() 方法中都需要該代碼，任何一個(gè)初級程序員都會(huì)告訴您這屬于它自己的方法。但是，這會(huì)出現(xiàn)一個(gè)問題，因?yàn)槟幚淼氖?jQuery 插件：如果您使用 JavaScript 中的定義將它作為自己的函數(shù)，那么任何人都可以為任何目的使用腳本調(diào)用該方法。這不是該函數(shù)的目的，我更傾向于不調(diào)用它，因?yàn)樗鼉H用于內(nèi)部工作。那么，讓我們看看如何將該函數(shù)私有化。
這種私有方法問題的解決方案稱為 Closure，它可以有效地從外部調(diào)用關(guān)閉整個(gè)插件代碼，附加到 jQuery 對象的除外（那些是公共方法）。通過這種設(shè)計(jì)，您可以將任何代碼放入插件中，不用擔(dān)心被外部腳本調(diào)用。通過將插件方法附加到 jQuery 對象，您可以有效地將它們變?yōu)楣卜椒ǎ屍渌暮瘮?shù)/類私有化。清單 6 展示了實(shí)現(xiàn)該操作所需的代碼。
清單 6. 私有化函數(shù)
// this code creates the Closure structure
(function(jQuery) {
// this function is "private"
function formatCodes(locale) {
// plug-in specific code here
}; // don't forget the semi-colon
// this method is "public" because it's attached to the jQuery object
jQuery.fn.format = function(options) {
var options = jQuery.extend( {
format: "#,###.00",
locale: "us"
},options);
return this.each(function(){
var text = new String(jQuery(this).text());
if (jQuery(this).is(":input"))
text = new String(jQuery(this).val());
// you can call the private function like any other function
var formatData = formatCodes(options.locale.toLowerCase());
// plug-in-specific code here
});
}; // don't forget the semi-colon to close the method
// this code ends the Closure structure
})(jQuery);
調(diào)優(yōu) #2 - 讓插件的默認(rèn)值可覆蓋
調(diào)優(yōu)插件的最后一步是讓它可以覆蓋默認(rèn)值。畢竟，如果德國的開發(fā)人員下載了該插件，而且了解他的所有 web 應(yīng)用程序用戶希望使用德文版本，那么您應(yīng)該讓他能夠使用一行代碼修改默認(rèn)語言環(huán)境，而不是要他在每個(gè)方法調(diào)用中都修改一遍。這樣您的插件才會(huì)非常方便，因?yàn)橐粋€(gè) web 應(yīng)用程序不太可能使用不同的國際化格式向用戶展示數(shù)字。您在網(wǎng)頁上看一下就知道，所有數(shù)字都是使用同一個(gè)語言環(huán)境的格式。
該步驟要求您修改某處代碼，因此您將看到讓插件最為耀眼的一步。
清單 7. 覆蓋默認(rèn)值
jQuery.fn.format = function(options) { return this.each(function(){ // define the defaults here as an object in the plug-in |
這是創(chuàng)建插件的最后一個(gè)步驟！這樣您就有了一個(gè)不錯(cuò)的插件，可以進(jìn)行最后的測試了。清單 8 展示了您可以放入本文的完整插件，以便您查看這些部分是如何變?yōu)橐粋€(gè)整體的。此外還包含了 parse() 函數(shù)，到目前為止我還沒有討論過該函數(shù)，但是它包含在插件中（我沒有詳細(xì)介紹插件處理格式化的部分，因?yàn)樗鼈儾辉诒疚挠懻撝小永邪嗽摬糠郑寮旧懋?dāng)然也有）。
清單 8. NumberFormatter 插件
(function(jQuery) {
function FormatData(valid, dec, group, neg) { function formatCodes(locale) { jQuery.fn.parse = function(options) { var options = jQuery.extend({},jQuery.fn.parse.defaults, options); var formatData = formatCodes(options.locale.toLowerCase()); var valid = formatData.valid; var array = []; var text = new String(jQuery(this).text());
return array; jQuery.fn.format = function(options) { var options = jQuery.extend({},jQuery.fn.format.defaults, options); var formatData = formatCodes(options.locale.toLowerCase()); var valid = formatData.valid; return this.each(function(){ // formatting logic goes here if (jQuery(this).is(":input")) jQuery.fn.format.defaults = { |
測試插件
創(chuàng)建插件的最后一步是全面測試它。用戶在插件中發(fā)現(xiàn) bug 會(huì)讓他們很惱火。用戶不會(huì)去修復(fù)它，他們會(huì)快速放棄使用它。如果有幾個(gè)這類用戶再加上一些糟糕的評論，您的插件很快就會(huì)石沉大海。此外，這是一個(gè)很好的互惠行為 ―― 您希望自己使用的插件都經(jīng)過了很好的測試，那么您也應(yīng)該提供經(jīng)過良好測試的插件。
我創(chuàng)建了一個(gè)快速測試結(jié)構(gòu)來測試我的插件（不需要單元測試庫），該結(jié)構(gòu)創(chuàng)建了許多跨區(qū)，跨區(qū)中是一些數(shù)字，緊接數(shù)字后面的是該數(shù)字的正確格式。JavaScript 測試對數(shù)字調(diào)用格式，然后比較格式化的數(shù)字與想要的結(jié)果，如果失敗則顯示為紅色。通過該測試，我可以設(shè)置不同的測試用例，測試所有可能的格式（我已經(jīng)這樣做了）。我將測試頁面附加到樣例 下載 中，以便您為測試自己插件找到一個(gè)可能的解決方案，利用 jQuery 進(jìn)行測試。
查看完成的插件
讓我們看看運(yùn)行中的新 NumberFormatter。我已經(jīng)創(chuàng)建了一個(gè)簡單的 web 應(yīng)用程序，您可以查看 NumberFormatter 插件如何滿足您的應(yīng)用程序。
圖 1. 運(yùn)行中的 NumberFormatter
這個(gè) Web 應(yīng)用程序很簡單，也很直接。當(dāng)用戶離開文本字段時(shí)（輸入了薪水、住宅、子女信息之后），NumberFormatter 插件將相應(yīng)地格式化其輸入的信息。該插件使 Web 應(yīng)用程序能夠向用戶展示統(tǒng)一格式的數(shù)字。還要注意，該 web 應(yīng)用程序是為德國用戶格式化的，因此小數(shù)點(diǎn)和分組符號與美國用戶不一樣（關(guān)于這一點(diǎn)，請讓我展示如何更改默認(rèn)值）。
清單 9. 運(yùn)行中的 NumberFormatter
$(document).ready(function() {
// use the AlphaNumeric plug-in to limit the input // you want to change the defaults to use the German locale // when the salary field loses focus, format it properly // when the house field loses focus, format it properly }); |
在結(jié)束之前，關(guān)于 NumberFormatter 插件還有幾件事情需要指出。首先，該插件是第一個(gè) 1.0.0 發(fā)行版，因此我希望將來進(jìn)行擴(kuò)展，包含更多 Java DecimalFormatter 中的格式化功能。包括支持貨幣、科學(xué)計(jì)數(shù)法和百分比。它還對負(fù)數(shù)和正數(shù)包含不同的格式化規(guī)則，負(fù)數(shù)不是簡單的 “-”（例如，對負(fù)數(shù)使用 (5,000)，在會(huì)計(jì)中是這樣做的）。最后，一個(gè)好的格式器應(yīng)該支持格式中的任何字符，而僅它忽略不屬于保留字符的部分。這都是我近期想添加的功能，希望該插件變得更加健壯。
獲取用戶的語言環(huán)境
最后一個(gè)問題與 jQuery 無關(guān)，但是使用該插件時(shí)可能會(huì)出現(xiàn) ―― 如何獲取用戶的語言環(huán)境？這個(gè)問題提得很好，因?yàn)槟壳笆褂?JavaScript 沒有辦法獲取該信息。您需要?jiǎng)?chuàng)建一個(gè) JavaScript Bridge 來實(shí)現(xiàn)該目的。什么是 JavaScript Bridge？我的意思是您可以建立一個(gè)簡單的設(shè)計(jì)模式將值從服務(wù)器端代碼傳入 JavaScript 代碼。清單 10 展示了您可以使用 Java 在 JSP 頁面做到這一點(diǎn)。
清單 10. 獲取用戶的語言環(huán)境
<%
// the request object is built into JSPs %> $(document).ready(function() { // take advantage of the ability to override defaults by using the JavaScript |
共享插件
最后，編寫和測試插件都做完了。最后一步是與他人共享該插件，并將它上傳到 jQuery 網(wǎng)站的插件存儲(chǔ)庫。
- 轉(zhuǎn)到 jQuery 網(wǎng)站的插件頁面，在左導(dǎo)航欄，單擊 Login/Register 然后單擊 Create New Account。如果已經(jīng)有一個(gè)帳戶，請登錄；如果沒有，則創(chuàng)建一個(gè)新帳戶。
- 驗(yàn)證通過后，左導(dǎo)航將出現(xiàn)一些選項(xiàng)。其中有一個(gè) “Add plug-in”。
- 導(dǎo)航插件創(chuàng)建頁面。因?yàn)槟荒苁褂?jQuery 1.2 測試該插件，您應(yīng)該將其作為一個(gè)兼容版本包含在內(nèi)。花一些時(shí)間為插件寫一個(gè)好標(biāo)題以及一個(gè)好的描述。畢竟，現(xiàn)在是向其他用戶推銷該插件的時(shí)候了，您需要讓自己與眾不同。盡量講出該插件的好處。
- 該插件需要您提供插件主頁。雖然您創(chuàng)建了插件，但很可能沒有插件主頁。幸運(yùn)的是，如果您沒有自己的服務(wù)器保存插件，Google 很樂于為開源項(xiàng)目提供空間。我選擇在 Google Code 中放置該插件。要建立自己的 Google Code 項(xiàng)目，只需要訪問 code.google.com 然后按照注冊流程注冊即可。
- 按下 Submit 之后您的插件就創(chuàng)建好了！
恭喜，您的插件現(xiàn)在是 jQuery 插件社區(qū)的一部分了，您現(xiàn)在正式成為開源項(xiàng)目的貢獻(xiàn)者之一。給自己一個(gè) 5 星評級以獎(jiǎng)勵(lì)自己吧！因?yàn)槟档茫?
結(jié)束語
在本文中，我主要介紹如何為 jQuery JavaScript 框架創(chuàng)建插件。我從頭開始，構(gòu)思了一個(gè)想法并將其付諸實(shí)現(xiàn)，介紹了創(chuàng)建該插件要使用的幾個(gè)步驟。然后，我閱讀了 jQuery “戒律”，它是為確保插件的一致性而設(shè)置的插件規(guī)則。我還在文章中提醒這些規(guī)則，因?yàn)槲铱吹皆S多規(guī)則在插件中都沒有得到遵守，尤其是只能在插件中使用 “jQuery” 而不是 “$”（當(dāng)然，我遵守了該規(guī)則）。
介紹了插件的背景，以及編寫插件的規(guī)則之后，您了解了基本的插件框架以及在插件中編寫方法與編寫函數(shù)的不同。方法應(yīng)該在采用選定元素作為參數(shù)并對其執(zhí)行某些操作時(shí)使用。提供頁面元素的任務(wù)由調(diào)用方法的人負(fù)責(zé)。另一方面，函數(shù)應(yīng)該在對選定元素不感興趣時(shí)使用，因?yàn)槟呀?jīng)知道要執(zhí)行操作的頁面元素。提供頁面元素的任務(wù)由編寫該函數(shù)的開發(fā)人員負(fù)責(zé)。這兩種形式的插件都是有效的，僅在在插件需求上有所不同。最后，查看設(shè)置默認(rèn)選項(xiàng)的基本方式以及如何讓用戶提供自己的選項(xiàng)。
本文的下一步是為插件提供一些亮點(diǎn)，以增加它的先進(jìn)性。該步驟給整個(gè)插件畫上了句號，有效地創(chuàng)建了私有函數(shù)和公共函數(shù)。我創(chuàng)建了一些在插件內(nèi)部調(diào)用的函數(shù)，以便插件外部的人無法調(diào)用它們。您還可以看到如何向插件用戶展示默認(rèn)值，讓用戶定義他們自己的默認(rèn)值，輕松實(shí)現(xiàn)編碼。
最后，在樣例 web 應(yīng)用程序中使用插件展示它的行為。本文的最后一部分是這些努力工作的最終成果 ―― 您需要將插件上傳到 jQuery 插件社區(qū)站點(diǎn)，讓它成為 JavaScript 庫的一部分。
JavaScript技術(shù)：jQuery創(chuàng)建自己的插件(自定義插件)的方法，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
