本节书摘来自异步社区《扩展 jQuery》一书中的第2章，第2.2节，作者：【美】Keith Wood著，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.2 一个简单的插件
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属性表达更长的提示信息。
