本節書摘來自異步社群《擴充 jquery》一書中的第2章，第2.2節，作者：【美】keith wood著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
jquery插件簡直可以做任何事情，大量的第三方插件就可以證明這一點。從影響單個元素的簡單插件，到改變多個元素的外觀和行為的複雜插件，比如驗證插件，應有盡有。
最為常用的一類jquery插件是集合插件，它被用來為使用選擇器或者周遊dom得到的一組元素添加功能。開發者可以建立一個水印插件作為這種類型的插件的一個簡單示例，它在必要時為字段内部提供一個标簽。這會讓開發者對如何建構一個插件有一定的感覺。
2.2.1 占位文字
為了節省表單所占用的空間，有時開發者會省略字段的标簽，并用一個占位符（字段内的一段文字，在開始輸入時隐去）來代替。當字段為空時，占位符則顯示出來。為了保證更好的使用者體驗，占位文字通常為灰色，以表示這不是字段的真實值。這個标簽功能通常被稱為水印（watermark）。
可以在插件初始化時指定占位文字，但是更好的方式是在每個字段上指定這個文本。這樣可以一次設定多個字段，并且每個字段都有自己的标簽。input字段的title屬性是存放這個占位文字的理想之處，它的目的是儲存這個字段的簡短描述，當滑鼠懸浮在字段上時會顯示在一個提示框（tooltip）中。對于有視覺障礙的人，title可以在字段獲得焦點的時候被讀出來，用來識别該字段。
當字段擷取焦點時，如果存在占位文字，則需要把它移除，并更改字段的樣式以清除灰色字型。類似地，當字段失去焦點時，如果字段還是空，開發者需要恢複占位字元和樣式。圖2.3顯示了水印插件在輸入資料的不同時期的運作狀态。
為了擷取最大的靈活性，顯示占位文字時字段的樣式應該由css控制。開發者可以在字段顯示占位符時為它指定一個類（class），并在它失去焦點或輸入一個真實值時移除這個類。實際的外觀則由一個css樣式控制，并且可以很容易地由使用者覆寫。
2.2.2 水印插件的代碼
因為watermark插件可以應用在頁面的多個元素上，是以它是一個集合插件。這意味着它的操作對象是通過選擇器或者周遊dom得到的一組元素。這樣，它就需要擴充$.fn來把自己的功能整合到jquery的選擇和調用流程中。
程式清單2.1是watermark插件的完整代碼。
程式清單2.1 watermark插件
這個插件通過聲明$.fn.watermark 1 來擴充$.fn，使它能與jquery的選擇和操作流程融為一體。新定義的這個屬性（watermark）以它所提供的功能命名，将來也用這個名字來通路。這個屬性的值是一個函數，它接收一個參數（options）并為目标字段添加新功能。它隻用到了一個選項，就是當一個字段顯示占位文字時的樣式類名。開發者需要為這個選項提供一個預設值，但是同時允許使用者覆寫它2。首先，開發者需要把這個預設值定義為一個對象，屬性為watermark class，值為watermark。這個對象可以被使用者提供的任何選項所擴充，進而可能導緻預設值被覆寫。||{}結構保證了當使用者在初始化時沒有提供參數的情況下，把options替換為一個空對象（不改變預設值）。
作為jquery哲學的一個重要組成部分，為了使這個插件支援與其他插件的鍊式調用，這個函數必須傳回它正在操作的元素集合3。因為大多數内置的jquery函數也傳回這個集合，開發者可以傳回調用标準jquery功能的傳回結果。
開發者需要為每個標明的字段添加一個focus處理器3。在這個處理器中，因為目前字段需要被用到多次，是以被儲存為一個jquery對象的引用。接下來，開發者檢查目前字段的值是否等于字段的title屬性的值4。如果是，則通過把字段值設定為空來移除占位文字5，并移除選項中指定的标記類。
因為開發者在同樣的字段上執行同樣的操作，可以再接一個blur處理函數6。再次儲存一個目前字段的引用，以便重用。這次如果目前字段值為空7 ，則恢複占位文字（從title屬性擷取）和标記類8。
最後，觸發剛剛定義的blur處理函數來根據字段的目前值進行初始化9。
2.2.3 清除水印
因為占位文字設定為每個字段的值，若不做些處理，它将被送出到伺服器。使用占位符是一個純粹的使用者界面行為，是以也應該在用戶端送出表單之前清除這些值。
清除這些占位符的一個簡單方法是定義另一個集合插件來完成這個任務。程式清單2.2中的代碼就是這個另外的函數。
程式清單2.2 清除水印
因為開發者操作的仍然是頁面上的一組元素，是以再次通過擴充$.fn來定義插件函數$.fn.clear-watermark1。使用each函數傳回目前標明集合的引用，以便鍊式調用2。對于每一個標明的元素，如果它的目前值與字段的title屬性相同3，則重置它4。
開發者可以在把這些字段值送出到伺服器或者做其他處理之前調用這個函數。開發者可以在必要的時候通過在每個字段上觸發blur處理函數來輕易地恢複占位文字。
2.2.4 使用水印插件
直接把前面的代碼放在需要的頁面上，就能使用這個水印插件。還可以把代碼放到一個單獨的javascript檔案（jquery.watermark.js）中，并把它加載到開發者的頁面中。類似地，插件的樣式也可以直接放在頁面上，或者從一個單獨的css檔案（jquery.watemark.css）加載。把樣式和代碼放在單獨的檔案中有利于在其他頁面上進行重用。
圖2.4展示了一個使用水印插件的頁面。程式清單2.3是這個頁面的代碼。
程式清單2.3 使用水印插件
首先為水印插件加載包含樣式的css檔案1。這個樣式使占位文字顯示為灰色（假定使用預設的标記類）：
首先必須加載jquery庫2，以保證後續的插件代碼可以使用它3。當dom被加載完畢并一切就緒時4，開發者就可以使用這個新插件了。
通過在標明的字段（包含wmark類的input字段）上調用插件函數，開發者可以應用插件的功能5。回想一下，這個插件傳回之前標明的元素集合，這樣後續的操作就可以進行鍊式調用。因為這些字段被初始化為空，是以插件會讀取每個字段的title屬性，并把它作為占位文字填充字段。
在這些字段被送出并做進一步處理時6，開發者首先需要在使用這些字段值前把字段的占位文字清除7。根據流程，開發者可以通過在受影響的字段上觸發blur處理函數來恢複占位文字8。
可以在文檔的body中找到使用水印插件的實際字段9，它們被設定了wmark類以便選擇。
當開發者在浏覽器中打開這個頁面時，會發現一開始兩個輸入框都有灰色的占位文字。當把焦點移動到其中一個字段上時，占位符會消失，并且開發者可以輸入合适的值。如果開發者沒有輸入任何值，當焦點離去時，占位文字又會恢複回來并且字段會被灰掉。當單擊送出按鈕時，所有的占位文字都會被移除，字段值會被顯示在提示框中，并且如果有必要的話，占位文字會被恢複。
這個簡單的集合插件讓讀者領略了一個jquery插件用寥寥幾行代碼能實作什麼功能。通過把代碼放在一個單獨的檔案中，開發者可以輕松地在其他需要同樣功能的頁面上重用它。接下來的幾章将介紹一些開發者需要努力應用在自己的插件上的最佳實踐原則，使自己的插件的功能更加強大和健壯。讀者還可以看到兩個為常見的控件需求提供基礎設施的控件架構，以及如何測試、打包和用文檔說明自己的插件，以便其他人能更好地使用。
開發者需要知道
jquery被設計為可擴充的。
jquery有許多擴充點，允許開發者為它添加不同類型的功能。
建立一個簡單的插件很容易。
通過擴充$.fn可以添加一個可以操作一組標明元素的集合插件。
把開發者的插件代碼放在單獨的檔案中，以便在其他頁面上重用。
自己試試看
修改水印插件，從data-label屬性中擷取占位文字。這樣就可以在提供一個占位文本的同時，還可以用title屬性表達更長的提示資訊。